HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのautofocus属性とは？使い方と実装例をわかりやすく解説

HTMLのautofocus属性は、ページが読み込まれた時点で、指定した要素に自動的にフォーカス（カーソル）を設定するための属性です。ユーザーがいちいちクリックやタブ移動をしなくても、すぐに入力を始められるため、フォームの利便性向上に役立ちます。

autofocus属性が使える要素

autofocus属性は、以下の4つの要素に対して使用できます。

<button>、<input>、<select>、<textarea>
  • <button>：ボタン要素にフォーカスを設定
  • <input>：テキストボックスなどの入力欄にフォーカスを設定
  • <select>：セレクトボックス（プルダウン）にフォーカスを設定
  • <textarea>：複数行テキスト入力欄にフォーカスを設定

なお、1つのページ内でautofocus属性を指定できるのは基本的に1つの要素だけです。複数の要素に指定した場合、多くのブラウザでは最初に記述された要素が優先されます。

autofocus属性の実装例

それでは、実際にautofocus属性を使ったサンプルコードを見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<form action="" accept-charset="ISO-8859-1">
    <label for="stinfo">Student:</label>
    <input type="text" name ="stinfo"><br>
    <label for="sub">Subject:</label>
    <input type="text" name ="sub" autofocus><br>
    <label for="rank">Rank:</label>
    <input type="number" name ="rank"><br>
    <label for="marks">Marks:</label>
    <input type="number" name ="marks"><br><br>
    <input type="submit">
</form>
</body>
</html>

実行結果

このコードを実行すると、以下のように表示されます。autofocusを指定した「Subject」のテキストボックス（2番目の入力欄）に、ページ読み込み時に自動的にフォーカスが当たっているのが確認できます。

HTMLのautofocus属性とは？使い方と実装例をわかりやすく解説

まとめ

autofocus属性を使えば、ページ表示直後に入力欄へ自動的にカーソルを移動させることができ、検索フォームやログインフォームなど、ユーザーにすぐ入力してほしい場面で特に効果的です。ただし、意図しない場所にフォーカスが移動するとユーザーの操作を妨げることもあるため、適切な場所でのみ使用するようにしましょう。

  1. HTMLのlist属性とは？datalistと組み合わせた入力候補の実装方法

    HTMLのlist属性は、<input>要素に対して、あらかじめ定義された選択肢（候補）を含む<datalist>要素を関連付けるための属性です。この属性を使うことで、ユーザーがテキストを入力する際に候補が自動的に表示され、入力の手間を大幅に減らすことができます。例えば、フォームで「選択科目」を入力してもらう場合、あらかじめ用意した科目名のリストから選べるようにできるため、入力ミスの防止にも役立ちます。list属性の基本構文list属性の基本的な書き方は以下の通りです。<input list=テキスト>list属性には、関連付けたい<datalist&

  2. HTMLのmaxlength属性とは？入力文字数を制限する方法を実例付きで解説

    maxlength属性とは HTMLのmaxlength属性は、フォームのinput要素に入力できる最大文字数を定義する属性です。この属性を指定すると、ユーザーが設定した文字数を超えて入力できなくなるため、入力ミスや不正なデータの送信を防ぎ、データの整合性を保つことができます。 例えば、電話番号や郵便番号など「桁数が決まっている情報」の入力欄に活用すれば、ユーザーにとって分かりやすく、開発者にとっても扱いやすいフォームを作成できます。 基本構文 maxlength属性の基本的な記述方法は以下のとおりです。 <input maxlength="最大文字数"> 属