autofocus 属性自動フォーカスを指定

autofocus 属性は、文書が読み込まれた時やダイアログが表示された時に、指定した要素が自動的にフォーカスを持つべきであることを表します。

autofocus 属性は論理属性です。

なお、ある要素の「直近の祖先オートフォーカス範囲のルート要素」は、その要素が dialog 要素の場合はその要素自体、そうでない場合は直近の先祖に当たる dialog 要素、もしくは html 要素になりますが、同じ「直近の祖先オートフォーカス範囲のルート要素」は、autofocus 属性が指定された要素を 2 つ以上持ってはならないと仕様上は定義されています。つまり、autofocus 属性を持つ要素は、dialog 要素内に含めない限り、html 要素内には 1 つだけ、同じ dialog 要素内にも 1 つだけ存在できることになります。

autofocus 属性の仕様

この属性を使用できる要素
  • すべての HTML 要素

autofocus 属性のサンプルソース

<button type="submit" autofocus>
 <img src="/img/submit.png" alt="送信ボタン" />
</button>
<button type="submit" autofocus="autofocus">
 <img src="/img/submit.png" alt="送信ボタン" />
</button>

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ