住所の入力は時間がかかり、ストレスを感じることもあります。住所 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"
を使用します。