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

HTMLのinput要素におけるautofocus（オートフォーカス）属性の使い方

HTMLの<input>要素に用意されているautofocus属性は、Webページが読み込まれたときに、どの入力フィールドへ自動的にフォーカス（カーソル）を当てるかを指定するための属性です。この属性はHTML5で新たに導入されました。

autofocus属性の基本構文

autofocus属性はブール型の属性のため、記述するだけで有効になります。基本的な構文は以下のとおりです。

<input autofocus>

autofocus属性の実装例

ここでは、<input>要素のautofocus属性を使った具体的な例を見ていきましょう。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>Log in to your account</h2>
<form action="" method="get">
    Id: <input type="text" name="id"><br>
    Password: <input type="password" name="pwd"><br>
    DOB: <input type="date" name="dob" autofocus><br>
    <button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

表示結果

HTMLのinput要素におけるautofocus（オートフォーカス）属性の使い方

コードの解説

上記の例では、アカウントへのログインフォームを作成しています。フォーム部分のコードは以下のとおりです。

<form action="" method="get">
    Id: <input type="text" name="id"><br>
    Password: <input type="password" name="pwd"><br>
    DOB: <input type="date" name="dob" autofocus><br>
    <button type="submit" value="Submit">Submit</button>
</form>

このフォームには「Id」「Password」「DOB（生年月日）」の3つの入力欄がありますが、そのうち3番目のDOB入力欄に対してのみautofocus属性を設定しています。

DOB: <input type="date" name="dob" autofocus><br>

そのため、ページが読み込まれた瞬間にカーソルがDOB入力欄に自動的に表示され、すぐに入力を始められる状態になります。


ポイント：autofocus属性は1つのページ内で複数の要素に指定しても動作するのは最初の1つだけなので、ユーザーに最初に入力してほしい項目に絞って設定するのがおすすめです。

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

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

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

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