第一部分：新增的input输入类型
· html5之前支持的输入类型
- text
- radio 单选按钮
- checkbox 多选
- select-option 下拉列表
- password 密码
- submit 提交
- button 按钮
- image 图片形式的提交按钮
- hidden 隐藏的输入字段
- reset 重置
- file 上传文件
· html5新增的输入类型
email类型，在email输入类型中，提交的时候会验证是不是邮箱
url类型，同上
number类型
<input type="number" min="1" max="50" value="0" step="2" name="">
运行效果
- range类型
<input type="range" min="1" max="30" value="10" step="2" name="">
运行效果
- 日期检出器类型
- date类型
<input type="date" name="">
运行效果
- month类型
<input type="month" name="">
运行结果
- week类型
<input type="week" name="">
运行结果
- time类型
<input type="time" step="5" value="12:05:30" name="">
运行效果
- search类型
<input type="search" name="">
运行结果
- tel类型：在电脑端是普通的输入框，在移动设备上，输入的时候键盘会切换为数字键盘。
-
color类型
<input type="color" name="">
运行效果
第二部分：新增的input属性
- autocomplete属性，用户下次输入相同的内容时，浏览器将会自动输入，另外在datalist中，可以根据用户输入内容实时更新列表。
<form autocomplete="on">
<input type="text" id="city" list="citylist" name="">
<datalist id="citylist">
<option>beijing</option>
<option>qingdao</option>
<option>shanghai</option>
</datalist>
</form>
运行结果
- autofocus属性，自动获得焦点的属性，谨慎使用，在指定autofocus的时候，要明确页面的主要目的是什么。
<input type="submit" autofocus="on" name="">
运行效果
有些浏览器可能对这个属性不支持，那么就要加入一段js来解决兼容问题。
<input type="submit" autofocus="on" id="submit1" name="">
<script>
if (!("autofocus" in document.createElement("input"))){
document.getElementById("submit1").focus();
}
</script>
- 新增的form属性：在H5之前，用户要提交一个表单，必须报相关的元素全部放在form便签之内，但是在h5中，这个问题得到了解决，form的灵活性大大提高，看了下面这个代码，你就知道怎么使用了！
<form action="#" method="get" id="form1">
请输入姓名： <input type="text" name="name1" autofocus="">
<input type="submit" name="submit1">
</form>
<!-- 在form1提交的时候，下面这个input也会一起呗提交 -->
请输入地址：<input type="text" name="address1" form="form1">
运行结果
- 新增的表单重写属性，表单重写属性不适用于所有的input输入类型，只适用于submit和image输入类型
- formaction：用于重写表单的action属性
- formenctype：用户重写表单的enctype属性
- formmethod：用于重写表单的methodshuxing
- formnovalidate：用于重写表单的novalidate属性
- formtarget：用于重写表单的target属性
例如：
<form action="1.asp">
<input type="email" name="">
<input type="submit" name="" formaction="1.asp">
<input type="submit" name="" formaction="2.asp">
</form>
- 新增的list属性：前面已经解释过
- 新增的min、max。step属性，前面也有介绍过
- 新增的multiple属性，表示多选，上传多个文件等。
<select multiple="">
<option>beijing</option>
<option>shanghai</option>
<option>shenzhen</option>
</select>
运行效果
<input type="file" multiple="">
以上表示可上传多个文件
- 新增的pattern属性，是一个正则表达式，可以对输入的内容进行正则验证
请输入6位邮政编码：
<input type="text" pattern="[0-9]{6}" name="">
运行结果
- 新增的require属性，表示必填项目。
第三部分：新增的form元素
新增的datalist元素
-
新增的keygen元素（不建议使用）：密钥对生成器。
运行结果（firefox中，chrome中没效果） 新增的output元素：用于在浏览器中显示计算结果或脚本输出，包含完整的开始和结束标签。
第四部分：新增的form属性
- 新增的autocomplete属性
- 新增的novalidate属性：用于取消表单提交时候的验证
