<input autocomplete>入力内容を自動補完

<input>タグにautocomplete属性を指定すると、オートコンプリート機能を有効・無効にすることができます。

オートコンプリート機能とは、既存の入力値などから、入力候補を自動入力補完する機能の事です。 例えば以前入力した情報はブラウザ側で記憶されています。 そのため、その情報が自動的に入力されるようになります。

指定する場合は、<input autocomplete="on">でオートコンプリート機能がオンとなり、<input autocomplete="off">でオフとなります。 autocomplete属性を指定しない場合は、親のform要素のautocomplete属性の値に応じて、有効・無効かが決まります。

またキーワードなどを入力候補として表示するには<datalist>タグを使用します。 <datalist>でデータリストを定義し、さらにその中に<option>タグを配置し各リストの項目を定義します。 そして<datalist>のid属性とinput要素のlist属性の値を一致させる事で、関連付ける事ができます。

書式

  • <input autocomplete="値" 属性="値"> ……… 入力内容を自動補完する

属性

autocomplete="" オートコンプリート機能をオン・オフにする

使用した時の例

<form action="sample.php" method="post">
  <label>名前:<input type="text" autocomplete="on"></label>
</form>

ブラウザ上の表示例

対応ブラウザなどのデータ

形式 <input type=""> カテゴリ フローコンテンツ, フレージングコンテンツ,フォーム関連要素(リスト化・ラベル付け・送信・リセット可能) / type属性値がhiddenでない場合はインタラクティブコンテンツ, パルパブル・コンテンツ
親要素 フレージングコンテンツが期待できる場所 子要素 なし
開始タグ 必須 終了タグ なし
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Opera