住所フォーム

住所の入力は時間がかかり、ストレスを感じることもあります。住所 2 行目は何に使用しますか?姓がない場合は、[] フィールドに何を入力すればよいですか?このような混乱を避け、ユーザーが住所フォームに記入できるようにします。

ユーザー フレンドリーなフォームを作成する

多くのフォームでは、名と姓にそれぞれ 1 つのフィールドを使用しています。ただし、姓がない人や、名前が 2 つの部分に分かれていない人もいます。そのような場合は、姓のフィールドにどのように入力すればよいですか?name フィールドには 1 つの <input> を使用します。詳しくは、さまざまな名前形式の処理をご覧ください。

調査によると、住所 2 行目はユーザーにとってわかりにくい可能性があります。アドレス全体に <textarea> を使用するか、住所 2 行目フィールドを <button> の背後に隠すことを検討してください。

フォーム コントロールの説明には注意してください。たとえば、米国では「ZIP」、英国では「postcode」と発音します。<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" を使用します。

リソース