HTMLの<button>タグの使い方を詳しく解説-htmlチュートリアル-php.cn

HTMLの

黄舟

リリース： 2017-06-20 13:40:56

オリジナル

9961 人が閲覧しました

button ボタンの概要: button はボタンを定義するものですが、のときにボタンも作成されることがわかります。ここで私が話しているのは、ボタンのラベルと入力のラベルの違いです。もちろん、このタグは、ボタンを設定したり、ボタンにテキストを設定したり、画像を読み込んだりすることもできます。マルチメディア HTML5 では、ボタンタグにオートフォーカスなどのいくつかの属性が追加されました。無効、フォーム、フォーメーション、formenctype、formmethod、fornovalidate、formtarget、name、type、value このラベルを説明するために、いくつかの小さなケースを実行してみましょう

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title></title>
</head>
<body>
   <button type="button">这是一个按钮</button>
    <hr/>
   <br/>
   <!-- 这个地方告诉我们在button之间的文本都会写到button这个按钮上面 -->
   <button type="button">
   <img  src="https://www.baidu.com/img/bd_logo1.png"    style="max-width:90%"  style="max-width:90%" alt="HTMLの<button>タグの使い方を詳しく解説" >
   </button>
   <!-- 这一个部分告诉我们可以将按钮设置为图画，在按钮上增加图片 -->
   <hr/>
   <button type="button" autofocus="autofocus">已经获得焦点</button>


   <!--这个地方定义一个获得焦点的按钮，获得焦点就和鼠标在上面滑动一样-->
   <hr/>
   <button type="button" disabled="disabled">失效</button>
   <!-- 在这个地方定义一个失效的按钮，已经禁用，其实就是在button中增加一个属性
   并且将值设置为disabled -->
    <form action="http://www.w3school.com.cn/example/html/form_action.asp"
    method="get">
    请选择你喜爱的项目:
    <button name="subject" type="submit" value="HTML">HTML</button>
    <button name="subject" type="subject" value="CSS">CSS</button>
     </form>
        <!--在这个地方用到form和button进行结合使用，其实form提供的是
        一个来链接，button的属性是提交submit，而且method方法是得到
        应该注意的是button标签尽量少和form一起使用，因为不同的浏览器提交的
        内容是不同的，有的 是value的值，有的 是button之间的内容  -->


</body>
</html>

ログイン後にコピー

1. 通常のボタン button

通常のボタンは、JavaScript と一致する必要があります。フォームを実装するスクリプト。

文法:

<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>

ログイン後にコピー

説明:

valueの値はボタンに表示されるテキストです。onclickは通常のボタンのイベントです。これについてはJavaScriptの入門チュートリアルで詳しく説明します。誰でもOKです。ここでそれを理解してください。

例:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    单击按钮弹出对话框：<br/>
    <input type="button" value="按钮" onclick="alert(&#39;你点击了按钮！&#39;)">
</body>
</html>

ログイン後にコピー

ブラウザでのプレビュー効果は次のとおりです:

HTMLの<button>タグの使い方を詳しく解説

次に、ボタンをクリックすると、プロンプトボックスがポップアップ表示されます:

HTMLの<button>タグの使い方を詳しく解説

2. 送信ボタン submit

ボタンは特別な機能とみなすことができます。通常のボタンの場合、送信ボタンをクリックしてフォームのコンテンツをサーバーに送信して処理します。

構文:

<input type="submit" value="提交按钮的取值"/>

ログイン後にコピー

説明:

value の値は、ボタンに表示されるテキストです。例については、「リセットボタン」の例を参照してください。

送信ボタンの本当の有用性は、バックエンド技術を学ぶまで真に理解することはできません。

3. リセットボタンリセット

リセットボタンをクリックすると、ページフォームにユーザーが入力した情報をクリアできます。

構文:

<input type="reset" value="重置按钮的取值"/>

ログイン後にコピー

説明:

value の値は、ボタンに表示されるテキストです。

例:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form name="form1" method="post" action="index.html">
        账号：<input type="text"/><br/>
        密码：<input type="text"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

ログイン後にコピー

ブラウザでのプレビュー効果は次のとおりです:

HTMLの<button>タグの使い方を詳しく解説