目次に戻る

button要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
属性
  • グローバル属性
  • type→値は下記のとおり。デフォルトはsubmit。当該フォームコントロールのタイプを指定する。
    • submit→フォームの送信ボタン。
    • reset→フォームのリセットボタン。
    • button→汎用ボタン。
  • name→typeがsubmitである場合の送信用名前文字列。typeがsubmitである場合は、送信値とセットでフォーム送信される。属性値にisindexを指定してはならない。
  • value→送信値を指定する。
  • disabled→ブーリアン属性。当該フォームコントロールを無効にする場合に指定する（操作できなくなり、送信値はフォーム送信されない）。この状態は、スクリプトを用いないと解除できない。
  • form→同一HTML文書内にあるform要素のid属性値。所属フォームを指定する。
  • formaction→typeがsubmitである場合に、フォーム送信先のURLを指定。form要素の指定より優先される。
  • formenctype→値は下記のとおり。typeがsubmitである場合に、フォームのデータ形式を指定。form要素の指定より優先される。非妥当値のデフォルトは、application/x-www-form-urlencoded
    • application/x-www-form-urlencoded→すべての文字をURLエンコード形式でフォーム送信。
    • multipart/form-data→バイナリーデータ形式でフォーム送信（ファイルの場合はこれを指定する）。
    • text/plain→プレーンテキスト形式でフォーム送信。
  • formmethod→値は下記のとおり。typeがsubmitである場合に、フォーム送信形式を指定。form要素の指定より優先される。非妥当値のデフォルトは、get
    • get→URLの一部としてフォーム送信（URL末尾に、「?」の後に、「&」区切りで、「送信用名前文字列=送信値」を列挙）。
    • post→HTTP通信の本体データとしてフォーム送信。
    • dialog→直近の祖先dialog要素の返し値（returnValueプロパティの値）にセットして、ダイアログボックスを閉じる。
  • formnovalidate→ブーリアン属性。typeがsubmitである場合に、フォーム送信時の制約検証をしない場合に指定する。form要素の指定より優先される。
  • formtarget→値は下記のとおり。typeがsubmitである場合に、フォーム送信の結果を表示する場所を指定する場合に指定する。form要素の指定より優先される。
    • _blank→別ウィンドウ又は別タブ。
    • _top→入れ子の閲覧文脈の中で、当該要素が現在属している閲覧文脈の最上位の祖先の閲覧文脈。
    • _parent→入れ子の閲覧文脈の中で、当該要素が現在属している閲覧文脈の親の閲覧文脈。
    • _self→当該要素が現在属している閲覧文脈。
    • その他妥当な閲覧文脈名→「_」（アンダースコア）で始まらない一文字以上の文字列。当該要素が現在属している入れ子の閲覧文脈の中又は当該要素が属していない既に開いている別ウィンドウ（もしくは別タブ）に該当する閲覧文脈名のものがあれば、そこに開く。それがなければ、当該閲覧文脈名にて別ウィンドウ又は別タブを開く。
  • popovertarget→ボタンによる操作のターゲットとなる要素（popover属性が指定されたものに限る）のid属性値。button要素がフォームの送信ボタンとして機能する場合は、popovertarget属性は機能しない。
  • popovertargetaction→値は下記のとおり。未指定あるいは非妥当値のデフォルトは、toggle。popovertarget属性で指定されたターゲットに対する操作を指定する。
    • toggle→表示・非表示の状態を切り替える。
    • show→表示状態にする。
    • hide→非表示状態にする。
  • typeがsubmitでない場合は、formaction、formenctype、formmethod、formnovalidate、formtargetは指定されてはならない。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、button。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、checkbox、combobox、gridcell、link、menuitem、menuitemcheckbox、menuitemradio、option、radio、separator、slider、switch、tab、treeitemを指定可。
  • disabled属性が指定されている場合は、aria-disabled属性を指定すべきではない。
  • disabled属性が指定されている場合は、aria-disabled属性値にfalseを指定してはならない。
視覚系ブラウザのデフォルトとして期待されるCSS

  button {
    letter-spacing: initial;
    word-spacing: initial;
    line-height: initial;
    text-transform: initial;
    text-indent: initial;
    text-shadow: initial;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    appearance: auto;
  }
視覚系ブラウザにおいて期待されるレンダリング
  • displayの計算値がinlineの場合は、{display: inline-block;}のボタンを表示。
  • displayの計算値が上記以外の場合は、{display: flow-root;}のボタンを表示。
  • ただし、displayの計算値がinline-grid、grid、inline-flex、flex、none、contentsのいずれかの場合は、{display: 当該計算値;}のボタンを表示。
  • inline-sizeの計算値がautoの場合は、内容が収まるインラインサイズとなる。
  • ボタン内部の匿名ボタン内容ボックスには、当該要素の内容を表示。
  • 匿名ボタン内容ボックスは{display: flow-root;}で、その内容は縦横ともに中央寄せが原則。
制約検証
  • typeがreset、buttonの場合は、制約検証の対象から除外。そうでないなら、原則として、制約検証の対象。
  • disabled属性があれば、制約検証の対象から除外。
意味・用法

ボタンを表す。

typeがsubmitならば、フォームの送信ボタン。

typeがresetならば、フォームのリセットボタン。

typeがbuttonならば、汎用ボタン。

アクセシビリティ関連

私見・補足

汎用ボタンは、主にクリックイベント等にスクリプトを設定して用いる。

disabledの状態のときのレンダリングについては、HTML Living Standardには明記がないようなのだが、HTML4.01仕様のフォーム関連の規定では、ユーザーエージェントによるものとされていたので、それに基づいて実装しているブラウザが多いと思われる。

表示確認

ソース

  送信するとグーグル検索します。
  <form action="http://www.google.co.jp/search">
    <div><label>検索語→<input type="search" name="q" placeholder="検索キーワード" /></label></div>
    <div><label>typeがsubmit→<button type="submit" name="submit">送信</button></label></div>
    <div><label>typeがreset→<button type="reset">リセット</button></label></div>
    <div><label>typeがbutton→<button type="button" onclick="document.getElementsByTagName('form')[0].style.color='red'">文字を赤くするよ</button></label></div>
    <div><label>typeがsubmit、disabled指定→<button type="submit" name="submit" disabled="disabled">disabled</button></label></div>
  </form>
表示結果
送信するとグーグル検索します。