html表单控件
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，第二版 》一书。 副本在世界各地的商店中都有出售，或者您可以在此处以电子书形式购买 。
We’ve covered the new values for the input element’s type attribute, along with some attributes that are valid on most form elements. But HTML5 web forms still have more to offer us! There are five new form elements in the HTML5 forms specification: datalist, output, keygen, progress, and meter. We covered datalist above. We introduced you to progress and meter in the last chapter as they are often useful outside of forms. So let’s recap and take a look at the other two elements.
我们已经介绍了输入元素的type属性的新值，以及在大多数表单元素上有效的一些属性。 但是HTML5网络表单仍然可以为我们提供更多功能！ HTML5表单规范中有五个新的表单元素： datalist ， output ， keygen ， progress和meter 。 我们在上面介绍了datalist 。 在上一章中，我们向您介绍了progress和meter ，因为它们通常在表格之外有用。 因此，让我们回顾一下其他两个元素。
progress和meter要素 (The progress and meter Elements)
Two of the most well-known HTML5 elements are the progress and meter elements.
最著名HTML5元素中的两个是progress和meter元素。
The meter element provides for a gauge, displaying a general value within a range. You provide minimum (min) and maximum (max) values, and the required value that falls between those minimum and maximum values. While many think it’s a form control with attributes similar to some numeric input types, it has no name attribute and won’t be submitted on form submission.
meter元素提供一个仪表，显示范围内的常规值。 你提供最小值( min )和最大( max )值，和所需要的value ，这些最小值和最大值之间下降。 尽管许多人认为它是具有类似于某些数字输入类型的属性的表单控件，但它没有name属性，因此不会在表单提交时提交。
The meter will default the minimum value to 0, or the meter’s value, whichever is lower. The maximum value defaults to 1 or the meter’s value, whichever is higher. Use meter when there is a minimum value, a maximum value, and optimal values, and the value can go up and down like a test grade, gas tank level, or blood pressure. With these three attributes, browsers that support meter including Android 4.4+ (but not iOS7 or IE11) will show a green gauge.
meter将默认最小值为0或仪表的value ，以较低者为准。 最大值默认为1或仪表的value ，以较高者为准。 当存在最小值，最大值和最佳值时，请使用meter ，该值可以像测试等级，油箱液位或血压一样上下波动。 具有这三个属性，支持包括Android 4.4+(但不包括iOS7或IE11)的仪表的浏览器将显示绿色。
meter enables us to show when a value is in the right range with the low, high, and optimum values. If the value is between min and low, the meter is yellow. If the value is between the low and high value the meter is green. If the value is between high and max, it will be red. Currently the optimum value has no noticeable effect.
meter使我们能够显示何时在low ， high和optimum值的正确范围内。 如果该value介于min和low之间，则仪表为黄色。 如果该值介于low和high值之间，则仪表为绿色。 如果该value介于high和max之间，它将为红色。 目前， optimum值没有明显的作用。
The meter element should not be used to indicate progress; instead, use a progress bar to indicate the percentage of how complete a task is.
meter元素不应用于指示进度。 而是使用progress条指示完成任务的百分比。
Progress attributes include max and value, with progress always being between 0 and 100% complete. The browser calculates what percentage the value is of the maximum and adjusts the length of the progress bar accordingly. It displays a partially filled gray to blue progress bar where it is fully gray at 0% and fully blue at 100%.
进度属性包括max和value ，进度始终在0到100％之间完成。 浏览器计算该值占最大值的百分比，并相应地调整进度条的长度。 它显示部分填充的灰色到蓝色进度条，其中进度条在0％处为全灰色，在100％处为全蓝色。
If no value is included, the progress bar is indeterminate. Chrome, Opera, Safari, and Firefox display indeterminate progress as animated bars, with IE styling it as animated dots.
如果不包含任何value ，则进度条不确定。 Chrome，Opera，Safari和Firefox将动画进度条显示为不确定的进度，而IE将其样式设置为动画点。
Unlike meter, progress heads only in the direction of 100% of the max value. The presentation defaults to inline-block so you can set width and height on progress elements. Height will not change the actual height of the stylized bar (unlike meter) but will add space below it.
与meter不同， progress仅朝max的100％方向前进。 演示文稿默认为内联块，因此您可以在progress元素上设置width和height 。 高度不会改变样式栏的实际高度(与meter不同)，但是会在其下方增加空间。
output元素 (The output Element)
The purpose of the output element is to accept and display the result of a calculation. The output element should be used when the user can see the value, but not directly manipulate it, and when the value can be derived from other values entered in the form. An example use might be the total cost calculated after shipping and taxes in a shopping cart.
output元素的目的是接受并显示计算结果。 当用户可以看到但不能直接操纵该值，并且可以从表单中输入的其他值派生该值时，应使用output元素。 一个示例用法可能是购物车中的运费和税费后计算出的总费用。
The output element’s value is contained between the opening and closing tags. Generally, it will make sense to use JavaScript in the browser to update this value. The output element has a for attribute, which is used to reference the IDs of form fields whose values went into the calculation of the output element’s value.
output元素的值包含在开始和结束标记之间。 通常，在浏览器中使用JavaScript来更新此值是有意义的。 output元素具有for属性，该属性用于引用其值进入计算output元素值的表单字段的ID。
The output element’s name and value are submitted along with the form.
output元素的name和value与表单一起提交。
The keygen element is a control for generating a public-private key pair and for submitting the public key from that key pair. Opera, Chrome, Safari, Android, and Firefox all support this element, rendering it as a drop-down menu with options for the length of the generated keys; all provide different options, though. There is still no support in iOS7 and IE11.
keygen元素是一个控件，用于生成公共-私有密钥对并从该密钥对提交公共密钥。 Opera，Chrome，Safari，Android和Firefox均支持此元素，将其呈现为下拉菜单，其中包含用于生成密钥长度的选项； 但是，它们都提供了不同的选项。 iOS7和IE11仍不支持。
The keygen element introduces two new attributes: the challenge attribute specifies a string that is submitted along with the public key, and the keytype attribute specifies the type of key generated. At the time of writing, the only supported keytype value is rsa, a common algorithm used in public-key cryptography.
keygen元素引入了两个新属性： challenge属性指定与公共密钥一起提交的字符串， keytype属性指定生成的密钥的类型。 在撰写本文时，唯一受支持的keytype值为rsa ，这是公用密钥加密中使用的通用算法。
contenteditable属性 (The contenteditable Attribute)
While it is always best to use the most appropriate form element for its intended purpose, sometimes the existing form elements fall short of our needs; for example, no form control makes for a good inline WYSIWYG text editor.
尽管始终总是将最合适的表单元素用于预期目的，但有时现有的表单元素无法满足我们的需求； 例如，没有任何窗体控件可提供良好的嵌入式WYSIWYG文本编辑器。
There is a roundabout solution for that, though. Any element in an HTML5 document can be made editable with the contenteditable attribute. The contenteditable attribute, written simply as contenteditable or contenteditable="true", makes the element on which it is included editable. You will usually find this attribute on divs, but you can even make a style element that’s set to "display:block" editable, and change CSS on the fly. While any element that is not natively a form control will not by default be sent to the server with the rest of the form data on form submission, you can use JavaScript to send user edited content to the server asynchronously or on form submission.
但是，有一个回旋解决方案。 HTML5文档中的任何元素都可以通过contenteditable属性进行编辑。 contenteditable属性(简单地写为contenteditable或contenteditable="true" )使包含其的元素可编辑。 通常，您可以在div上找到此属性，但是甚至可以将设置为"display:block"的style元素设为可编辑，并即时更改CSS。 虽然默认情况下任何非表单控件的元素都不会在表单提交时与其余表单数据一起发送到服务器，但是您可以使用JavaScript将用户编辑的内容异步或在表单提交时发送到服务器。
If you’ve ever seen an editable profile where the element to click doesn’t look like a form control at all, there is a chance that you were actually editing a contenteditable element. Any edits made on contenteditable components actually update the DOM.
如果您曾经看过可编辑的配置文件，而要单击的元素根本看起来不像表单控件，那么您实际上是在编辑一个contenteditable元素。 对contenteditable组件所做的任何编辑实际上都会更新DOM。
Simply adding contenteditable to an element makes that element editable in all browsers. In addition, its descendents will also be editable unless contenteditable="false" is explicitly applied to them. While this does update the DOM client side, you do have to add JavaScript to explicitly save it.
只需将contenteditable添加到元素，即可在所有浏览器中对该元素进行编辑。 此外，除非将contenteditable="false"显式应用于它们，否则其后代也将是可编辑的。 虽然这确实会更新DOM客户端，但是您必须添加JavaScript才能显式保存它。
对现有表单控件的更改 (Changes to Existing Form Controls)
There have been a few other changes to form controls in HTML5.
HTML5对表单控件进行了其他一些更改。
form元素 (The form Element)
Throughout this chapter, we’ve been talking about attributes that apply to various form field elements; however, there are also some new attributes specific to the form element itself.
在本章中，我们一直在讨论适用于各种表单字段元素的属性。 但是，还有一些特定于form元素本身的新属性。
First, as we’ve seen, HTML5 provides a number of ways to natively validate form fields; certain input types such as email and url, for example, as well as the required and pattern attributes. You may, however, want to use these input types and attributes for styling or semantic reasons without preventing the form being submitted. The new Boolean novalidate attribute allows a form to be submitted without native validation of its fields.
首先，如我们所见，HTML5提供了多种方法来本地验证表单字段； 某些输入类型，例如email和url ，以及required和pattern属性。 但是，出于样式或语义原因，您可能希望使用这些输入类型和属性，而不阻止提交表单。 新的布尔值novalidate属性允许在不对字段进行本地验证的情况下提交表单。
Next, forms no longer need to have the action attribute defined. You no longer need to explicitly state the URL to use it for form submission. If omitted, the form will behave as though the action were set to the current page. You can write or override the URL defined in the form’s action attribute with the formaction attribute of the button input types that activate form submission.
接下来，表单不再需要定义action属性。 您不再需要明确声明要使用URL提交表单的URL。 如果省略，则该表单的行为就像将action设置为当前页面一样。 您可以使用激活表单提交的按钮输入类型的formaction属性来编写或覆盖在表单的action属性中定义的URL。
Lastly, the autocomplete attribute we introduced earlier can also be added directly to the form element; in this case, it will apply to all fields in that form unless those fields override it with their own autocomplete attribute.
最后，我们前面介绍的autocomplete属性也可以直接添加到form元素中。 在这种情况下，它将应用于该表单中的所有字段，除非这些字段使用其自己的autocomplete属性覆盖它。
optgroup元素 (The optgroup Element)
In HTML5, you can have an optgroup as a child of another optgroup, which is useful for multilevel select menus.
在HTML5中，您可以将optgroup作为另一个optgroup的子optgroup ，这对于多级select菜单很有用。
textarea元素 (The textarea Element)
In HTML 4, we were required to specify a textarea element’s size by specifying values for the rows and cols attributes. In HTML5, these attributes are no longer required; you should use CSS to define a textarea’s width and height.
在HTML 4中，我们需要通过为rows和cols属性指定值来指定textarea元素的大小。 在HTML5中，不再需要这些属性。 您应该使用CSS定义textarea的宽度和高度。
New in HTML5 is the wrap attribute. This attribute applies to the textarea element, and can have the values soft (the default) or hard. With soft, the text is submitted without line breaks other than those actually entered by the user, whereas hard will submit any line breaks introduced by the browser due to the size of the field. If you set the wrap to hard, you need to specify a cols attribute.
HTML5中的新功能是wrap属性。 此属性适用于textarea元素，其值可以为soft (默认值)或hard 。 如果使用soft ，则提交的文本将不包含换行符，而不是用户实际输入的换行符；而对于hard ，由于字段的大小，将提交浏览器引入的任何换行符。 如果将wrap设置为hard，则需要指定cols属性。
结论 (In Conclusion)
Unfortunately, we weren’t able to cover everything—that should be a book in itself. This was, however, a fairly in-depth introduction. As support for HTML5 input elements and attributes grows, sites will require less and less JavaScript for client-side validation and user interface enhancements, while browsers handle most of the heavy lifting. Legacy user agents are likely to stick around for the foreseeable future, but there is no reason to avoid moving forward and using HTML5 web forms, with appropriate polyfills and fallbacks filling the gaps where required.
不幸的是，我们无法涵盖所有内容，而它本身应该是一本书。 但是，这是相当深入的介绍。 随着对HTML5输入元素和属性的支持的增加，用于客户端验证和用户界面增强的网站将越来越需要JavaScript，而浏览器则承担了大部分繁重的工作。 旧版用户代理很可能会在可预见的将来留下来，但是没有理由避免前进并使用HTML5 Web表单，并在需要时使用适当的polyfill和fallback填补空白。
In the next chapter, we’ll continue fleshing out The HTML5 Herald by adding what many consider to be HTML5’s killer feature: native video and audio.
在下一章中，我们将通过添加许多人认为HTML5的杀手级功能：本机视频和音频，继续完善HTML5 Herald。
html表单控件
扫一扫
1431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
