html5表单属性_了解HTML5表单属性（第2部分）

html5表单属性

The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下摘自Alexis Goldstein，Louis Lazaris和Estelle Weyl编写的《现实世界HTML5和CSS3，第二版 》一书。 副本在世界各地的商店中都有出售，您也可以在这里以电子书的形式购买。

pattern属性 (The pattern Attribute)

The pattern attribute enables you to provide a regular expression that the user’s input must match in order to be considered valid. For any input where the user can enter free-form text, you can limit what syntax is acceptable with the pattern attribute.

pattern属性使您能够提供一个正则表达式，用户输入必须匹配该正则表达式才能被视为有效。 对于用户可以输入自由格式文本的任何输入，您可以限制pattern属性可接受的语法。

The regular expression language used in patterns is the same Perl-based regular expression syntax as JavaScript, except that the pattern attribute must match the entire value, not just a subset. When including a pattern, you should always indicate to users what is the expected (and required) pattern.

模式中使用的正则表达式语言与JavaScript基于Perl的正则表达式语法相同，只是模式属性必须匹配整个值，而不仅仅是子集。 包括模式时，您应始终向用户指示期望(和要求)的模式。

The global title attribute has special significance when used in conjunction with the pattern attribute. Since browsers currently show the value of the title attribute on hover such as a tooltip, include pattern instructions that are more detailed than placeholder text, and which form a coherent statement. That title attribute will also be displayed with the browser’s default error message in browsers that support native form validation with error messaging, which we’ll cover later in this chapter.

全局title属性与pattern属性结合使用时具有特殊的意义。 由于浏览器当前在悬停时显示title属性的值(例如工具提示)，因此请包含比占位符文本更详细的模式指令，这些指令会形成连贯的语句。 在支持带有错误消息传递的本机表单验证的浏览器中，该title属性还将与浏览器的默认错误消息一起显示，我们将在本章稍后介绍。

注意：正则表达式 (Note: Regular Expressions)

Regular expressions are a feature of most programming languages that allow developers to specify patterns of characters and check to see if a given string matches the pattern. Regular expressions are famously indecipherable to the uninitiated. For instance, one possible regular expression to check if a string is formatted as a hexidecimal color value is this: #[A-Fa-f0-9]{6}.

正则表达式是大多数编程语言的功能，允许开发人员指定字符模式并检查给定的字符串是否与该模式匹配。 正则表达式对于未入门的人来说是众所周知的。 例如，检查字符串是否格式化为十六进制颜色值的一种可能的正则表达式是： #[A-Fa-f0-9]{6} 。

A full tutorial on the syntax of regular expressions is beyond the scope of this book, but there are plenty of great resources, tutorials, and cheat sheets available online if you’d like to learn. Alternatively, you can search the Web or ask around on forums for a pattern that will serve your purpose.

有关正则表达式语法的完整教程超出了本书的范围，但是如果您想学习，可以在网上找到大量有用的资源，教程和备忘单。 或者，您可以搜索Web或在论坛上四处询问适合您目的的模式。

For a basic example, let’s add a pattern attribute to the password field in our form. We want to enforce the requirement that the password be at least six characters long with no spaces:

作为一个基本示例，让我们在表单的password字段中添加一个pattern属性。 我们要强制要求密码长度至少为六个字符，且不包含空格：

<li> 
<label for="password">I would like my password to be:</label> 
<p>(at least 6 characters, no spaces)</p>
<input type="password" id="password" name="password" 
required title="(at least 6 characters, no spaces)" pattern="\S{6,}"> 
</li>

\S refers to “any nonwhitespace character,” and {6,} means “at least six times.” If you wanted to stipulate the maximum amount of characters, the syntax for between six and ten characters, for example, would be \S{6,10}.

\ S表示“任何非空白字符”，而{6,}表示“至少六次”。 如果要规定最大字符数，则例如六个到十个字符的语法为\S{6,10} 。

As with the required attribute, the pattern attribute will prevent the form from being submitted if there is no match for the pattern, and will provide an error message.

与required属性一样，如果pattern属性不匹配，则pattern属性将阻止提交表单，并提供错误消息。

If your pattern is not a valid regular expression, it will be ignored for the purposes of validation.

如果您的模式不是有效的正则表达式，出于验证目的，它将被忽略。

The pattern attribute has been supported to some extent in all browsers since Firefox 4, Safari 5, Chrome 10, Opera 11, IE10, and Android 2.3. By “some extent,” we mean that while all browsers now support the pattern attribute, some—notably Safari and Android through 4.4 allow invalid data to be sent on form submission.

从Firefox 4，Safari 5，Chrome 10，Opera 11，IE10和Android 2.3开始，所有浏览器都在某种程度上支持了pattern属性。 所谓“某种程度上”，是指尽管所有浏览器现在都支持pattern属性，但某些浏览器(尤其是Safari和Android至4.4)允许在表单提交时发送无效数据。

Additionally, similar to the placeholder and required attributes, you can use the value of this attribute to provide the basis for your JavaScript validation code for nonsupporting browsers.

另外，类似于placeholder和required属性，您可以使用此属性的值为不支持浏览器JavaScript验证代码提供基础。

disabled属性 (The disabled Attribute)

The Boolean disabled attribute has been around longer than HTML5 but has been expanded on, to a degree. It can be used with any form control except the new output element, and, unlike previous versions of HTML, HTML5 allows you to set the disabled attribute on a fieldset and have it apply to all the form elements contained in that fieldset.

布尔型disabled属性的长度比HTML5长，但在某种程度上已经扩展。 它可以与除新output元素之外的任何表单控件一起使用，并且与以前HTML版本不同，HTML5允许您在字段集上设置disabled属性，并将其应用于该字段集中包含的所有表单元素。

Generally, form elements with the disabled attribute have the content grayed out by default in the browser. Browsers will prohibit the user from focusing on a form control that has the disabled attribute set. This attribute is often used to disable the submit button until all fields are correctly filled out.

通常，默认情况下，具有disabled属性的表单元素的内容在浏览器中显示为灰色。 浏览器将禁止用户将注意力集中在已设置disabled属性的表单控件上。 此属性通常用于禁用提交按钮，直到正确填写所有字段。

You can employ the :disabled pseudo-class in your CSS to style disabled form controls, and use either :enabled or :not(:disabled) pseudo-classes to target form controls that aren’t disabled.

您可以在CSS中使用:disabled伪类来设置禁用表单控件的样式，并使用:enabled或:not(:disabled)伪类来定位未禁用的表单控件。

Form controls with the disabled attribute aren’t submitted along with the form so their values will be inaccessible to your form processing code on the server side. If you want a form value that users are unable to edit but can still see and submit, use the readonly attribute.

具有disabled属性的表单控件不会与表单一起提交，因此服务器端的表单处理代码将无法访问它们的值。 如果希望用户无法编辑但仍可以查看和提交的表单值，请使用readonly属性。

readonly属性 (The readonly Attribute)

The readonly attribute is similar to the disabled attribute: it makes it impossible for the user to edit the form field. Unlike disabled,however, the field canreceive focus and its value is submitted with the form.

readonly属性类似于disabled属性：它使用户无法编辑表单字段。 但是，与disabled不同，该字段可以获取焦点，并且其值通过表单提交。

In a comments form, we may want to include the URL of the current page or the title of the article that is being commented on, letting the user know that we’re collecting this data without allowing them to change it:

在评论表单中，我们可能希望包括当前页面的URL或正在评论的文章的标题，以使用户知道我们正在收集此数据而不允许他们对其进行更改：

<label for="about">Article Title</label> 
<input type="text" name="about" id="about" readonly 
↵value="http://www.thehtml5herald.com/register.html">

multiple属性 (The multiple Attribute)

The multiple attribute, if present, indicates that multiple values can be entered in a form control. While it was available in previous versions of HTML, it only applied to the select element. In HTML5, it can be added to file, email, and range input types as well. If present, the user can select more than one file, include several comma-separated email addresses, or have a range with two sliders.

multiple属性(如果存在)表示可以在表单控件中输入多个值。 尽管它在HTML的早期版本中可用，但仅应用于select元素。 在HTML5中，它也可以添加到file ， email和range输入类型中。 如果存在，则用户可以选择多个文件，包括多个逗号分隔的电子邮件地址，或者具有两个滑块的范围。

While multiple file input is supported in all browsers since mobile Safari 7 and IE10, the multiple attribute on range input is yet to be supported anywhere at the time of writing.

自移动Safari 7和IE10以来，所有浏览器都支持multiple文件输入，但在撰写本文时，尚不支持范围输入的multiple属性。

注意：空格或逗号？ (Note: Spaces or commas?)

You may notice that the iOS touch keyboard for email inputs includes a space. Of course, spaces aren’t permitted in email addresses, but browsers allow you to separate multiple emails with spaces along with the required comma. Originally the spaces were disallowed in some browsers, but adding spaces after the comma separator has been included in the specification.

您可能会注意到，用于电子邮件输入的iOS触摸键盘包含一个空格。 当然，电子邮件地址中不允许使用空格，但是浏览器允许您使用空格以及所需的逗号分隔多封电子邮件。 最初，在某些浏览器中不允许使用空格，但是在规范中包含逗号分隔符之后添加空格。

form属性 (The form Attribute)

Not to be confused with the form element, the form attribute in HTML5 allows you to associate form elements with forms in which they’re not nested. It means that you can now associate a fieldset or form control with any other form in the document. This solves the age-old issue of forms not being nestable. While you’re still unable to nest forms, you can associate “nested” form controls with a form that’s not an ancestor.

不要与form元素混淆，HTML5中的form 属性允许您将form元素与未嵌套它们的表单相关联。 这意味着您现在可以将字段集或表单控件与文档中的任何其他表单相关联。 这解决了表单不可嵌套的古老问题。 当您仍然无法嵌套表单时，可以将“嵌套的”表单控件与不是祖先的表单相关联。

The form attribute takes as its value the ID of the form element with which the fieldset or control should be associated.

form属性将其值与字段集或控件相关联的form元素的ID作为其值。

If the attribute is omitted, the control will only be submitted with the form in which it’s nested. If you include the form attribute and remove it, make sure to use el.removeAttribute('form') and not el.setAttribute('form', ''). If the form attribute is included but the value is either empty or points to an invalid form ID, the form control will be disassociated from all forms on the page and will not be submitted with any form, including any ancestral form in which it may be nested.

如果省略该属性，则控件将仅以其嵌套的形式提交。 如果包含form属性并将其删除，请确保使用el.removeAttribute('form')而不是el.setAttribute('form', '') 。 如果包括了form属性，但该值为空或指向无效的表单ID，则该表单控件将与页面上的所有表单解除关联，并且不会以任何形式提交，包括可能存在的任何祖先形式。嵌套

his attribute is supported in all browsers, starting with Android 4 and IE 11.

从Android 4和IE 11开始，所有浏览器都支持他的属性。

autocomplete属性 (The autocomplete Attribute)

The autocomplete attribute specifies whether the form, or a form control, should have autocomplete functionality. For most form fields, this will be a drop-down that appears when the user begins typing. For password fields, it’s the ability to save the password in the browser. Support for this attribute has been present in browsers for years, though it was never in the specification until HTML5.

autocomplete属性指定表单或表单控件应具有自动完成功能。 对于大多数表单字段，这将是用户开始输入时出现的下拉菜单。 对于密码字段，可以将密码保存在浏览器中。 尽管早在HTML5之前它就不在规范中，但多年来一直在浏览器中提供对此属性的支持。

If the autocomplete attribute is omitted from the form control or the form, the default value is on. You may have noticed this the last time you filled out a form. In order to disable autocomplete on a form control (or form), use autocomplete="off". This is a good idea for sensitive information, such as a credit card number, or data that will never need to be reused, such as a CAPTCHA.

如果窗体控件或窗体中省略了autocomplete属性，则默认值为on 。 您上次填写表格时可能已经注意到这一点。 为了在表单控件(或表单)上禁用自动完成功能，请使用autocomplete="off" 。 对于敏感信息(例如信用卡号)或永远不需要重用的数据(例如CAPTCHA)，这是一个好主意。

Autocompletion is also controlled by the browser, ignoring developer-set preferences. While the default value is on, the browser must have it enabled for it to work at all; however, setting the autocomplete attribute to off overrides the browser’s on preference for the relevant form control.

自动完成功能也由浏览器控制，忽略了开发人员设置的首选项。 当默认值是on ，浏览器必须启用它才能完全起作用。 但是，将autocomplete属性设置为off会覆盖浏览器on相关表单控件的偏好设置。

datalist list元素和list属性 (The datalist Element and the list Attribute)

Datalists are currently supported in all browsers except Safari, starting with IE10 and Android 4.4.3. In the default form, they fulfill a common requirement: a text field with a set of predefined autocomplete options. Unlike the select element, users can enter whatever value they like, but they’ll be presented with a set of suggested options.

从IE10和Android 4.4.3开始，除Safari以外的所有浏览器目前都支持数据列表。 默认情况下，它们满足一个共同的要求：带有一组预定义的自动完成选项的文本字段。 与select元素不同，用户可以输入自己喜欢的任何值，但是会为他们提供一组建议的选项。

Figure 4.4. The datalist element in action in Firefox

图4.4。 Firefox中运行的datalist元素

For some input types, like text and date input types, a drop-down list of options is presented as users type into the field, as shown in Figure 4.4. For the range input type, the browser will display little tick marks along the slider rule indicating where suggested options are found. For the color input type, users are presented with swatches of color suggestions, with the option to switch to the device’s default color picker if they prefer to pick a different color.

对于某些输入类型，例如text和date输入类型，当用户在字段中键入内容时，会显示一个选项下拉列表，如图4.4所示。 对于range输入类型，浏览器将在滑块规则上显示小勾号，指示在何处找到建议的选项。 对于color输入类型，向用户显示颜色建议色板，如果他们喜欢选择其他颜色，则可以选择切换到设备的默认颜色选择器。

The datalist element, much like select, is a list of options, with each one placed in an option element. You then associate the datalist with an input using the list attribute on the input. The list attribute takes as its value the id attribute of the datalist you want to associate with the input. One datalist can be associated with several input fields.

datalist元素与select一样，是一个选项列表，每个选项都放置在一个option元素中。 然后，使用input的list属性将datalist list与input相关联。 list属性将要与输入关联的datalist list的id属性作为其值。 一个datalist可以与多个输入字段关联。

Here’s what this would look like in practice:

这是实际的样子：

<label for="favcolor">Favorite Color</label> 
<input type="color" list="colors" id="favcolor" name="favcolor"> 

<datalist id="colors"> 
<option value="#0000FF" label="blue"> 
<option value="#008000" label="green"> 
<option value="#ff0000" label="red"> 
<option value="#663399" label="RebeccaPurple"> </datalist>

autofocus属性 (The autofocus Attribute)

The Boolean autofocus attribute specifies that a form control should be focused as soon as the page loads. Only one form element can have autofocus in a given page. For a better user experience and for accessibility reasons, it is best not to use this attribute.

布尔值autofocus属性指定页面加载后应立即对表单控件进行聚焦。 给定页面中只有一个表单元素可以具有自动对焦。 为了获得更好的用户体验并出于可访问性的原因，最好不要使用此属性。

The input elements support many more attributes, with some being type-specific. The attributes include alt,src, height, and width for the image input type, and step, min, and max for numeric input types, including dates and range. dirname helps tell the server the form control’s directionality. formaction, formenctype, formmethod formnovalidate, and formtarget provide methods to override the form’s attributes inputmode helps indicate to the browser what keypad to show when the device is capable of displaying dynamic keypads. minlength and maxlength dictate the length of allowable input. checked, name, size, type, and value should already be familiar to you, though :checked and :default pseudo-classes may be new. We’ll cover some of these with their relevant input types next.

输入元素支持更多属性，其中一些属性是特定于类型的。 对于图像输入类型，属性包括alt ， src ， height和width ，对于数字输入类型(包括日期和范围)，属性包括step ， min和max 。 dirname有助于告知服务器表单控件的方向。 formaction ， formenctype ， formmethod formnovalidate和formtarget提供了重写表单属性的方法inputmode可帮助浏览器在设备能够显示动态小键盘时显示哪个小键盘。 minlength和maxlength指示允许输入的长度。 尽管:checked和:default伪类可能是新的，但您应该已经熟悉了checked ， name ， size ， type和value 。 接下来，我们将介绍其中一些相关输入类型。

翻译自: https://www.sitepoint.com/html5-form-attributes-part-2/

html5表单属性