地址表单

填写地址可能既耗时又令人沮丧。 什么是地址第 2 行? 您可能没有姓氏,那么应该在姓氏字段中输入什么? 避免这些混淆,帮助用户填写地址表单。

确保您的地址表单易于使用

许多表单都为名字和姓氏分别使用一个字段。 但是,有些人没有姓氏,或者他们的名字没有两部分,那么他们应该如何填写姓氏字段呢?为名称字段使用单个 <input>。 详细了解如何处理不同的名称格式

此外,为街道地址使用单个 <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"

资源