住所フォーム

住所の入力には時間がかかり、面倒な作業になることがあります。 住所 2 とは何ですか? 姓がない場合でも、[] にはどのような名前を入力すればよいですか。 こうした混乱を避け、ユーザーが住所フォームに入力しやすくします。

住所フォームが使いやすいことを確認する

多くのフォームでは、姓と名に 1 つのフィールドを使用しています。 姓がない人や 2 つの要素がない人もいますname フィールドには単一の <input> を使用します。詳しくは、さまざまな名前形式の処理をご覧ください。

また、すべての住所に番地があるわけではありません。住所には 1 つの <input> を使用します。

フォーム コントロールの説明には注意してください。 たとえば、米国のユーザーは「ZIP」と言い、英国では「郵便番号」と記載します。 <label for="zip">ZIP or postal code (optional)</label> を使用して、ユーザーが入力するデータを確認します。郵便番号のフィールドは省略できます。すべての住所に郵便番号があるわけではありません。

ユーザーが住所を入力できるようにする

autocomplete 属性を使用すると、ユーザーが住所を再入力しやすくなります。

  • autocomplete="name"
  • autocomplete="street-address"
  • autocomplete="postal-code"
  • autocomplete="country"

autocomplete に複数の値をスペースで区切って定義できます。配送先住所の入力フォームと請求先住所の入力フォームがあるとします。 請求先住所の郵便番号をブラウザに伝えるには、autocomplete="billing postal-code" を使用します。配送先住所には、最初の値として shipping を使用します。

enterkeyhint 属性を使用して、画面キーボードの Enter キーのラベルを変更します。最後のフォーム コントロールには enterkeyhint="done" を使用し、その他のフォーム コントロールには enterkeyhint="next" を使用します。

リソース