HTML5表单元素详解-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_21250/article/details/82338341

[size=large][b]表单元素类型[/b][/size]
常用：tel, email, date, url, search, range, datetime

[color=olive][b]Chrome26.0浏览器下测试[/b][/color]
email: 只做最基本的校验 *@*.*
url: 链接类型的判断 *:*（居然只做冒号的校验，输入a:a可正常提交
date: chrome日期类型控件
[img]http://dl.iteye.com/upload/attachment/0083/6544/c2c56802-a6b9-3dc8-921b-0fd5f1da71a5.jpg[/img]
time: 支持小时和分钟的显示
week: 一年中的第几周, value表示为2013-W16（一年中的第16周）
month: 一年中的第几月, value表示为2013-04
tel: chrome浏览器暂未支持tel标签，应该是有手机和固话的原因
range: range支持是1-100的显示
search: search类型，支持点叉叉，将已有文本删除
color: 颜色选择
number: 控件右边提供加，减按钮，可以对数值进行加减
datetime-local: 日期时间组件，可同时选择日期和日间

浏览器根据不同的元素类型决定相应的展现面板，比如日期时间，需要下拉日历及时间等，同时需要对其进行校验

测试代码：


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Html5 Form 表单测试</title>
</head>
<body>
    <form action="aa.co" method="get">
        <span>Email类型：</span><input type="email" name="email"><br/>
        <span>Url类型：</span><input type="url" name="url"><br/>
        <span>Date类型：</span><input type="date" name="date_begin"><br/>
        <span>Tel类型：</span><input type="tel" name="tel"><br/>
        <span>Range类型：</span><input type="range" name="range" value="8"><br/>
        <span>Search类型：</span><input type="search"><br/>
        <span>Time类型：</span><input type="time"><br/>
        <span>Week类型：</span><input type="week" id="week"><br/>
        <span>Month类型：</span><input type="month" id="month"><br/>
        <span>Color类型：</span><input type="color"><br/>
        <span>Number类型：</span><input type="number"><br/>
        <span>DateTime类型：</span><input type="datetime-local"><br/>
        <button type="submit">提交</button>
    </form>
</body>
</html>

[size=large][b]新属性[/b][/size]
常用：

placeholder：在html5中这个非常的有用，旧的实现用一个浮层div盖在input元素上面

autocomplete：表单输入自动提示，若你要自己做自动提示组件，则autocomplete属性要设置成false或者是off

required：有输入值才能提交表单

不常用：

autofocus

list和datalist

min和max

step

valueAsNumber

[size=large][b]表单验证[/b][/size]
required

maxLength

minLength

min

max

表单验证，涉及用户交互，系统行为，表单本身不宜涉及太多，现有很多校验代码，API抽象也不错，可以直接使用，暂时没有必要部分依赖于html5的表单校验

参考：
[url=http://www.yiiyaa.net/1350]HTML5之表单新功能详解[/url]

HTML5 Forms