HTML5教程 - HTML5 表单 2.0

黄舟
黄舟 原创
2017-02-07 13:30:09 851浏览

HTML5教程 - HTML5 事件

HTML5 表单 2.0

Web 表单 2.0 就是 HTML4 表单特性的一个扩展。HTML5 中的表单元素和属性相比 HTML4 提供了更大程度的语义标记,移除了大量 HTML4 中需要的繁琐脚本和样式。

HTML4 中的 <input> 元素

HTML4 输入框元素使用 type 属性指定数据类型。HTML4 提供了下列类型:

952.JPG

下面是一个使用标注标签,单选按钮以及提交按钮的简单示例:

953.JPG

HTML5 中的 <input> 元素

除了上面提到的属性,HTML5 给输入框元素的 type 属性引入了几个新值。如下表所列。

注意: 请使用最新版的 Opera 浏览器运行下面所有例子。

954.JPG

<output> 元素

HTML5 还引入了一个新元素 <output>,用来表示不同类型的输出结果,比如输出由脚本所写。

还可以用 for 属性指定输出元素和文档中影响计算的其他元素之间的关系(比如,作为输入源或者参数)。for 属性的值是一个由空格分隔的其他元素的 IDs 列表。

DEMO:http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-11.htm

placeholder 属性

HTML5 引入了一个叫做 palceholder 的新属性。这个属性在 <input> 和 <textarea> 元素上为用户提供了在这个字段可以输入什么的提示。占位符字符不能包含回车符或者换行符。

下面是 placeholder 属性的简单语法:

955.JPG

DEMO:http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-56.htm

required 属性

现在,我们不需要使用 JavaScript 处理诸如空文本框永远不能被提交的这类客户端验证了,因为 HTML5 引入了一个叫做 required 的新属性,可以按照如下方式使用,它会保证输入框有值:

956.JPG

DEMO:http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-57.htm

以上就是HTML5教程 - HTML5 表单 2.0的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!


声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。