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

HTMLのinput要素におけるautocomplete属性の使い方を解説

autocomplete属性とは

<input>要素のautocomplete属性は、入力フィールドのオートコンプリート（自動補完）機能を有効または無効に設定するための属性です。autocompleteが「on」に設定されている場合、ユーザーが以前に入力した値をもとに、Webブラウザが自動的に値を補完してくれます。なお、この自動補完が機能するのは、ユーザーがすでに同じ項目に値を入力したことがある場合のみです。

構文

<input autocomplete="on|off">

上記のように、autocomplete属性には「on」または「off」のいずれかの値を指定します。「on」を設定すると、ブラウザは過去に入力された値に基づいてエントリを自動補完します。一方、「off」を設定すると、エントリの自動補完は行われません。

実装例

それでは、<input>要素のautocomplete属性を実装した具体的な例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>Points</h2>
<form action = "" method = "get">
   Player − <input type = "text" name = "player" autocomplete = "on"><br>
   Rank − <input type = "number" name = "rank"><br>
   Points − <input type = "number" name = "pts"><br>
   <button type = "submit" value = "Submit">Submit</button>
</form>
</body>
</html>

このコードを実行すると、以下のような出力が得られます。ここでは、あらかじめいくつかの値を入力済みで、autocompleteが有効になっている状態を想定しています。

HTMLのinput要素におけるautocomplete属性の使い方を解説

コードの解説

上記の例では、次のようなフォームを作成しています。

<form action = "" method = "get">
   Player − <input type = "text" name = "player" autocomplete = "on"><br>
   Rank − <input type = "number" name = "rank"><br>
   Points − <input type = "number" name = "pts"><br>
   <button type = "submit" value = "Submit">Submit</button>
</form>

このうち、Playerの入力フィールドに対してのみ、autocompleteを「on」に設定しています。

Player − <input type = "text" name = "player" autocomplete = "on">

そのため、Playerの入力欄にカーソルを置くと、以前に入力した値が候補として表示され、選択できるようになります。RankやPointsなど、autocompleteを設定していない他の入力フィールドでは、このような自動補完の候補は表示されません。

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

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

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

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