HTMLのautocomplete属性の使い方｜氏名・メール・住所の自動入力

autocompleteで入力欄の目的を伝える

氏名、メールアドレス、住所。入力欄が並ぶだけで、少し面倒に感じることがありますよね。ブラウザーの入力支援が適切に働けば、手作業を減らせる場面があります。その手掛かりになるのがautocompleteです。

MDNによると、この属性は、欄にどんな情報を期待しているかをブラウザーへ知らせるために使えます。利用者に見える説明と、ブラウザーが扱う情報の両方を整える考え方ですね。

name・email・postal-codeを欄に合わせて指定

上から氏名、住所と並べたから、すべての入力支援が正しく判断してくれるとは限りません。欄の目的に合う指定を使い、実際に自動入力した結果を確認します。

自動入力は便利ですが、誤った欄へ入ると、利用者は訂正する仕事まで引き受けます。『入力しやすくしました』と言いながら手直しが増えていたら、困りますよね。

例えば、氏名ならname、メールアドレスならemail、郵便番号ならpostal-codeというトークンがあります。名前が似ているものを適当に選ぶのではなく、実際にその欄へ入れてほしい情報と合わせます。

自動入力後の修正と送信前の確認を試す

自動入力が入ったあと、内容が読み取れること、修正できること、送信前に確かめられることも大切です。ブラウザーや保存済み情報の違いがあるため、一つの環境で一度試して終わりにはしません。

私なら、空欄のフォームがきれいに並んだ画面だけでなく、実際に入力した後の画面を見ます。入力支援を使う人も、使わずに入力する人も、迷わず確認できるフォームにしたいですね。