HTMLの
autofocus属性とは
HTMLの<select>要素に用意されているautofocus属性は、ページが読み込まれたタイミングで、自動的にドロップダウンリスト（プルダウンメニュー）へフォーカスを設定するための属性です。ユーザーがマウスやタブキーで操作しなくても、ページ表示と同時に該当のセレクトボックスを選択状態にできるため、入力フォームの利便性向上に役立ちます。
書式は非常にシンプルで、以下のように記述します。
<select autofocus>
それでは、<select>要素のautofocus属性を実装した具体的な例を見ていきましょう。
サンプルコード
<!DOCTYPE html> <html> <body> <h1>Profile</h1> <h2>Educational Qualification</h2> <section> <h3>Graduation</h3> <select autofocus> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </select> </section> <section> <h3>Postgraduation</h3> <select> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </select> </section> <section> <p>Worked at ABC Corporation from July 2015 - May 2019 as a Technical Manager.</p> </section> </body> </html>
実行結果
このコードを実行すると、学歴情報を示す複数のセクションを持つプロフィールページが表示され、「Graduation（学士課程）」側のドロップダウンリストに自動的にフォーカスが当たります。
上記の例では、異なるセクション内に2つのドロップダウンリストを配置しています。
<section> <h3>Graduation</h3> <select autofocus> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </select> </section> <section> <h3>Postgraduation</h3> <select> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </select> </section>
ポイントは、1つ目の「Graduation」セクションにある<select>要素だけにautofocus属性を指定している点です。これにより、ページ読み込み時に以下のドロップダウンリストへフォーカスが自動設定されます。
<select autofocus> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </select>
autofocus属性を使う際の注意点
autofocus属性は論理属性（ブール型属性）のため、値を指定せず属性名だけで有効になります。ただし、1つのHTML文書内でautofocus属性を指定できる要素は1つだけという点に注意してください。複数の要素に指定した場合、動作はブラウザによって異なり、意図しない挙動につながる可能性があります。また、モバイルデバイスでは画面キーボードが強制的に開くなどの副作用がある場合もあるため、使用場面は慎重に検討することをおすすめします。
-
HTMLのsize属性とは？使い方とサンプルコードをわかりやすく解説
HTMLのsize属性は、select要素やinput要素において、画面に表示される選択肢の数（または入力欄の文字数）を指定するための属性です。この属性を使うことで、ドロップダウンリストを複数行表示のリストボックスに変更したり、テキスト入力欄の横幅を調整したりすることができます。 size属性の構文 size属性の基本的な記述方法は以下のとおりです。 <tagname size="数値"></tagname> size属性には、表示したい選択肢の数や文字数を整数で指定します。 HTML size属性の使用例 それでは、実際にsize属性を使用した具体
-
HTMLのoption要素におけるvalue属性とは？基本構文とサンプルコードで解説
HTMLのvalue属性は、<option>要素に対してサーバーへ送信する値を指定するための属性です。フォーム送信時に、ユーザーが選択した選択肢の値がこの属性の内容として送られます。値そのものは画面上には表示されず、表示されるテキスト（ラベル）とは別に内部的なデータを持たせられるのが特徴です。基本構文value属性の基本的な書き方は以下のとおりです。<option value=テキスト></option>value属性には任意の文字列を指定できます。省略した場合は、<option>要素内のテキストがそのまま送信されます。使用例ここでは、好きな科目