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

阳光穿透心脏的1/2处 2022-12-03 09:57 191阅读 0赞

html5表单属性

*The following is an extract from our book, [HTML5 & CSS3 for the Real World, 2nd Edition][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][HTML5 _ CSS3 for the Real World_ 2nd Edition].*

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

### `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 *can*receive 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`元素不同，用户可以输入自己喜欢的任何值，但是会为他们提供一组建议的选项。

![alt][]

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/][https_www.sitepoint.com_html5-form-attributes-part-2]

html5表单属性

[HTML5 _ CSS3 for the Real World_ 2nd Edition]: https://www.sitepoint.com/premium/books/html5-css3-for-the-real-world-2nd-edition
[alt]: /images/20221123/8e427120a05b4b9397cf43d0e2fda244.png
[https_www.sitepoint.com_html5-form-attributes-part-2]: https://www.sitepoint.com/html5-form-attributes-part-2/