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

HTML form要素のautocomplete属性の使い方を解説

form要素のautocomplete属性とは

<form>要素のautocomplete属性を使うと、フォームのオートコンプリート(自動入力補完)機能を有効にするか無効にするかを設定できます。autocompleteを「on」に設定すると、ユーザーが以前に入力した値をもとに、Webブラウザが自動的にフォームへ値を入力してくれます。

なお、この自動入力が行われるのは、ユーザーが過去に同じフォームで値を入力したことがある場合のみです。

構文

<form autocomplete="on|off">

上記の構文では、on | off のいずれかの値を指定します。「on」を設定すると、ブラウザは以前に入力された値に基づいてフォームへの入力を補完します。一方、「off」を設定した場合は、入力内容の自動補完は行われません。

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

コード例

<!DOCTYPE html>
<html>
<body>
<h2>Points</h2>
<form action="" method="get" autocomplete="on">
   Player: <input type="text" name="player"><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>

上記のコードを実行すると、次のような出力結果になります。ここでは、すでにフォームにいくつかの値を入力済みであると仮定します。

HTML form要素のautocomplete属性の使い方を解説

autocompleteを「on」に設定しているため、以前入力した値が候補として表示されます。

HTML form要素のautocomplete属性の使い方を解説

テキストフィールド内にカーソルを置くと、これまでに入力したことのある値の一覧が確認できます。これはautocomplete属性を「on」に設定しているためです。

  1. HTMLフォームのmethod属性とは？getとpostの違いと使い方をわかりやすく解説

    HTMLのmethod属性は、フォームから送信するデータを「どのような方法で」サーバーへ渡すかを指定するための重要な属性です。具体的には、データをURLの一部として送るか（GET）、HTTP POSTトランザクションとして送るか（POST）を選択できます。 method属性の基本構文 method属性の書き方は以下の通りです。 <form method="get | post"></form> get を指定すると、フォームのデータはURL変数（クエリ文字列）として送信されます。一方、post を指定すると、データはHTTPリクエストのボディに含まれ

  2. HTMLフォームのaction属性とは?使い方とサンプルコードをわかりやすく解説

    HTMLのaction属性は、フォームが送信されたときに、入力データをどのURLへ送るかを指定するための属性です。フォームを作成するうえで最も重要な属性の一つであり、データの送信先となるサーバーサイドのスクリプト(例：PHPファイルなど)を指定します。action属性の基本構文action属性の基本的な書き方は以下のとおりです。<form action=URL></form>action属性の値には、絶対URLまたは相対URLを指定できます。ここで指定したURLに対して、フォームに入力されたデータが送信されます。HTMLフォームaction属性の使用例それでは、実際にa