Aug. 16th, 2020
＃
“autofocus”属性について
“autofocus”属性は自動的にフォーカスする要素を指定する属性です。
“autofocus”属性を指定された要素はウェブページが読み込まれた時、もしくは要素が含まれるダイアログボックスが開かれたときに自動的にフォーカスされます。要素が入力欄である場合は、最初からフォーカスされているのでユーザーはクリックなどの操作をせずに入力を始めることができます。
“autofocus”属性はフォーム関連要素だけでなくフォーカス可能なすべての要素に効果を持ちます。
同じウェブページ、もしくは同じダイアログボックスの中の複数の要素に“autofocus”属性を指定することはできません。
“autofocus”属性を指定するとウェブページが読み込まれたときにウェブページの最上部ではなく“autofocus”属性を指定した要素が最初に表示されるのでアクセシビリティの点から本当に使用するべきか注意する必要があります。
＃
＃
サンプルコード
<fieldset>
<legend>あなたの猫の情報</legend>
<p><label>名前：<input type="text" name="name" required autofocus></label></p>
<p>
<label>色：
<select name="color" required>
<option value="白">白</option>>
<option value="黒">黒</option>
<option value="白黒">白黒</option>
<option value="キジトラ">キジトラ</option>
<option value="茶トラ">茶トラ</option>
<option value="三毛">三毛</option>
<option value="その他">その他</option>
</select>
</label>
</p>
</fieldset>
<p><input type="submit" value="送信する"></p>
