autocomplete属性

解説

autocomplete属性は、フォームの入力欄に付けて、その欄に何を入力するのかをブラウザに示すHTMLの属性です。input、textarea、select、formの各要素に指定できます。適切な値を指定すると、ブラウザは保存しているメールアドレスや住所などから入力候補を表示します。

仕組み

autocomplete属性には、on・off のほか、欄の用途を表す値を指定します。たとえば、メールアドレスの欄には email、電話番号の欄には tel、郵便番号の欄には postal-code を使います。

<input type="email" name="email" autocomplete="email">
<input type="tel" name="tel" autocomplete="tel">
<input type="text" name="zip" autocomplete="postal-code">

ブラウザは、指定された値を手がかりに、保存済みの情報から該当する項目を選び、候補として表示します。

実務での使われ方

autocomplete属性の指定は、スマートフォンでのフォームの完了率を左右します。スマートフォンでの入力は手間がかかるため、候補が表示されるかどうかで、最後まで入力する人の割合が変わるためです。したがって、autocomplete属性は、属性を正しく付けるだけで済む、少ない手間で取り組めるEFO施策の一つです。

さらに、有効な値を指定すると、WCAG 2.2の達成基準1.3.5「入力目的の特定」（レベルAA）を満たせます。W3Cは、記憶や言語に障害のある人や、運動機能に障害のある人が、自動入力によって入力の負担を減らせると説明しています。

注意点

autocomplete="off" を安易に付けると、顧客は毎回手入力を強いられます。そのため、セキュリティ上の必要がない限り、off は指定しません。ただし、MDNによると、多くの最新ブラウザでは、off を指定しても、パスワードマネージャーによるログイン欄の自動入力は止まりません。また、仕様にない値を指定すると自動入力が働かず、WCAGの基準も満たせません。