【HTML】autocomplete属性を使って入力内容の予測を可能にする方法

このページについて

このページではHTMLで使う事ができるautocomplete属性の機能と使い方を解説しています。

autocompleteはフォーム・入力エリアにユーザーが入力を始めると、ブラウザがその内容を予測するオートコンプリートを有効にするかどうかを選ぶ事ができます。この属性が使えるのはformタグとinputタグの一部となります。

autocompleteはonとoffで有効と無効を指定する事ができます。

formタグに使う場合、特に考えることはないと思います。そのformの中にある入力エリア全てがオートコンプリートの対象になります。

<form autocomplete="on">
<label>名前</label>
<input type="text" name="name">
<label>メールアドレス</label>
<input type="email" name="email">
</form>

このように1つのフォームに対してオートコンプリートを有効にすると、その中にある入力エリア全てでオートコンプリートが有効になります。実際にオートコンプリートを有効にしたフォームが以下になります。

何かしらを入力してみるとブラウザが内容を予測して表示してくれるのではないでしょうか。Safariだとメールアドレスの入力を開始するとiCloudのメールを非公開の機能が出たりしますね。

inputタグで使う場合は、type属性がtext/search/URL/tel/email/paswrod/date/range/colorの場合に使えます。

オートコンプリートを無効化する場合はautocomplete属性をoffで明記すればOKです。特定の場所のみ無効にしたい場合でも、その場所だけoffにすれば無効となります。

<form autocomplete="on">
<label>パスワード</label>
<input type="password" autocomplete="off">
<label>色</label>
<input type="color">
</form>

このように書いた場合は、パスワードのところのオートコンプリートをオフにしていますがカラーピッカーのところは有効となっています。

autocomplete属性はformタグとinputタグで使う事ができます。inputタグで使う場合はtype属性により使えたり使えなかったりしますが、formタグは基本的に使えます。

有効にすればブラウザが入力内容を予測しますが、場所ごとにオンオフを切り替えることもできます。