html5 表单标签

本文主要介绍新增表单标签

1.新型Email类型input标签:

<input type="email" placeholder="请输入注册邮箱" name="email" ><br>

其中，如果类型是email，浏览器会自动校验邮箱正确性。

 2.只能输入数字的Number类型input标签:

<input type="number" name="number" placeholder="请输入数字" min="0" max="50" step="2"><br>

为number类型时只能输入数字，placeholder，为输入框提示信息，可以设置最大值最小值，step是步长的意思，也就是在点击增大或者减小的时候的增加减少的步长。       

 3.新型Url类型input标签:

<input type="url" name="url" placeholder="请输入网址"><br>

 4.新型Tel类型input标签:

<input type="tel" name="tel" placeholder="请输入手机号"><br>

5.新型range类型input标签:搭配output使用实现联动效果 <form action="" method="post" id="form1" oninput="x.value=parseInt(rangef.value)"> <input type="range" id="rangef" min="0" max="100" step="20"> <output name="x" for="rangef"></output><br>  </form>

oninput中是要执行的JavaScript语句，相关 实例可以查看W3C文档。         6.新的日期、时间、月份、星期input标签:

<input type="date" name="date"><br>

个人认为这个标签非常实用，它可以自动显示日历选择日期。

颜色选择input标签:

<input type="color" name=""><br>

input标签自动完成功能:

<input type="text" autocomplete="on" name="" list ="autoName">    <datalist id="autoName">    <option value="java"></option>    <option value="php"></option>    <option value="jsp"></option>    </datalist><br>

autocomplete值为on时启用标签自动补全功能，list可以设置自动补全的列表。7.提交文件:

<input type="file" name="img" multiple="multiple">

其中，multiple可以设置选择文件是否可以为多个。                                                                                                                以下是一个综合的注册表单，通过HTML5新特性可以直接用HTML标签完成原来需要JavaScript才能完成的功能，极大地缩减了代码量，提高了可读性。

<form action="" method="post"> <div id="form"> <table> <tr> <td>用户名：</td> <td><input type="text" placeholder="请输入用户名" autofocus="autofocus" required pattern="a{5,}"></td>             </tr> <tr> <td>密码:</td> <td><input type="password" placeholder="请输入密码" autofocus="autofocus" required="required" name=""></td> </tr> <tr> <td>联系方式：</td> <td><input type="tel" placeholder="请输入手机号" required="required" name=""></td> </tr> <tr> <td>邮箱：</td> <td><input type="email" placeholder="请输入注册邮箱" required="required" name=""></td> </tr> <tr> <td>出生日期：</td> <td><input type="date" name="date"></td> </tr> <tr> <td> <input type="submit" name="" value="提交"> <input type="reset" name="" value="重置"> </td> </tr> </table> </div> </form>

效果图：

参考文章：http://www.cnblogs.com/fly_dragon/archive/2012/05/27/2519951.html