HTML5表格：新控件

HTML5引入了五个新的形式元素：<datalist></datalist>>，<output></output>，<keygen></keygen>，<progress></progress>，<meter></meter>和

，每个都有独特的目的。>

> <meter></meter>元素充当量规，以视觉表示指定范围内的值。 至关重要的是，它缺乏name属性，并且未与表格提交。 最小值默认值为0或仪表的值（以较低为准），最大默认值为1或仪表的值（以较高为准）。

>

元素使用<progress></progress>>和max>属性显示任务完成百分比。 它作为部分填充的棒，从灰色（0％）到蓝色（100％）。 省略的value导致不确定的进度指示器（通常是动画栏或点）。value>

>

元素显示计算的结果，当用户查看但不直接操纵该值时，理想的结果是理想的。 其价值来自其他表单字段，并以表格提交。 JavaScript通常会动态更新此值。<output></output> （摘自“现实世界的HTML5＆CSS3”，Alexis Goldstein，Louis Lazaris和Estelle Weyl的“ HTML5＆CSS3，第二版”。

我们已经探索了新的

属性和常见的表单元素属性。 但是，HTML5提供更多！让我们回顾一下和，然后检查

和

。input type>。 <progress></progress><meter></meter>和<keygen></keygen> elements <output></output>

>创建一个量规，该规格显示一个范围内的值（使用<progress></progress>>，<meter></meter>和

）。 与许多数字输入不同，它没有

属性，也没有提交。最小默认值为0或<meter></meter>>，最大为1或1或min。将其用于波动的值（例如测试分数，燃料水平）。 支持的浏览器（Android 4.4，但不是ios7或IE11）显示一个颜色编码的量规（基于价值范围的黄色，绿色，红色）。max> valuename不应表明进度；而是使用value。 value>使用

和

显示任务完成（0-100％）。浏览器计算并显示该百分比为栏。 未指定的<meter></meter>创建一个不确定的进度指标。 与<progress></progress>不同，<progress></progress>仅朝max增加。 它默认为value，允许宽度和高度调整（高度会影响间距，而不是条高）。

<output></output>元素

<output></output>显示计算结果，用户可见，但不能直接编辑。 它的值通常通过JavaScript更新，是从其他表单字段得出的，并随表单提交。 for属性将其链接到相关的输入字段。

>

<keygen></keygen>>生成公私钥匙对，提交公钥。 支持随浏览器（Opera，Chrome，Safari，Android，Firefox支持）而有所不同，但不是IOS7或IE11）。 challenge>和keytype（当前仅rsa）是其属性。

>

contenteditable属性

对于标准形式元素不足的情况（例如，wysiwyg编辑器），

>属性（或contenteditable）使任何元素可编辑。 虽然未自动提交，但JavaScript可以处理服务器端提交。 这通常在可编辑的配置文件中可以看出。 添加contenteditable="true"使一个元素及其后代可编辑（除非明确设置为contenteditable）。 客户端DOM更新需要JavaScript来保存。contenteditable="false"

更改现有表单控件

元素<form></form>

> html5用：

增强<form></form>（未经本机验证的提交），省略novalidate（默认为当前页面）和action>（特定提交按钮的Overridesformaction）。 action也可以直接应用于autocomplete元素。<form></form>>

元素<optgroup></optgroup>

html5允许嵌套

多级选择菜单的元素。<optgroup></optgroup>

元素<textarea></textarea> 不再需要

's <textarea></textarea>和rowscols属性（使用CSS进行尺寸）。 wrap属性（值：soft或hard）控制线路断裂。

>

结论

这涵盖了许多HTML5形式增强功能。 越来越多的浏览器支持减少了JavaScript的依赖，以验证和UI改进。虽然传统浏览器持续存在，但建议使用适当的多填充表格采用HTML5表格。 下一章探讨了HTML5的视频和音频功能。

>

常见问题（常见问题解答）

（FAQS部分保持不变，因为它准确地反映了原始文本中介绍的信息。都适当地解决并与所提供的文本一致。 因此，在这里重现它们将是多余的。

>

以上是HTML5表格：新控件的详细内容。更多信息请关注PHP中文网其他相关文章！