HTML5对表单有了极大的增强，不仅加了很多表单属性而且加了许多类型的表单元素，
下面例子就对所有新增的表单属性和表单元素做了一个演示
- <!DOCTYPE html>
- <head>
- <link rel="stylesheet" href="css/common.css" type="text/css">
- <script type="text/javascript" src="js/validateform.js"></script>
- <meta charset="UTF-8">
- <title>HTML5 表单DEMO</title>
- </head>
- <h3>Part1：新增的input 元素的属性</h3><br>
- <form method="post" action="action1.jsp">
- <!-- 文本框的placeholder(占位符）属性，这个属性可以用于未输入状态时的文本提示 -->
- 实验1：demo 文本框的placeholder属性，这个属性可以用于未输入状态时的文本提示 <br>
- 输入textfield:<input type="text" placeholder="请输入内容到文本框" />
- <br><br>
- <!-- autofocus可以让页面打开时，这个控件自动获得焦点 -->
- 实验2：demo autofocus属性，这个属性可以让某控件自动获得焦点<br>
- 输入搜索文本:<input type='search' autofocus/>
- <br><br>
- <!-- list属性可以和datalist配合起来使用，当用获得焦点时候可以让给用户提示，否则让用户自己输入内容 -->
- 实验3：demo list属性，这个属性可以和datalist配合，当用户获得焦点时候给用户提示<br>
- 输入文本（有提示哦）：<input type="text" name="charles" list="charles info" >
- <datalist id="charles info" stype="display:none;">
- <option value="charles wang">charles wang</option>
- <option value="charles_wang888">charles_wang888</option>
- <option value="charles王子">charles王子</option>
- </datalist>
- <br><br>
- </form>
- <hr>
- <h3>Part2：新增的input 元素的类型</h3><br>
- <form method="post" action="action2.jsp">
- <!-- url类型表明专门输入url的文本框,必须是协议名+地址，否则提示报错-->
- 输入url: <input name="url1" type="url" size="60" value="http://www.sina.com.cn"/>
- <br><br>
- <!-- email类型表明专门输入邮箱地址 -->
- <!-- 注意，每个元素都可以用pattern，来使用正则表达式来校验输入，比如我这里就给出了邮箱地址的正则表达式 -->
- 输入邮箱地址:<input name="email1" type="email" size="60" value="charles_wang888@126.com" pattern="^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$"/>
- <br><br>
- <!-- datetime类型可以输入UTC日期和时间,并且进行有效性检查，这个Opera支持，Firefox不支持-->
- 选择大好时间：<input name="datetime1" type="datetime" required="true"/>
- <br><br>
- <!-- number 类型可以输入数字，可以上下箭头选择增减，并且进行校验 -->
- 输入数字:<input name="number1" type="number" value="25" min="10" max="25" step="5"/>
- <br><br>
- <!-- range类型可以输入一定范围内的数值，具有最小值和最大值 ，可以设定 ，值用滑动条指定-->
- 选择数值：<input name="range1" type="range" value="25" min="0" max="100" step="5"/>
- <br><br>
- <input type="submit"/>
- </form>
最后效果图是：
部分控件比如<date> <datetime> <range>控件在Firefox 11上不支持，所以我的截图是用的Opera 11浏览器的截图
本文转自 charles_wang888 51CTO博客，原文链接：http://blog.51cto.com/supercharles888/853312，如需转载请自行联系原作者
