什么html5表单属性应该用于邮政编码?

时间:2014-05-15 11:21:58

标签: html html5 forms validation

最好使用带有字符数限制的'text'属性,还是可以在输入中使用number属性来获取邮政编码。

试着用html5中的表单来了解所有不同的属性。 干杯

8 个答案:

答案 0 :(得分:39)

你可以试试这个

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

答案 1 :(得分:11)

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

  

注意:类型=数字状态不适用于仅包含数字但严格来说不是数字的输入   数。例如,信用卡号码不合适   或美国邮政编码。确定是否使用的简单方法   type = number是要考虑输入是否有意义   控制有一个旋转框接口(例如“向上”和“向下”   箭头)。

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

答案 2 :(得分:5)

如果您有任何国际用户,您将要通过type =&#34; text&#34;

来允许使用字母数字

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

9 =任何数字

A =任何字母

答案 3 :(得分:2)

允许ZIP + 4:

<input type="text" placeholder="Zip Code" title="Please enter a Zip Code" pattern="^\s*?\d{5}(?:[-\s]\d{4})?\s*?$">

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

答案 4 :(得分:1)

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

键入设置tel以显示数字小键盘,将模式设置为0-9以外的值,并设置最大值以防止超出美国7位数​​邮政编码的值。

答案 5 :(得分:0)

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

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

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

答案 6 :(得分:0)

我的POV有各种各样的选项,但我认为Md Johorul Islam已经给出了最好的选择:pattern属性。

选项:

  • 使用正则表达式(模式attribute);
  • 使用自定义(jQuery)掩码控件,如jQuery mask;
  • 对于不支持此功能的平台,请将type=textmaxlength一起使用。

注意:尽管有以下选项:始终验证服务器端!

答案 7 :(得分:0)

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

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

似乎有朝一日inputmode="numeric"属性适用于zip输入。但目前,only Chrome/Android supports it(Firefox的标志后面是它)。

Zach在他的formcore软件包中开发了一个名为numeric-input的小型库,该库将实现无论使用哪种浏览器的最佳情况。

请记住,该库已有两年的历史了,此后浏览器的行为可能已经改变。