目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル
属性
  • グローバル属性
  • 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
    • application/x-www-form-urlencoded→すべての文字をURLエンコード形式でフォーム送信
    • multipart/form-dataバイナリーデータ形式でフォーム送信ファイルの場合はこれを指定する)。
    • text/plainプレーンテキスト形式でフォーム送信
  • formmethod→値は下記のとおり。typesubmitである場合に、フォーム送信形式を指定。form要素の指定より優先される。非妥当値のデフォルトは、get
    • getURLの一部としてフォーム送信URL末尾に、「?」の後に、「&」区切りで、「送信用名前文字列=送信値」を列挙)。
    • postHTTP通信の本体データとしてフォーム送信
    • dialog→直近の祖先dialog要素の返し値にセットして、ダイアログボックスを閉じる。
  • formnovalidateブーリアン属性typesubmitである場合に、フォーム送信時の制約検証をしない場合に指定する。form要素の指定より優先される。
  • formtarget→値は下記のとおり。typesubmitである場合に、フォーム送信の結果を表示する場所を指定する場合に指定する。form要素の指定より優先される。
    • _blank別ウィンドウ又は別タブ
    • _top入れ子閲覧文脈の中で、当該要素が現在属している閲覧文脈の最上位の祖先閲覧文脈
    • _parent入れ子閲覧文脈の中で、当該要素が現在属している閲覧文脈閲覧文脈
    • _self→当該要素が現在属している閲覧文脈
    • その他妥当な閲覧文脈名→「_」(アンダースコア)で始まらない一文字以上の文字列。当該要素が現在属している入れ子閲覧文脈の中又は当該要素が属していない既に開いている別ウィンドウ(もしくは別タブ)に該当する閲覧文脈名のものがあれば、そこに開く。それがなければ、当該閲覧文脈名にて別ウィンドウ又は別タブを開く。
  • typesubmitでない場合は、formactionformenctypeformmethodformnovalidateformtargetは指定されてはならない。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、buttonデフォルトrolerole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、checkboxcomboboxlinkmenuitemmenuitemcheckboxmenuitemradiooptionradioswitchtabを指定可。
  • 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-gridgridinline-flexflexのいずれかの場合は、{display: 当該計算値;}のボタンを表示。
  • inline-size計算値autoの場合は、内容が収まるインラインサイズとなる。
  • ボタン内部の匿名ボタン内容ボックスには、当該要素内容を表示。
  • 匿名ボタン内容ボックスは{display: flow-root;}で、その内容は縦横ともに中央寄せが原則。
制約検証
  • typeresetbuttonの場合は、制約検証の対象から除外。そうでないなら、原則として、制約検証の対象。
  • disabled属性があれば、制約検証の対象から除外。
意味・用法

ボタンを表す。

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

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

typebuttonならば、汎用ボタン

アクセシビリティ関連

私見・補足

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

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