テック技報最新号へ →
デザイン

フォームの郵便番号や住所の欄に autocomplete 属性を付け、スマホの自動入力で一度に埋まるようにする

autocomplete="postal-code" などを正しく付けると、ブラウザが保存済みの住所をまとめて入れてくれる。入力の手間が減り、離脱を防げる。

@wokobo_net · 投稿 2026-10-16
#HTML#フォーム#autocomplete#スマホ#EFO

どんな問題を解決するか / いつ使うか

スマホで住所を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分の巡回をまとめて実施)
X の元の投稿を開く