Html 邮政编码应该使用什么 html5 表单属性？

What html5 form attribute should be used for a zipcode?

提问by homer5677

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.

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

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

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

回答by Md Johirul Islam

You can try this

你可以试试这个

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

回答by Jukka K. Korpela

“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 说input type=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 的一个简单方法是考虑输入控件是否具有旋转框界面（例如，带有“向上”和“向下”箭头）。

The means that the only feasible element for the purpose is input type=text, when using built-in constructs. You can use the maxlengthattribute to set the maximum number of characters (works on all browsers) and additionally a patternattribute 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 patternor even maxlength, since the formats vary.

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

回答by Andrew M

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

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

Example: UK postal codes are formatted as AA9A 9AA

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

9 = any number

9 = 任何数字

A = any letter

A = 任何字母

回答by Satyen

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.

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

回答by Michael Crenshaw

"Best" is subjective/contextual. But from a usability perspective, Zach Leatherman studied number-ish inputs in 2016and specifically addressed the ZIP input.

“最佳”是主观的/上下文的。但从可用性的角度来看，Zach Leatherman 在 2016 年研究了数字输入，并专门解决了 ZIP 输入。

The goal was to make "big number keyboards" appear on mobile devices. This may seem insignificant, but easing form input in e-commerce checkout forms is an important goal.

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

It seems that some day the inputmode="numeric"attribute will be appropriate for zip inputs. But for now, only Chrome/Android supports it(Firefox has it behind a flag).

似乎有一天该inputmode="numeric"属性将适用于 zip 输入。但就目前而言，只有 Chrome/Android 支持它（Firefox 有一个标志）。

Zach developed a small library called numeric-input as part of his formcorepackage which will implement the best possible case for whatever browser is being used.

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

Keep in mind, the library is a couple years old, and browser behavior might have changed since then.

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

回答by Shomz

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 nosecurity. 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/

回答by Patrick Hofman

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

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

The options:

选项：

• Use a regular expression (the pattern attribute);
• Use a custom (jQuery) mask control, like jQuery mask;
• For the platforms where this is not supported, use type=textwith a maxlength.

• 使用正则表达式（模式attribute）；
• 使用自定义 (jQuery) 遮罩控件，例如jQuery mask；
• 对于在此不支持的平台上，使用type=text了maxlength。

Note: Despite these options: always validate server side!

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

回答by Kevin N.

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

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

Type set telto show numeric keypad, pattern to except values 0-9 and max set to prevent values beyond US 7 digit zip codes.

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