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

【HTML入門】JavaScript不要でページ読み込み時にテキストボックスへ自動フォーカスを設定する方法

HTMLでは、autofocus属性を使うことで、JavaScriptに頼ることなく、ページが読み込まれた瞬間にテキストボックス（<input>要素）へ自動的にフォーカスを設定できます。

autofocus属性とは

autofocus属性はブール型（真偽値）の属性です。要素にこの属性を記述しておくと、そのページが表示されたときに、該当する<input>要素が自動的にフォーカスを受け取ります。ユーザーがマウスやタップ操作で入力欄を選択しなくても、すぐに文字を入力できるようになるため、フォームの利便性が向上します。

実装例

以下のコードでは、「First Name（名前）」の入力欄にautofocus属性を指定しています。ページを開くと、カーソルが自動的にこの入力欄に置かれます。

<!DOCTYPE html>
<html>
<body>
  <form action="/new.php">
    First Name: <input type="text" name="fname" autofocus><br>
    Last Name: <input type="text" name="lname"><br>
    <input type="submit">
  </form>
</body>
</html>

使用時のポイント

  • autofocus属性は、1つのページ内で1つの要素のみに指定することが推奨されています。複数の要素に指定した場合、動作は保証されません。
  • Chrome、Firefox、Safari、Edgeなど、主要なモダンブラウザで広くサポートされている属性です。
  • 検索ボックスやログインフォームなど、ページ表示後すぐに入力させたいフィールドの先頭に配置すると効果的です。
  • 属性名だけで値を省略して記述できるため、シンプルで可読性の高いマークアップになります。
  1. HTML DOM Input Date の autofocus プロパティの使い方を解説

    HTML DOM の Input Date autofocus プロパティは、ページが最初に読み込まれる際に、日付入力フィールド（<input type="date">）へ自動的にフォーカスを当てるかどうかを設定・取得するためのプロパティです。構文autofocus プロパティの基本的な構文は以下の通りです。値を取得する場合（true / false の真偽値を返す）inputDateObject.autofocus値を設定する場合inputDateObject.autofocus = booleanValue設定できるブール値「booleanValue」には、

  2. HTML DOM 入力テキストの autofocus プロパティとは？使い方をサンプルコード付きで解説

    HTML DOM の input Text autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性と関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際に入力テキストフィールドへ自動的にフォーカスを当てるかどうかを、設定または取得することができます。例えば、ログインフォームや検索ボックスなど、ユーザーにすぐに入力してほしい場面で活用すると、マウス操作なしでキーボード入力を開始できるため、ユーザビリティの向上につながります。構文autofocus プロパティを設定する場合の構文は以下の通りです。textObje