アクションを実行するために、select 要素とともにボタンを使用する

適用 (対象)

HTML 及び XHTML。

これは達成基準 3.2.2: 入力時 (G80: コンテキストの変化を開始する送信ボタンを提供するの達成方法として十分) に関する達成方法である。

解説

この達成方法の目的は、select 要素の値を選択することで意図せずアクションが実行されるのではなく、アクションの実行を利用者が制御できるようにすることである。利用者は、アクションが実行されるとは思わずに、select 要素にどんな値があるのかを調べたり、間違って意図しない値を選んだりするかもしれない。利用者が自分の選択に納得したとき、アクションを実行するボタンを選択できるようにする。

select 要素の選択肢の操作によって (フォームの) コントロールの値が変化する場合、キーボードで select 要素の値を選んでいる利用者に対して特に重要である。

事例

<label for="month">Month:</label>
<select name="month" id="month">
  <option value="1">January</option>
  <option value="2"> February</option>
  ...
  <option value="12">December</option>
</select> 
<label for="year">Year:</label>
<input type="text" name="year" id="year">
<input type="button" value="Show" onclick = "...">

<form action="http://somesite.com/action" method="post">
  <label for="action">Options:</label>
  <select name="action" id="action">
    <option value="help">Help</option>
    <option value="reset">Reset</option>
    <option value="submit">Submit</option>
  </select> 
  <button type="submit" name="submit" value="submit">Do It </button>
</form>              

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

• Jukka Korpela: Navigational pulldown menus in HTML

関連する達成方法

• H32: 送信ボタンを提供する
• G80: コンテキストの変化を開始する送信ボタンを提供する

検証