邮政编码应该使用啥 html5 表单属性？

Posted 2023-03-05

【中文标题】邮政编码应该使用啥 html5 表单属性？

【英文标题】：What html5 form attribute should be used for a zipcode?邮政编码应该使用什么 html5 表单属性？

【发布时间】：2014-07-03 19:32:56

【问题描述】：

最好使用限制字符数的“文本”属性，还是可以在输入的邮政编码中使用数字属性。

只是想用 html5 中的表单来了解所有不同的属性。 干杯

【问题讨论】：

您是指美国意义上的严格邮政编码还是更一般的邮政编码？

【参考方案1】：

你可以试试这个

<Label>ZIP Code</Label><input type="text" pattern="[0-9]5" title="Five digit zip code" />

【讨论】：

我只是举了个例子。您可以简单地使用 ZIP Code

根据国家/地区的不同，使用不同的邮政编码方案！例如，德国使用 5 位数字代码，而奥地利使用 4 位数字代码，英国甚至使用字母数字字符的混合。不要试图以这种方式限制用户输入，除非您 100% 确定您只排除了一个国家/地区的邮政编码（例如，假设您仅将产品运送到一个国家/地区，或者您的服务被法律限制在一个国家/地区原因）。

美国使用 5，但也可以包含 +4，使其为 10 个字符（即 12345-1234）

@Calsal 如果您住在美国马萨诸塞州的阿加瓦姆，则无法输入邮政编码 01001。

手机足够智能，可以仅通过图案显示正确的键盘，您实际上不需要type="number" 来调用数字键盘。所以只有在你讨厌马萨诸塞州的人时才这样做。

【参考方案2】：

“应该”是一个强词，但实际上有一个关于此类问题的“应该”类声明。 HTML5 CR 说 input type=number:

注意： type=number 状态不适用于碰巧只包含数字但严格来说不是数字的输入 数字。例如，它不适用于信用卡号码 或美国邮政编码。判断是否使用的简单方法 type=number 是考虑输入是否有意义 控件具有旋转框界面（例如，带有“向上”和“向下” 箭头）。

这意味着在使用内置构造时，唯一可行的元素是input type=text。您可以使用maxlength 属性来设置最大字符数（适用于所有浏览器），另外还可以使用pattern 属性来指定允许的字符和组合；它的值自然取决于要使用的邮政编码类型。对于国际邮政地址，您可能不应该使用任何pattern 甚至maxlength，因为格式各不相同。

【参考方案3】：

要允许 ZIP+4：

<input type="text" placeholder="Zip Code" title="Please enter a Zip Code" pattern="^\s*?\d5(?:[-\s]\d4)?\s*?$">

为了对用户友好，这也允许在字符串之前/之后有空格，开发人员需要修剪服务器端。

【参考方案4】：

如果您有任何国际用户，您将希望通过 type="text" 允许字母数字

示例：英国邮政编码格式为 AA9A 9AA

9 = 任意数

A = 任意字母

【参考方案5】：

我的 POV 有多种选择，但我认为 Md Johorul Islam 已经给出了最好的选择：pattern 属性。

选项：

使用正则表达式（模式attribute）； 使用自定义 (jQuery) 掩码控件，例如 jQuery mask； 对于不支持此功能的平台，请使用 type=text 和 maxlength。

注意：尽管有这些选项：始终验证服务器端！

【参考方案6】：

“最佳”是主观的/上下文的。但从可用性的角度来看，Zach Leatherman studied number-ish inputs in 2016 专门解决了 ZIP 输入问题。

目标是让“大数字键盘”出现在移动设备上。这可能看起来微不足道，但简化电子商务结帐表单中的表单输入是一个重要目标。

似乎有朝一日inputmode="numeric" 属性将适用于 zip 输入。但是现在，only Chrome/android supports it（Firefox 有它的标志）。

Zach 开发了一个名为 numeric-input 的小型库，作为他的 formcore 包的一部分，它将为正在使用的任何浏览器实现最佳情况。

请记住，该库已经有几年历史了，从那时起浏览器的行为可能已经发生了变化。

【参考方案7】：

您可以使用其中任何一个，并且该表单将起作用。但是，使用数字可能是一个更好的主意，因为例如，移动设备会调用不同的键盘布局 - 使用数字和辅助字符而不是完整的字母键盘。

但是，如果您认为设置一种类型而不是另一种类型会提供更高级别的安全性，那您就错了。无论您输入哪种类型，它都会为您提供no安全性。每个表单输入也需要在服务器上进行检查——这就是真正的安全检查发生的地方。您在浏览器中进行的检查更多的是 UI/UX。

这是一篇关于不同输入类型的好文章：http://html5doctor.com/html5-forms-input-types/

【讨论】：

加拿大邮政编码是数字和字母的组合，仅供参考

不知道。

@Shomz Andrew M 指出英国邮政编码是一样的。

【参考方案8】：

<input type="tel" pattern="[0-9]*" placeholder="Zip Code" max="99999" />

键入 set tel 以显示数字小键盘，模式以排除值 0-9 并设置最大值以防止超过美国 7 位邮政编码的值。