地址表单

填写地址可能既耗时又令人沮丧。地址栏 2 的用途是什么？您可能没有姓氏，那么应该在姓氏字段中输入什么？避免这些混淆情况，并帮助用户填写地址表单。

构建便于填写的表单

许多表单都使用一个字段来填写名字，另一个字段来填写姓氏。 不过，有些人没有姓氏，或者他们的姓名不是由两部分组成，那么他们应该如何填写“姓氏”字段？为名称字段使用单个 <input>。详细了解如何处理不同的名称格式。

根据研究，地址第 2 行可能会让用户感到困惑。考虑为整个地址使用 <textarea>，或将地址第 2 行字段隐藏在显示 <button> 后面。

请谨慎处理表单控件说明。 例如，美国境内的用户说的是“邮政编码”，英国境内的用户说的是“邮编”。使用 <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"。

资源