首页 > 代码库 > HTML5新增标签属性
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="http://www.mamicode.com/2" min="0" max="10">输入0到10</meter>
<meter value="http://www.mamicode.com/0.6">60%</meter>
包含属性:Form/High/Low/Max/Min/Optimum/value
- progress 显示进度条
<progress value="http://www.mamicode.com/22" max="100" ></progress>
- datalist 自动实现下拉选择输入(如百度搜索)
<input list="cars"/>
<datalist id="cars">
<option value="http://www.mamicode.com/BMW">
<option value="http://www.mamicode.com/Ford">
<option value="http://www.mamicode.com/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=http://www.mamicode.com/a.valueAsNumber + b.valueAsNumber"></output>
----- 客户端脚本数据校验
- Require 属性
<input type="email" name="email" required />
- checkValidity函数
<input type="email" name="email" onchange="this.checkValidity();" />
- setCustomValidity() 自定义函数
HTML5新增标签属性