最終更新日

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属性の値がサーバーへ送信されないことが挙げられます。

HTML5での変更点
・autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtargetの各属性が新たに追加されました。
・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>
参考文献:W3C HTML5「4.10.8 The button element」外部リンク
HOME