https://www.w3school.com.cn/html5/att_input_type.asp
标记5的为新增的
目标
- 新增input输入类型(掌握)
- 文件和多媒体(掌握)
- 新增加的表单属性（了解）
- 新增的表单元素（datalist）
html5新增表单类型
13个
search：圆角文本框 safari浏览器和Chrome浏览器 输入后带删除标志
email：邮箱 -带验证 @
url：网址 -带验证 http:// https:// ftp://
number：数字-带验证 包含小数点
tel：电话 -不带验证，移动端打开数字键盘
range：滑动条
color：颜色 可以选
时间|日期
time：时间
date：日期
datetime:日期加时间（大多数浏览器不支持，safari支持）
datetime-local：本地日期加时间（大多数浏览器支持,用它）
month:月
week：年份和周数
其中：number|range和时间|日期类型的支持以下属性设置：
min-最小值
max-最大值
step-步长
value-默认值
time默认时分，step=1时显示秒
例子：
<form>
搜索：<input type="search" name="search1"/><br>
请输入E-mail地址: <input type="email" name="user_email"/><br>
请输入网址: <input type="url" name="user_email"/><br />
请输入数值：<input type= "number" name="number" step="5" min= "1" max="20" value="0"/><br />
请输入电话号码：<input type= "tel" name= "tel1" ><br />
请输入数值(滑动条）：<input type= "range" name= "range1" min= "1" max= "30" ><br />
请选择一种颜色<input type="color" name="color1" ><br />
请选择或输入时间: <input type="time" name="time1"/><br />
请选择或输入时间: <input type="time" name="time2" step ="2" value="13:20:00" /><br />
请输入日期：<input type="date" name="date1"><br />
请输入月份：<input type="month" name="month1"/><br />
请输入年份和周数：<input type="week" name="week1"/><br />
<input type="submit" value="提交" />
</form>
其他：
file：可用于附件上传
image：图片显示 类似img
附件<input type="file"/>
image:<input type="image" name="image1" src="../../images/1.jpg" width="200" height="200"><br />
[<input type="image"> 和 <img> 用法区别]
<input type="image" src="xxx.gif" onclick="return dosubmit();">
会发生表单提交两次的现象，经常会造成表单元素被重复提交，数据库被写入异常！！
原因：：HTML 中 image的描述是“创建一个图像控件，该控件单击后将导致表单立即被提交。”。
请 尽量 少用<input type="image">以免造成不必要的异常！！！
video audio
<body>
视频：<video src="../video/2.mp4" autoplay controls ></video><br>
音频：<audio src="../video/2.mp4" autoplay controls loop ></audio>
</body>
表单元素
<datalist> 掌握:可以选择，也可以输入,缺点是firefox里不支持value
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<keygen> 新标准中已废弃，浏览器支持不好
<output> 了解-浏览器支持不好
表单属性
<form>新属性：
autocomplete
novalidate
<input>新属性：
placeholder() :提示
autofocus():自动获取焦点
autocomplete()：必须曾经提交过，必须有name属性 autocomplete="on|off"
required()：必须输入
pattern (regexp)()：正则验证 pattern="^(+86)?1\d{10}$"
multiple():file时多文件 email时多邮箱用逗号分隔 a@a.com,b@b.com
min 与 max()
step()
form(*):表单元素属于哪个form，有表单的id绑定，利于排版
form的这些不常用，建议了解。
formaction
formenctype
form 默认：enctype="application/x-www-form-urlencoded" 普通文本类型，可以带文件
form表单里如果想上传文件（表单里有input type=file） 那么 enctype="multipart/form-data"
formmethod（get/post）
formnovalidate
formtarget (在哪儿打开)
height 与 width
list ：配合datalist用
新增表单事件
这些事件，未来会与js配合使用
oninput:内容改变时触发
onkeyup:键盘弹起时触发
oninvalid:验证不通过时触发
<body>
<form id="form1">
手机号：<input id="mobile" type="text" pattern="^1\d{10}$" >
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
document.getElementById("mobile").oninvalid=function(){
//改变默认提示信息
this.setCustomValidity("请输入手机号");
}
</script>
</body>
进度条
progress:有max value属性
meter:度量器 high:高值 low：低值 max min value:当前值
<progress max="100" value="60"></progress><br>
高<meter high="80" low="30" max="100" value="90"></meter><br>
中<meter high="80" low="30" max="100" value="40"></meter><br>
低<meter high="80" low="30" max="100" value="20"></meter><br>
语义元素
详见结构标签
https://www.runoob.com/html/html5-semantic-elements.html
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>
h5新增加和废弃的标签
https://www.cnblogs.com/yjxFive/p/9145577.html
filedset
组合表单中的相关元素：
<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>
