目次に戻る

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

概要

カテゴリー

W3C : HTML5.3Reassociateable elementにも属していた。

W3C : HTML5.3Autocapitalize-inheriting element自体が存在してなかった。

配置できる場所
内容モデル

W3C : HTML5.3tabindex属性要素を禁止する規定はなかった(ただし、tabindex属性要素Interactive contentとされていたので、実質的な差はない)。

属性
  • グローバル属性
  • type→値は下記のとおり。指定なき場合のデフォルトsubmit。当該フォームコントロールのタイプを指定する。
    • submitフォーム送信ボタン
    • resetフォームリセットボタン
    • button汎用ボタン
  • nametypesubmitである場合の送信用名前文字列typesubmitである場合は、送信値とセットでフォーム送信される。属性値isindexを指定してはならない。
  • value送信値を指定する。
  • disabledブーリアン属性。当該フォームコントロールを無効にする場合に指定する(操作できなくなり、送信値フォーム送信されない)。この状態は、スクリプトを用いないと解除できない。
  • form→同一HTML文書内にあるform要素id属性値。当該フォームに関連付ける。
  • formactiontypesubmitである場合に、フォーム送信先のURLを指定。form要素の指定より優先される。
  • formenctype→値は下記のとおり。typesubmitである場合に、フォームのデータ形式を指定。form要素の指定より優先される。
    • application/x-www-form-urlencoded→すべての文字をURLエンコード形式でフォーム送信
    • multipart/form-dataバイナリーデータ形式でフォーム送信ファイルの場合はこれを指定する)。
    • text/plainプレーンテキスト形式でフォーム送信
  • formmethod→値は下記のとおり。typesubmitである場合に、フォーム送信形式を指定。form要素の指定より優先される。
    • getURLの一部としてフォーム送信URL末尾に、「?」の後に、「&」区切りで、「送信用名前文字列=送信値」を列挙)。
    • postHTTP通信の本体データとしてフォーム送信
    • dialog→直近の祖先dialog要素の返し値にセットして、ダイアログボックスを閉じる。
  • formnovalidateブーリアン属性typesubmitである場合に、フォーム送信時の制約検証をしない場合に指定する。form要素の指定より優先される。
  • formtarget→値は下記のとおり。typesubmitである場合に、フォーム送信の結果を表示する場所を指定する場合に指定する。form要素の指定より優先される。
    • _blank別ウィンドウ又は別タブ
    • _top入れ子閲覧文脈の中で、当該要素が現在属している閲覧文脈の最上位の祖先閲覧文脈
    • _parent入れ子閲覧文脈の中で、当該要素が現在属している閲覧文脈閲覧文脈
    • _self→当該要素が現在属している閲覧文脈
    • その他妥当な閲覧文脈名→「_」(アンダースコア)で始まらない一文字以上の文字列。当該要素が現在属している入れ子閲覧文脈の中又は当該要素が属していない既に開いている別ウィンドウ(もしくは別タブ)に該当する閲覧文脈名のものがあれば、そこに開く。それがなければ、当該閲覧文脈名にて別ウィンドウ又は別タブを開く。
  • typesubmitでない場合は、formactionformenctypeformmethodformnovalidateformtargetは指定されてはならない。
  • W3C : HTML5.3name属性値isindexを指定してはならないとはされてなかった。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、buttonデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外では、checkboxlinkmenuitemmenuitemcheckboxmenuitemradiooptionradioswitchtabを指定可。
  • disabled属性が指定されてる場合は、aria-disabled属性は指定すべきではない。
視覚系ブラウザデフォルトとして期待される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;
  }
  
視覚系ブラウザにおいて期待されるレンダリング
  • displayの計算値がinlineの場合は、{display: inline-block;}のボタンを表示。
  • displayの計算値が上記以外の場合は、{display: flow-root;}のボタンを表示。
  • ただし、displayの計算値がinline-gridgridinline-flexflexのいずれかの場合は、{display: 当該計算値;}のボタンを表示。
  • inline-sizeの計算値がautoの場合は、{inline-size: fit-content}
  • ボタン内部の匿名ボタン内容ボックスには、当該要素内容を表示。
  • 匿名ボタン内容ボックスは{display: flow-root;}で、その内容は縦横ともに中央寄せが原則。
制約検証
  • typeresetbuttonの場合は、制約検証の対象から除外。そうでないなら、原則として、制約検証の対象。
  • disabled属性があれば、制約検証の対象から除外。
HTML extension

formmethod属性値に下記を追加。詳細は、HTML Form HTTP Extensionsを参照。

  • connectconnectメソッドフォーム送信
  • tracetraceメソッドフォーム送信
  • tracktrackメソッドフォーム送信

属性に下記を追加。詳細は、HTML Form HTTP Extensionsを参照。

  • payload→値は下記のとおり。フォーム及び送信ボタンによる指定を無視して、当該要素送信値フォーム送信形式を指定する。
    • _actionURLの一部としてフォーム送信
    • _headerHTTP通信のヘッダデータとしてフォーム送信
    • _bodyHTTP通信の本体データとしてフォーム送信
意味・用法

ボタンを表す。

typesubmitならば、フォーム送信ボタン

typeresetならば、フォームリセットボタン

typebuttonならば、汎用ボタン

アクセシビリティ関連

私見・補足

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

submitとしてのbutton要素は、IE6等ではHTML4にも反する実装なので、IE6等を対象とするならば用いないこと(input要素で間に合う)。

formactionformenctypeformmethodformnovalidateformtargetの各属性は、旧式ブラウザは未対応なので、注意すること。

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>
  
表示結果
送信するとグーグル検索します。