html表单标记是_HTML5表单：标记

html表单标记是

This is the first in a three-part series about HTML5 web forms. We’ll cover the basic markup in this article before progressing to styling and the client-side JavaScript validation APIs. I recommend you read this even if you’re already familiar with forms — there are many new attributes and gotchas!

这是关于HTML5网络表单的三部分系列文章的第一篇。 在介绍样式和客户端JavaScript验证API之前，我们将介绍本文的基本标记。 即使您已经熟悉表单，我还是建议您阅读此书-有许多新属性和陷阱！

HTML forms may be mundane but they’re essential for the majority of web sites and apps. In HTML4, input fields were limited to:

HTML表单可能很平凡，但是对于大多数网站和应用程序来说，HTML表单是必不可少的。 在HTML4中，输入字段仅限于：

• input type="text"

  input type="text"

• input type="checkbox"

  input type="checkbox"

• input type="radio"

  input type="radio"

• input type="password"

  input type="password"

• input type="hidden" — for data the user cannot view

  input type="hidden" -用于用户无法查看的数据

• input type="file" — for uploads

  input type="file" -用于上传

• textarea — for longer text entry

  textarea更长的文本输入

• select — for drop-down lists

  select —用于下拉列表

• button — generally used for submitting a form, although input type="submit" and input type="image" could also be used.

  button -通常用于提交表单，尽管也可以使用input type="submit"和input type="image" 。

Also:

也：

• CSS styling possibilities were limited,
  CSS样式的可能性是有限的，
• custom controls such as date and color pickers had to be developed in code, and
  必须使用代码开发自定义控件(例如日期和颜色选择器)，并且
• client-side validation required JavaScript.
  客户端验证需要JavaScript。

其他HTML5输入类型 (Additional HTML5 Input Types)

A deluge of new input types have been introduced. These provide native input assistance and validation without any JavaScript code…

大量的新input类型已被引入。 这些提供本机输入帮助和验证，而无需任何JavaScript代码…

type	description
email	enter an email address
tel	enter a telephone number — no strict syntax is enforced but line breaks will be removed
url	enter a URL
search	a search field with line breaks automatically removed
number	a floating point number
range	a control for entering an approximate value, typically represented by a slider
date	enter the day, month and year
datetime	enter the day, month, year, hour, minute, second and microsecond based on the current UTC timezone
datetime-local	enter a date and time with no timezone
month	enter the month and year with no timezone
week	enter a week number with no timezone
time	enter the time with no timezone
color	specify a color

类型	描述
email	输入电子邮件地址
tel	输入电话号码-无需执行严格的语法，但会删除换行符
url	输入网址
search	自动删除带有换行符的搜索字段
number	浮点数
range	用于输入近似值的控件，通常由滑块表示
date	输入日期，月份和年份
datetime	根据当前UTC时区输入日，月，年，小时，分钟，秒和微秒
datetime-local	输入没有时区的日期和时间
month	输入没有时区的月份和年份
week	输入没有时区的星期数
time	输入没有时区的时间
color	指定颜色

输入属性 (Input Attributes)

Unless stated otherwise, input fields can have any of the following form-specific attributes. Several are Boolean attributes, that is, they do not require values, e.g

除非另有说明，否则输入字段可以具有以下任何特定于表单的属性。 有一些是布尔属性，也就是说，它们不需要值，例如

<input type="email" name="email" required />

although you can add them if you prefer a stricter XHTML-like syntax, e.g.

尽管如果您希望使用更严格的类似XHTML的语法，则可以添加它们，例如

<input type="email" name="email" required="required" />

attribute	description
name	the input field name
value	an initial value
checked	checks a checkbox or radio input
maxlength	the maximum length of the entered string. This can also be applied to textarea fields in HTML5
minlength	the minimum length of the entered string. This is documented but, at the time of writing, browser support is poor and the attribute causes HTML validators to error. An alternative option is pattern=".{3,}" which would enforce at least three characters.
placeholder	a subtle text hint shown in the input box
autofocus	set focus to this (non-hidden) field when the page loads
required	indicates that a value must be entered
pattern	ensures a value adheres to a regular expression
min	the minimum value permitted (numeric and date types)
max	the maximum value permitted (numeric and date types)
step	the value granularity. For example, input type="number" min="10" max="19" step="2" would only permit the values 10, 12, 14, 16 or 18.
autocomplete	provides the browser with a hint for auto-completion, e.g. “billing email” or can be set to “on” or “off” to enable and disable accordingly
inputmode	specifies the input mechanism. The most useful options: verbatim — non-prose content such as usernames latin — latin script such as search fields latin-name — names, i.e. with initial letter capitalization latin-prose — prose content such as messages, tweets, etc. numeric — numeric input where number or range would not be appropriate, e.g. credit card numbers
size	the size in characters for text or password inputs or pixels for email, tel, url or search inputs. Probably best avoided since you should use CSS to style fields.
rows	number of text rows (textarea only)
cols	number of text columns (textarea only)
list	points to a set datalist options
spellcheck	set to true or false to enable or disable spell checking
form	the ID of the form which this input belongs to. In general, inputs should be nested inside a form, but this attribute permits an input to be defined anywhere on the page
formaction	specifies a URI to override the form action when submitting (submit buttons/images only)
formmethod	specifies GET or POST to override the form method when submitting (submit buttons/images only)
formenctype	specifies the type of content when submitting (text/plain, multipart/form-data or application/x-www-form-urlencoded on submit buttons/images only)
formtarget	specifies a target window/frame to override the form target when submitting (submit buttons/images only)
readonly	the input value cannot be changed although it will be validated and submitted
disabled	disables the input — no validation will occur and data will not be submitted

属性	描述
name	输入字段名称
value	初始值
checked	检查checkbox或radio输入
maxlength	输入的字符串的最大长度。 这也可以应用于HTML5中的textarea字段
minlength	输入字符串的最小长度。 有记录，但是在撰写本文时，浏览器支持不佳，并且该属性导致HTML验证程序出错。 另一种选择是pattern=".{3,}" ，它至少要强制三个字符。
placeholder	输入框中显示的细微文字提示
autofocus	页面加载时将焦点设置为此(非隐藏)字段
required	表示必须输入一个值
pattern	确保值符合正则表达式
min	允许的最小值(数字和日期类型)
max	允许的最大值(数字和日期类型)
step	价值粒度。 例如， input type="number" min="10" max="19" step="2"仅允许值10、12、14、16或18。
autocomplete	向浏览器提供自动完成提示，例如“计费电子邮件”，或者可以设置为“开”或“关”以相应地启用和禁用
inputmode	指定输入机制。 最有用的选项： verbatim -非散文内容，例如用户名 latin -拉丁语脚本，例如搜索字段 latin-name -名称，即首字母大写 latin-prose -散文内容，例如消息，推文等 numeric —数字输入，其中number或range不合适，例如信用卡号
size	text或password输入的字符大小， email ， tel ， url或search输入的像素大小。 最好避免使用，因为您应该使用CSS设置字段样式。
rows	文本行数(仅限textarea )
cols	文本列数(仅限textarea )
list	指向一组数据列表选项
spellcheck	设置为true或false以启用或禁用拼写检查
form	此输入所属表单的ID。 通常，输入应嵌套在form ，但是此属性允许在页面上的任何位置定义输入
formaction	指定一个URI，以在提交时覆盖form操作(仅提交按钮/图像)
formmethod	指定GET或POST以在提交时覆盖form方法(仅提交按钮/图像)
formenctype	指定提交时的内容类型(仅在提交按钮/图像上使用text/plain ， multipart/form-data或application/x-www-form-urlencoded )
formtarget	指定在提交时覆盖form目标的目标窗口/框架(仅提交按钮/图像)
readonly	尽管输入值将被验证并提交，但无法更改
disabled	禁用输入-不会进行验证，也不会提交数据

Note that date fields must always use YYYY-MM-DD for value, min and max attributes.

请注意， date字段必须始终将YYYY-MM-DD用于value ， min和max属性。

The following example requests a mandatory email which ends in @mysite.com and has focus when the page loads:

以下示例请求以@ mysite.com结尾且在页面加载时具有焦点的强制电子邮件：

<input
  type="email"
  name="login"
  pattern="@mysite\.com$"
  autocomplete="email"
  autofocus
  required />

资料清单 (Datalists)

A datalist contains a set of suitable options for any type of input, e.g.

数据列表包含一组适用于任何类型input选项，例如

<input type="text" name="browser" list="browsers" />

<datalist id="browsers">
  <option value="Chrome" />
  <option value="Firefox" />
  <option value="Internet Explorer" />
  <option value="Safari" />
  <option value="Opera" />
</datalist>

When datalist is supported, the browser presents auto-complete options when you start to type. The whole list is usually shown if you double-click the control or click the down arrow (if shown). Unlike a standard select drop-down, the user is free to override these choices and enter their own value.

如果支持datalist ，则在您开始键入时浏览器将显示自动完成选项。 如果双击控件或单击向下箭头(如果显示)，通常会显示整个列表。 与标准select下拉菜单不同，用户可以随意覆盖这些选择并输入自己的值。

It’s possible to set values and text like standard select options, e.g.

可以设置值和文本，例如标准选择选项，例如

<option value="IE">Internet Explorer</option>

but be aware that implementations differ. For example, Firefox auto-completes on the text itself (Internet Explorer) while Chrome prefers the value (IE) and shows the text greyed out:

但请注意，实现方式有所不同。 例如，Firefox自动完成文本本身(Internet Explorer)，而Chrome则首选该值(IE)并以灰色显示文本：

Datalists can be populated by JavaScript if you wanted to retrieve options via Ajax.

如果您想通过Ajax检索选项，则可以用JavaScript填充数据列表。

禁用验证 (Disabling Validation)

Validation for the whole form can be disabled by setting a novalidate attribute on the form element. Alternatively, you can set a formnovalidate attribute on the form’s submit button/image.

可以通过在form元素上设置novalidate属性来禁用整个表单的验证。 或者，您可以在表单的“提交”按钮/图像上设置formnovalidate属性。

Remember also that setting an input’s disabled attribute will prevent validation on that field.

还要记住，设置输入的disabled属性将阻止对该字段的验证。

输出栏位 (Output Fields)

While we’re primarily discussing input types, HTML5 also provides read-only output options:

在我们主要讨论输入类型时，HTML5还提供了只读输出选项：

• output — the result of a calculation or user action

  output -计算或用户操作的结果

• progress — a progress bar (the value and max attributes define the status)

  progress —进度条( value和max属性定义状态)

• meter — a scale which can change between green, amber and red depending on the values set for the attributes value, min, max, low, high and optimum

  meter —一种刻度，可以根据为属性value min ， max ， low ， high和optimum设置的值在绿色，琥珀色和红色之间切换

分隔和标记输入 (Separating and Labeling Inputs)

The whatwg.org form specification states:

whatwg.org表单规范指出：

Each part of a form is considered a paragraph, and is typically separated from other parts using <p> elements

表单的每个部分都被视为一个段落，通常使用<p>元素将其与其他部分分开

Interesting. I normally use a div although I doubt it matters from a semantic perspective. A p tag is shorter although it’s possible you’ll need to apply a class to modify margins.

有趣。 我通常使用div尽管我从语义的角度怀疑它是否重要。 p标记较短，尽管您可能需要应用一个类来修改边距。

More importantly, you should use label elements either around or next to the input itself with a for attribute stating the input’s ID, e.g.

更重要的是，您应该在输入本身周围或旁边使用带有一个for属性的标签元素，该属性说明输入的ID，例如

<p>
  <p>
  <label for="firstname">First name</label>
  <input type="text" id="firstname" name="firstname" placeholder="first name" required maxlength="20" />
</p>
 
<p>
  <label for="lastname">Last name</label>
  <input type="text" id="lastname" name="lastname" placeholder="last name" required maxlength="20" />
</p>
 
<p>
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" placeholder="your@email.address" required maxlength="50" />
</p>
 
<p>
  <label>
    <input type="checkbox" name="newsletter" />
    Sign up for our newsletter
  </label>
</p>

没有标准控件 (No Standard Controls)

There are no specific interface guidelines for browser vendors to follow. This is intentional: a typical desktop mouse-controlled date picker can be too small on a mobile device so the vendor can implement a touch-based alternative.

浏览器供应商没有遵循的特定接口指南。 这是有意的：典型的桌面鼠标控制的日期选择器在移动设备上可能太小，因此供应商可以实现基于触摸的替代方法。

浏览器支持 (Browser Support)

Not every input type and attribute is supported in all browsers. In general, most modern browsers from IE10+ include basics such as email and number. However, the date types are only supported in Webkit and Blink browsers at the time of writing.

并非所有浏览器都支持每种输入类型和属性。 通常，大多数来自IE10 +的现代浏览器都包含诸如电子邮件和号码之类的基础知识。 但是，在撰写本文时，Webkit和Blink浏览器仅支持日期类型。

The browser will revert to a standard text input when a specific type and ignore attributes when those values are not supported.

当特定类型时，浏览器将恢复为标准text输入，而当不支持这些值时，将忽略属性。

始终使用正确的类型！ (Always Use the Correct Type!)

It’s important to use the correct input type for the data you’re requesting. That may seem obvious but you will encounter situations when you’ll be tempted to use a standard text input.

为您请求的数据使用正确的输入类型很重要。 这似乎很明显，但是当您尝试使用标准文本输入时，您会遇到一些情况。

Consider dates. Support is patchy and this leads to implementation issues:

考虑日期。 支持是不完整的，这会导致实现问题：

1. The standard date input always returns dates in YYYY-MM-DD format regardless of how the date picker is presented in your locale.

   无论日期选择器在您的语言环境中如何显示，标准date输入始终以YYYY-MM-DD格式返回日期。

2. IE and Firefox will fall back to a standard text input, but your users may expect to enter values in US MM-DD-YYYY or European DD-MM-YYYY format.

   IE和Firefox将退回到标准text输入，但是您的用户可能希望以US MM-DD-YYYY或欧洲DD-MM-YYYY格式输入值。

3. A JavaScript date picker such as the one in jQuery UI allows you to define a custom format — or even YYYY-MM-DD for consistency — but you cannot guarantee JavaScript will be enabled.

   JavaScript日期选择器(例如jQuery UI中的日期选择器)允许您定义自定义格式-甚至是YYYY-MM-DD以确保一致性-但您不能保证将启用JavaScript。

The easy solution is to abandon the HTML5 date input, revert to text and implement your own date control. Don’t. You will never create a custom date picker which works in all devices at all screen resolutions, supports keyboard, mouse and touch input and continues to operate when JavaScript is disabled. In particular, mobile browsers are often ahead of their desktop cousins and implement good touch-screen controls.

最简单的办法是放弃HTML5 date输入，恢复到text和实现自己的日期控件。 别。 您将永远不会创建一个自定义的日期选择器，该日期选择器可在所有设备上以所有屏幕分辨率使用，并支持键盘，鼠标和触摸输入，并且在禁用JavaScript时仍可继续运行。 特别是，移动浏览器通常领先于台式机，并实现良好的触摸屏控制。

The HTML5 input types are the future. Use them and, if necessary, add JavaScript polyfills in situations where you require good cross-browser support. But remember to…

HTML5输入类型是未来。 使用它们，并在需要良好跨浏览器支持的情况下(如有必要)添加JavaScript polyfills。 但是请记住...

验证服务器端 (Validate Server-Side)

Browser validation is not guaranteed. Even if you forced everyone to access using the latest version of Chrome you could never prevent:

无法保证浏览器验证。 即使您强迫所有人使用最新版本的Chrome进行访问，也无法阻止：

• browser bugs or JavaScript failures permitting invalid data
  浏览器错误或JavaScript错误导致数据无效
• the user changing your HTML or scripts using browser tools
  用户使用浏览器工具更改HTML或脚本
• submission from systems outside your control, or
  来自您无法控制的系统的提交，或
• data interception between the browser and the server (certainly over HTTP).
  浏览器和服务器之间的数据拦截(一定是通过HTTP)。

Client-side validation never has and never will be a substitute for server-side validation. Validating user data on the server is essential. On the client, it’s a nice-to-have.

客户端验证永远不会，也永远不会替代服务器端验证。 验证服务器上的用户数据至关重要。 在客户端上，这是一个不错的选择 。

Finally, remember dates may be received in YYYY-MM-DD or whichever format you specified to the user (MM-DD-YYYY, DD-MM-YYYY, etc.) Check for digits in the first four characters or use native language/framework date parsing methods as necessary.

最后，请记住日期可能以YYYY-MM-DD或您指定给用户的任何格式(MM-DD-YYYY，DD-MM-YYYY等)接收。检查前四个字符中的数字或使用母语/框架日期解析方法(如有必要)。

We’ve covered a lot in this article. In the next part we’ll look at form-related CSS properties.

我们在本文中介绍了很多内容。 在下一部分中，我们将讨论与表单相关CSS属性。

翻译自: https://www.sitepoint.com/html5-forms-markup/

html表单标记是