什么html5表单属性应该用于zipcode?

Is it best to use a 'text' attribute with a limit on the number of characters, or can I use a number attribute in an input for a zipcode.

是否最好使用带有限制字符数量的'text'属性，或者我可以在一个zipcode的输入中使用数字属性。

Just trying to get my head around all the different attributes with the forms in html5. Cheers

我只是想了解一下html5中表单的所有不同属性。干杯

6 个解决方案

#1

You can try this

你可以试试这个

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

#2

“Should” is a strong word, but there is actually a “should” class statement about issues like this. HTML5 CR says about input type=number:

“应该”是一个很强烈的词，但是关于这类问题实际上有一个“应该”类声明。HTML5 CR关于输入类型=number:

Note: The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=number is to consider whether it would make sense for the input control to have a spinbox interface (e.g. with "up" and "down" arrows).

注意:type=number状态不适用于只包含数字但严格来说不是数字的输入。例如，信用卡号码或美国邮政编码就不合适。确定是否使用type=number的一种简单方法是考虑输入控件具有spinbox接口(例如带有“向上”和“向下”箭头)是否有意义。

The means that the only feasible element for the purpose is input type=text, when using built-in constructs. You can use the maxlength attribute to set the maximum number of characters (works on all browsers) and additionally a pattern attribute what specifies the allowed characters and combinations, too; its value naturally depends on the zipcode type(s) to be used. For international postal addresses, you probably should not use any pattern or even maxlength, since the formats vary.

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

#3

If you have any international users you are going to want to allow alpha numeric via type="text"

如果你有任何国际用户你希望允许字母数字通过类型="text"

Example: UK postal codes are formatted as AA9A 9AA

例子:英国邮政编码的格式是aa9a9aa

9 = any number

9 =任意数量

A = any letter

=任何信

#4

You can use either and the form will work. However, it might be a better idea to use number because, for example, mobile devices would invoke a different keyboard layout - with numbers and helper characters instead of the full alphanum keyboard.

您可以使用其中任何一种，这样表单就可以工作了。不过，使用数字或许是个更好的主意，因为例如，移动设备将调用不同的键盘布局——使用数字和辅助字符，而不是完整的字母键盘。

But, if you think setting one type as opposed to another will offer a higher level of security, you're wrong. No matter which type you put, it will offer you no security. Every form input needs to be checked on the server as well - that's where the real security check happens. The check that you do in browser, is more of a UI/UX thing.

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

Here is a nice article about different input types: http://html5doctor.com/html5-forms-input-types/

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

#5

There are various options from my POV, but I think the best is already given by Md Johorul Islam: the pattern attribute.

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

The options:

的选择:

Use a regular expression (the pattern attribute);
使用正则表达式(模式属性);
Use a custom (jQuery) mask control, like jQuery mask;
使用自定义(jQuery)掩码控件，如jQuery掩码;
For the platforms where this is not supported, use type=text with a maxlength.
对于不支持此功能的平台，可以使用type=text并使用maxlength。

Note: Despite these options: always validate server side!

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

#6

To allow ZIP+4:

允许ZIP + 4:

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

To be friendly to the user, this also permits whitespace before/after the string, which the developer will need to trim serverside.

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

#1