HTML5教程–HTML5表单2.0

web前端|H5教程 HTML5教学 – HTML5 事件HTML5 表单 2.0Web 表单 2.0 就是 HTML4 表单特性的一个扩展。HTML5 中的表单元素和属性相比 HTML4 提供了更大程度的语义标记，移除了大量 HTML4 中需要的繁琐脚本和样式。HTML4 中的 元素

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

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

HTML5 中的 元素

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

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

元素

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

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

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

placeholder 属性

HTML5 引入了一个叫做 palceholder 的新属性。这个属性在 和 元素上为用户提供了在这个字段可以输入什么的提示。占位符字符不能包含回车符或者换行符。</p><p>下面是 placeholder 属性的简单语法：</p></p><p>DEMO：http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-56.htm</p><p>required 属性</p><p>现在，我们不需要使用 Javascript 处理诸如空文本框永远不能被提交的这类客户端验证了，因为 HTML5 引入了一个叫做 required 的新属性，可以按照如下方式使用，它会保证输入框有值：</p></p><p>DEMO：http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=html5-57.htm</p></p> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/html5" target="_blank" title="html5">html5</a></li> <li><a href="https://www.php1.cn/tag/html" target="_blank" title="html">html</a></li> <li><a href="https://www.php1.cn/tag/web" target="_blank" title="web">web</a></li> <li><a href="https://www.php1.cn/tag/ubuntu" target="_blank" title="ubuntu">ubuntu</a></li> <li><a href="https://www.php1.cn/tag/爬虫" target="_blank" title="爬虫">爬虫</a></li> <li><a href="https://www.php1.cn/tag/php" target="_blank" title="php">php</a></li> <li><a href="https://www.php1.cn/tag/seo" target="_blank" title="seo">seo</a></li> <li><a href="https://www.php1.cn/tag/tomcat" target="_blank" title="tomcat">tomcat</a></li> <li><a href="https://www.php1.cn/tag/扩展" target="_blank" title="扩展">扩展</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了