

4.1.1 email类型的应用
专门用于输入email的输入框,不是有效值,不允许提交,以前是用input框,再用js脚本验证是否合法的email地址
<input type="email" #就是这样设为email类型
4.1.2 url类型的应用
用以输入url地址,不是url不允许提交数据,否则会弹出提示不是有效的url
<input type="url" #不支持url的浏览器以普通文本框显示
4.1.3 number类型的应用
提供用以输入数字的文本框,可以数据进行限制
<input type="number" min="1" max="20" step="4" value="12" #最小值,最小值,步长 默认值
要兼容不同浏览器最好还是用文本框,再用脚本来控制
4.1.4 range类型的应用
提供用以包含一定范围数值的值,显示为一个滑动条,最大值,最小值,默认间隔,默认值
<input type="range" min="1" max="20" step="4" value="12" #最小值,最小值,步长 默认值
#通过进度条控制值,步长是每次拖动增加多少
4.1.5 日期检出器类型的应用
网页中经常用的控件,h5以前没有这个控件,只能通过js来设计
选择和控制日期的插件
date,month,week, time,datetime, datetime-local 选择日月年/月年/周年,。。。。
#出弹出一个选择日期的小窗口,貌似很多浏览器都不支持这个功能
如:<input type="time"
4.1.6 search类型的应用
提供用于输入搜索关键词的,外观和普通的输入框差不多
目前大多数用的是<input type="text"
html5用的是<input type="search"
#你输出内容后,框右边有个叉,点可清除输入内容,输入后会记录,下次可以快捷输入
input[type="search"]{
-webkit-appliearance; textfield;
}
4.1.7 tel类型的应用
提供用于输入电话号码的文本框
<input type="tel"
表面上和普通输入框一样,但只能输入电话号码,可有小括号,连字符-
所有都支持tel,不支持时会作用普通框显示
4.1.8 color类型的应用
提供用来选择颜色的文本框
<input type="color"
#点击后会弹出一个颜色选择框,同ps软件的选择颜色的框差不多
4.2.1 新增的autocomplete属性
输入相同内容时浏览器自动完成,
用以帮助用户的输入框完成自动输入
<input type="color" autocomplete="off" #目前只有部分浏览器支持,为on表开启
form也用添加autocomplete="on"才有效
如下拉菜单 以前是用js脚本实现
<input type="text" id="city" list=""
4.2.2 新增autofocus属性
自动获取焦点,不用去点,如搜索页面的框,以前也用js
<input type="submit" autofocus="on" #回车直接就是点了按钮
设在最需要设置焦点的按钮上,不要同时设到多个按钮上
如果要使用所有浏览 器都能获取焦点还是要用到js脚本
<script>
if (!("autofocus" in document.createElement("input"))) { #判断浏览器是否支持autofocus这个属性
document.getElementById("s").focus();
}
</script>
#上面代码的作用是判断浏览器是否支持自动焦点,不支持通过手动方式设置焦点
4.2.3 新增的form属性
以前是把表单对象放在form元素内,h5新增了form属性,
表单对象可以页面任何位置,只要将将form属性设为表单名即可
<input type="submit" autofocus="on" form="form1"
4.2.4 新增表单重写属性
插入一个表单,要要求填写,操作到要提交到服务器那个文件,方法post,编码类型,目标_self
formaction 重写表单的action属性,就是修改提交到服务器那个页面去
formenctype 重写表单的enctype属性
formmethod 重写表单的method属性
。。。
单击不同的按钮提交到服务器不同的文件
4.2.5 新境的height和width属性
图像宽和高,适用imput的type="image"标签 以前用css控制
<input type="image" height="" width=""
4.2.6 新增的list属性
新增的元素,为输入框提供可选的项
<input type="url" list="url_list"/>
<datalist id="url_list">
<option>...</option>
</dataist>
适用 于,搜索,email,tel,color等文本框
4.2.7 新增的min,max和step属性
主要用以对包含数字和日期的输入框加上限制
规定输入框的最小值,最大值,数字间隔,间隔间的数字是输入不了的
4.2.8 新增的multiple属性
一次只提交一个,
<input type="file" multiple="multiple" #一次可以上传多个
同时提交多个文件,有提浏览支持,有的不支持
4.2.9 新增的pattern属性
用来验证输入框与预定的是否匹配
<input type="text" pattern="[0-6]{6}" #用正则表达式来验证, 以前用js
4.2.10 新增的placeholder属性
用来为input输入进行提示
<input type="text" pattern="[0-6]{6}" placeholder="请输入邮编"
提示信息会显示在输入框中,以前也用js实现
4.2.11 新增的required属性
用来定义输入框不能为空,否则不能提交
4.3.1 新增的datalist元素
用来为输入框提供可选的例表
<datalist id="url_list">
<option>列表内容
</datalist>
#把输入框的list绑定到datalist的id
4.3.2 新增的keygen元素
是密钥对验证,会生成公钥和私钥,共钥会传到服务器保存
密钥对生成器
不同浏览器支持不同
4.3.3 新增的output元素
显示输出结果,用output来接收显示脚本计算的值
<script type="text/javascript">
function multi(){
a=parseInt(prompt("请输入第1个数字",0)); //让用户输入一个数
b=parseInt(prompt("请输入第2个数字",0));
document.forms["form"]["result"].value=a*b; //把a*b的值给form表单中name为result的元素,forms是document的一个集合
}
</script>
<body onload="multi()"> //在页面初始化时调用这个函数
<form action ="/textfrom.asp" method="get" name = "form">
两数的乘积为:<output name="result"></output>
</form>
4.4.1 新增的autocomplete属性
form元素的一个属性,规定表单所有元素都有自动完成属性,每个表单元素也可以有这个元素,值包括on和off
4.4.2 新增的novalidate属性
这个是form的属性,关闭所有表单元素的有效性验证,在提交时关闭
<form action ="/textfrom.asp" method="get" name = "form" novalidate="true">
关闭后如email如果输错将不能提交,也可单独为某个项开启验证
<input type="email" formnovalidate="true"