フォームの郵便番号や住所の欄に autocomplete 属性を付け、スマホの自動入力で一度に埋まるようにする
autocomplete="postal-code" などを正しく付けると、ブラウザが保存済みの住所をまとめて入れてくれる。入力の手間が減り、離脱を防げる。
どんな問題を解決するか / いつ使うか
スマホで住所を1文字ずつ入力させるフォームは離脱が多い。問い合わせ・会員登録・購入フォームで。
やり方
html
<label>郵便番号
<input name="zip" autocomplete="postal-code" inputmode="numeric">
</label>
<label>都道府県
<input name="pref" autocomplete="address-level1">
</label>
<label>市区町村
<input name="city" autocomplete="address-level2">
</label>
<label>番地・建物名
<input name="street" autocomplete="street-address">
</label>
<label>電話番号
<input name="tel" type="tel" autocomplete="tel">
</label>
<label>メールアドレス
<input name="email" type="email" autocomplete="email">
</label>- 名前は
name(またはfamily-name/given-name)、ふりがなは標準の値がないので付けない。 - 数字だけの欄には
inputmode="numeric"を付けると数字キーボードが出る。
注意点
- 住所を1つの欄にまとめるなら
street-address、分けるならaddress-line1/address-line2などを使う。 - AIが作るフォームは autocomplete を省きがちなので、ルールファイルに「フォームの入力欄には適切な autocomplete を付ける」と書いておく。
- コード例は一般的な書き方で補ったもの(元の投稿はテキストのみ)。
出典
- 投稿者: @wokobo_net
- 投稿: @wokobo_net · 2026-10-15
- 収集日: 2026-10-16(JST、10/15・10/16分の巡回をまとめて実施)