一、H5 新增控件
1、datalist 元素
datalist 标签定义选项列表,请与 input 元素配合使用该元素。可为输入框提供一个可选的列表,可以直接选择列表项,也可以不选择列表中的项,自行输入其他内容。
在使用 datalist 的列表要绑定到输入框,需要使用输入框的 list 属性来引用 datalist 元素的 id 。
案例:
<input type="text" value="输入明星" list="star"/> <!-- input里面用 list -->
<datalist id="star"> <!-- datalist 里面用 id 来实现和 input 链接 -->
<option>刘德华</option>
<option>刘若英</option>
<option>刘晓庆</option>
<option>郭富城</option>
<option>张学友</option>
<option>郭郭</option>
</datalist>
2、Keygen 元素
<keygen>
标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器
3、output 元素
output 元素用于在浏览器中显示计算结果或脚本输出,包含完整的开始和结束标签。
语法:
<output name="">Text</output>
二、H5 新增输入属性
类型 使用示例 含义
email <input type="email"> 输入邮箱格式
tel <input type="tel"> 输入手机号码格式
url <input type="url"> 输入url格式
number <input type="number"> 输入数字格式
search <input type="search"> 搜索框(体现语义化)
range <input type="range"> 自由拖动滑块
time <input type="time"> 小时分钟
date <input type="date"> 年月日
datetime <input type="datetime"> 时间
month <input type="month"> 月年
week <input type="week"> 星期 年
color <input type="color"> 拾色器
注意:老式 web 浏览器不支持的输入类型,会被视为输入类型 text。
三、H5 新增输入属性
属性 用法
placeholder <input type="text" placeholder="请输入用户名"> 占位符 当用户输入的时候 里面的文字消失 删除所有文字,自动返回
autofocus <input type="text" autofocus> 规定当页面加载时 input 元素应该自动获得焦点
multiple <input type="file" multiple> 多文件上传
autocomplete <input type="text" autocomplete="off">
规定表单是否应该启用自动完成功能 有2个值,一个是on 一个是off
on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字
required <input type="text" required> 必填项 内容不能为空
accesskey <input type="text" accesskey="s"> 规定激活(使元素获得焦点)元素的快捷键 采用 alt + s的形式
更多的标签学习请参考这里:http://www.w3school.com.cn/html/index.asp