HTML

この記事では、過去の入力内容やブラウザの候補を再利用するautocomplete属性と、選択候補を示すlist属性の基本を説明します。

<input autocomplete>

　input要素の autocomplete属性を指定すると、ユーザーに対して入力候補を提示して、内容を自動補完することができます。例えば、検索キーワード候補の提示のようなインターフェースを実現できます。

　入力候補として表示されるデータのリストを指定するには、HTML5から追加される予定の datalist要素を使用します。datalist要素は、フォームの入力欄などで入力候補となるデータリストを定義します。各データのリスト項目は、option要素で定義します。datalist要素をサポートしたブラウザでは、option要素で指定された値がユーザーに対して入力候補として提案表示されます。

　input要素の list属性の値と datalist要素の id属性の値を同じにして、入力欄とデータリストを関連付けます。

属性

autocomplete

自動補完（オートコンプリート）を指定する

使用例

<form action="xxx.php" method="post">
<fieldset>
 	<label for="your-area">エリア:</label>
 	<input type="text" id="your-area" name="yourarea" autocomplete="on" list="tokyo">
 	<datalist id="tokyo">
  		<option value="渋谷">
  		<option value="新宿">
  		<option value="池袋">
 	</datalist><br>
 	<input type="submit" value="送信">
</fieldset>
</form>