ユーザーがパソコンやモバイルで住所データをできるだけ簡単に入力できるフォームを作成します。フォームが、自動入力、検証、データ入力の制約に関する組み込みのブラウザ機能を最大限に活用できるようにします。
導入方法
以下に、効果的な住所フォームを作成するための最も重要なガイドラインを示します。
意味のある有効な HTML を使用する
フォーム作成用に構築された要素と属性を最大限に活用します。
<form>、<input>、<label>、<button>type、autocomplete、inputmode
これらにより、組み込みのブラウザ機能が有効になり、ユーザー補助が向上し、マークアップに意味が追加されます。
<label> 要素を使用して、データ入力用のフォーム フィールドにラベルを付ける
<input>、<select>、<textarea> にラベルを付けるには、<label> を使用します。ラベルの for 属性に、入力の id と同じ値を指定して、ラベルを入力に関連付けます。
HTML 属性を最大限に活用する
適切な <input> 要素の <type> 属性を使用して、モバイルで適切なキーボードを提供し、ブラウザによる基本的な組み込み検証を有効にすることで、ユーザーがデータを入力しやすくします。
メールアドレスには常に type="email" を、電話番号には常に type="tel" を使用してください。
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
すべての <input>、<select>、<textarea> 要素は、ユーザー補助を改善し、ユーザーがデータを再入力しなくて済むように、適切な autocomplete 属性を持つべきです。
ボタンを役立つものにする
ボタンには <button> を使用します。<input type="submit"> を使用することもできますが、div やその他のランダムな要素をボタンとして使用しないでください。ボタン要素は、ユーザー補助機能、組み込みのフォーム送信機能を提供し、簡単にスタイルを設定できます。
各フォームの送信ボタンに、そのボタンの動作を示す値を指定します。購入手続きの各ステップで、進捗状況を示し、次のステップを明確にする、わかりやすい行動を促すフレーズを使用します。たとえば、お届け先住所フォームの送信ボタンには、[続行] や [保存] ではなく、[お支払いに進む] というラベルを付けます。
可能な限り、1 つの名前入力を使用する
名前、姓、敬称、その他の名前の部分を個別に保存する正当な理由がない限り、ユーザーが 1 つの入力で名前を入力できるようにします。名前の入力欄を 1 つにすることで、フォームがシンプルになり、切り取りと貼り付けが可能になり、自動入力が簡単になります。
国際的な名前を許可します。検証では、ラテン文字のみに一致する正規表現を使用しないでください。[Latin-only] を選択すると、ラテン文字以外の文字を含む名前や住所のユーザーが除外されます。代わりに Unicode 文字の一致を許可し、バックエンドが入力と出力の両方で Unicode を安全にサポートするようにします。正規表現の Unicode は、最新のブラウザで十分にサポートされています。
さまざまな住所形式に対応する
住所フォームを作成する際は、1 つの国の中でもさまざまな住所形式があることに注意してください。「通常の」アドレスについて、憶測をしないでください。
可能であれば、番地には 1 つの <textarea> 要素を使用します。
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
これは、さまざまな国内および海外の住所形式に対応できる最も柔軟なオプションです。
データモデルで住所行を分ける必要がある場合は、自動入力が機能するように、address-line1、address-line2（必要に応じて address-line3）の autocomplete トークンを使用して、1 行に 1 つの <input> を使用します。これらのトークンがない入力欄に番地を分割しないでください。また、最初の行のみを必須にしてください。
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
ユーザーがデータ フィールドを誤って見落とさないようにする
必須フィールドに required 属性を追加します。
<input type="text" id="city" name="city" autocomplete="address-level2" required>
代替戦略
自動入力はプログレッシブ エンハンスメントです。自動入力に対応していないブラウザでは、ユーザーは住所の詳細を手動で入力する必要があります。セマンティック HTML の制約（type、inputmode、required など）は、標準のフォーム検証として引き続き適切に機能します。