目次
autocomplete属性とは
autocomplete属性とは、設定することで自動入力が可能になる属性。
例えば、アクセスしたときにスマホに登録した名前や住所を自動で入力したりすることができる。
この記事ではautocomplete属性を使って自動入力に対応したプロフィール入力フォームの作りかたをまとめる。
電話番号の入力
電話番号はautocomplete="tel"を指定することで使える。
<input type="tel" name="tel" autocomplete="tel">氏名
名字と名前を分けて入力
名字
名字にはautocomplete="family-name"と指定する。
<input type="text" name="family-name" autocomplete="family-name">名前
名前にはautocomplete="given-name"と指定する。
<input type="text" name="given-name" autocomplete="given-name">名字と名前をまとめて入力
まとめて入力する場合はautocomplete="name"と指定する。
<input type="text" name="name" autocomplete="name">住所
郵便番号
郵便番号はautocomplete="postal-code">を指定する。
<input type="number" name="postal-code" autocomplete="postal-code">都道府県
都道府県はautocomplete="address-level1"と指定する。
<input type="text" name="address-level1" autocomplete="address-level1">市区町村
市区町村はautocomplete="address-level2"と指定する。
<input type="text" name="address-level2" autocomplete="address-level2">以降の住所
市区町村の後の入力欄は、番地までの行と建物名・部屋番号の行の2行に分かれていることが多い。
このそれぞれの行がautocomplete="address-line1とautocomplete="address-line2"に対応する。
<label>町域・番地
<input type="text" name="address-line1" autocomplete="address-line1">
</label>
<label>建物名・部屋番号
<input type="text" name="address-line2" autocomplete="address-line2">
</label>全体をまとめたコード
コード
<label>氏名
<input type="text" name="name" autocomplete="name">
</label>
<label>名字
<input type="text" name="family-name" autocomplete="family-name">
</label>
<label>名前
<input type="text" name="given-name" autocomplete="given-name">
</label>
<label>電話番号
<input type="tel" name="tel" autocomplete="tel" inputmode="numeric">
</label>
<label>郵便番号
<input type="number" name="postal-code" autocomplete="postal-code" inputmode="numeric">
</label>
<label>都道府県
<input type="text" name="address-level1" autocomplete="address-level1">
</label>
<label>市区町村
<input type="text" name="address-level2" autocomplete="address-level2">
</label>
<label>町域・番地
<input type="text" name="address-line1" autocomplete="address-line1">
</label>
<label>建物名・部屋番号
<input type="text" name="address-line2" autocomplete="address-line2">
</label>プレビュー
まとめ
スマホからアクセスするユーザーは多いので、ユーザーが使いやすいように適切なautocomplete属性を設定しよう。