Days on the Moon

この記事は HTML アドベントカレンダーの 11 日目の分、兼 CSS アドベントカレンダーの 11 日目の分です。

Web ページに備えられた検索機能を使うとき、検索語の入力欄で Enter キーを押下 (ソフトウェアキーボードなら「実行」といったキーを実行) して検索結果画面に進んだことのある人は多いでしょう。このようにフォーム送信ボタンを介さずにフォームを送信する機能は、HTML 標準で暗黙的なフォーム送信として定義されています。

あるフォームに含まれる送信ボタンのうち、文書順で最初に出現するものをデフォルトボタンといいます。暗黙的な送信の基本的な挙動は、あるフォームのフォームコントロール上で Enter キーを押下したりすると、そのフォームデフォルトボタンを実行したのと同じ扱いになるというものです。以下の例では、テキスト入力欄で Enter キーを押下すると、「検索する」ボタンが実行されたとみなされ、/search?q={入力した語}&feeling=so-so という URL のページに移動します。

<form action="/search">
  <p>
    <input type="search" name="q" aria-label="検索する語">
    <button type="submit" name="feeling" value="so-so">検索する</button>
    <button type="submit" name="feeling" value="lucky">いい感じに検索する</button>
  </p>
</form>

デフォルトボタンが無効化されている (disabled 属性が付与されている) 場合は暗黙的なフォーム送信が行われません。

デフォルトボタンがない (フォーム内に送信ボタンが含まれない) 場合、そのフォームに含まれるテキスト入力欄 (パスワード入力欄や日時入力欄なども含む) がひとつだけなら暗黙的なフォーム送信が行われます。テキスト入力欄がふたつ以上あるときは暗黙的なフォーム送信が行われません。これらの挙動には歴史的経緯がありそうですが調べられていません。

デフォルトボタンを Web 製作者側で指定できるようにしようという提案もありますが、あまり議論が進んでいません。

デフォルトボタンは CSS の :default 疑似クラスにマッチします。以下の CSS を適用した文書では、フォーム内の最初に登場する送信ボタンに水色のアウトラインが表示されます。

:default { outline: thick solid #0ff; }

:default 疑似クラスはデフォルトボタン以外にも、チェックボックスまたはラジオボタンで checked 属性を持つものと、option 要素で selected 属性を持つものにもマッチします。ユーザーがチェックを外したり選択肢を変更したりしても、:default 疑似クラスがマッチする要素は変わりません。