最終更新日 
button要素
button要素は、フォーム内にボタンを作ります。type属性でボタンの種類を指定しますが、その値が「submit」であれば送信用のボタン、「reset」であればリセット用のボタン、「button」であれば汎用のボタンとなります。button要素は、Phrasingコンテンツの記述箇所で使用できます。
autofocus、disabled、form、name、valueの各属性は、フォームコントロールの要素で共通の属性です。
autofocus属性は新しい属性で、指定した項目では、ページの表示時にフォーカスがその項目の上に設定されます。
disabled属性を指定すると、そのフォームコントロールが使用不可に設定され、項目の選択や内容の変更ができなくなります。
form属性も新しい属性です。form属性では、その項目と関連付けたいform要素のid属性の値を指定します。初期値では、直近の親要素であるform要素に関連付けられています。
name属性では、項目の名前を指定できます。
value属性では、要素の項目に初期値を指定できます。value属性に指定した値は、「送信ボタン」がクリックされたときにサーバーへ送られます。button要素のvalue属性で値の指定を省略していた場合は空文字列が送信されます。
また、formaction、formenctype、formmethod、formnovalidate、formtargetの各属性は、フォーム送信のための属性です。type属性が「submit」に設定されている場合のみ、これら5つの属性を指定可能です。指定を省略した場合は、form要素での対応する属性の指定値が適用されます。属性値の指定に関しては、form要素の項も参照してください。
button要素の機能は、input要素のtype属性で「submit」、「reset」、「button」を指定した場合とほぼ同等です。違いとしては、button要素では画像などのコンテンツを子要素に指定できること、また、ボタンの表示名を指定するときにinput要素ではvalue属性で指定しますが、button要素はコンテンツで指定するため、button要素の場合は指定しない限り、value属性の値がサーバーへ送信されないことが挙げられます。
・datasrc、datafld、dataformatasの各属性は廃止されました。
| カテゴリ | タグの省略 | 親要素 | 子要素 |
|---|---|---|---|
|
Flowコンテンツ Phrasingコンテンツ Interactiveコンテンツ フォーム関連要素 |
省略不可 | Phrasingコンテンツを子にできる要素 | Phrasingコンテンツ（子孫にInteractiveコンテンツがないこと） |
| 属性 | 値 | 説明 |
|---|---|---|
| type | submit｜reset｜button | submit（送信ボタン）、reset（リセットボタン）、button（汎用ボタン）のいずれかのキーワードを指定します。初期値は「submit」です。 |
| autofocus | autofocus | 論理属性。ページ表示時に項目がフォーカスされます。 |
| disabled | disabled | 論理属性。フォームコントロールが使用不可になります。 |
| name | 文字列 | button要素の名前を指定します。 |
| value | 文字列 | サーバーへ送信する値を指定します。 |
| form | ID | form要素のid属性の値を指定します。 |
| formaction | URL | フォームデータの送信先URLを指定します。 |
| formenctype | キーワード | 送信するデータの形式を、「application/x-www-form-urlencoded」「multipart/form-data」「text/plain」のいずれかのキーワードで指定します。省略時は「application/x-www-form-urlencoded」が適用されます。 |
| formmethod | get｜post | フォームデータの送信方法を、getまたはpostのいずれかで指定します。省略時は「get」です。 |
| formnovalidate | formnovalidate | 論理属性。フォーム送信時の入力内容の確認を省略します。 |
| formtarget | 文字列 | 送信結果ページの表示方法について、キーワードかウィンドウ名で指定します。キーワードは4つあり、「_self」は現在のウィンドウ、「_parent」は親ウィンドウ、「_top」は最上位のウィンドウ、「_blank」は新しいウィンドウに、それぞれ表示されます。 |
| グローバル属性 | - | - |
| イベント属性 | - | - |
<body>
<p>お問い合わせ</p>
<form method="post" action="contact.php">
<p><label>メールアドレス：<input type="email" name="mailad"></label></p>
<p><label>タイトル：<input type="text" name="title"></label></p>
<p><label>メッセージ：<textarea name="message"></textarea></label></p>
<p>
<button type="submit">送信</button>
<button type="reset">リセット</button>
<button type="button" onclick="alert(全て必須です。)">注意事項</button>
</p>
</form>
</body>
