HTML5新增标签属性

----- 新类型表单

- email
自动校验输入的是不否是email

邮箱：<input type="email" name="user_email" />

- url
自动将提交数据变为Url

我的主页：<input type="url" name="user_url" />

- number
输入数字

金额：<input type="number" name="points" min="1" max="100" />

属性 类型 描述
------------------------------------
max number 最大值
min number 最小值
step number 步进修改值
value number 初始值

- range
选择一个范围内的数字,类似滑动条

<input type="range" name="points" min="1" max="10" />

属性 类型 描述
------------------------------------
max number 最大值
min number 最小值
step number 步进修改值
value number 初始值

- Date Pickers
用于日期选择

date - 选择 日期、月、年
month - 选择 月、年
week - 选择 周、年
time - 选择 时间(小时、分钟)
datetime- 选择 时间、日期、月、年(UTC 时间)
datetime-local - 选择 时间、日期、月、年(本地时间)

- search
搜索内容

<input type="search" name="user_search" />

- color
选择一种颜色，以RGB方式记录显示

颜色：<input type="color" name="user_color" />

--------- Forms的新属性

- Autofocus 页面加载后,自动获得焦点
<input type="search" name="query" autofocus />

- Placeholder 用于设置示例 值
<input type="email" name="email" placeholder="xgao@qq.com" />

- Required 表示该值不能为空
<input type="text" name="UserName" required />

--------- 新属性

属性 值 描述
------------------------------------------------------
autocomplete on/off 是否自动补完这一文本框
autofocus autofocus 是否自动设置焦点,如果类型是hidden内里不可用
form 表单名 说明一个文本框属于某一个form
formaction URL 文本框将要被提交到哪里去
fromenctype apliction 指定发送的时候的编码方式
x-www-form-urlencoded multipart
form-data
plain
formmethod post/get 指定提交方式
formtarget _blank/_self 提交结果显示位置
_parent/_top
framename(框架名)
heigth Pixels/% 设置元素的高度,可用像索和百分比
width Pixels/% 定义图片的宽度
list datalist-id 输入选择项
multiple multiple 允许多项
pattern 正则表达式 pattern="[0-9]",用正则格式化输入

--------- 新标签

- meter 为了显示进度

<meter value="2" min="0" max="10">输入0到10</meter>
<meter value="0.6">60%</meter>

包含属性：Form/High/Low/Max/Min/Optimum/value

- progress 显示进度条

<progress value="22" max="100" ></progress>

- datalist 自动实现下拉选择输入(如百度搜索)
<input list="cars"/>
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>

- keygen 加密传输数据

用户名：<input type="text" name="user_name" />
Encryption：<keygen name="security" />
<input type="submit" />

KeyType属性,rsa 也可以是其它加密方式

- OutPut 自动提交计算结果

<input name="a" type="number"> + <input name="b" type="number"> =
<output name="result" onforminput="value=a.valueAsNumber + b.valueAsNumber"></output>

----- 客户端脚本数据校验

- Require 属性
<input type="email" name="email" required />

- checkValidity函数
<input type="email" name="email" onchange="this.checkValidity();" />

- setCustomValidity() 自定义函数