https://www.w3school.com.cn/html5/att_input_type.asp
標記5的為新增的
目標
新增input輸入類型(掌握)
文件和多媒體(掌握)
新增加的表單屬性（了解）
新增的表單元素（datalist）
html5新增表單類型
13個
search：圓角文本框? safari瀏覽器和Chrome瀏覽器? 輸入后帶刪除標志
email：郵箱 -帶驗證 @
url：網(wǎng)址 -帶驗證 http:// https:// ftp://
number：數(shù)字-帶驗證 包含小數(shù)點
tel：電話 -不帶驗證诱桂，移動端打開數(shù)字鍵盤
range：滑動條
color：顏色 可以選
時間|日期
time：時間
date：日期
datetime:日期加時間（大多數(shù)瀏覽器不支持捷雕，safari支持）
datetime-local：本地日期加時間（大多數(shù)瀏覽器支持,用它）
month:月
week：年份和周數(shù)
其中：number|range和時間|日期類型的支持以下屬性設置：
min-最小值
max-最大值
step-步長
value-默認值
time默認時分只祠，step=1時顯示秒
例子：
<form>搜索：<inputtype="search"name="search1"/><br>請輸入E-mail地址:<inputtype="email"name="user_email"/><br>請輸入網(wǎng)址:<inputtype="url"name="user_email"/><br/>請輸入數(shù)值：<inputtype="number"name="number"step="5"min="1"max="20"value="0"/><br/>請輸入電話號碼：<inputtype="tel"name="tel1"><br/>請輸入數(shù)值(滑動條）：<inputtype="range"name="range1"min="1"max="30"><br/>請選擇一種顏色<inputtype="color"name="color1"><br/>請選擇或輸入時間:<inputtype="time"name="time1"/><br/>請選擇或輸入時間:<inputtype="time"name="time2"step="2"value="13:20:00"/><br/>請輸入日期：<inputtype="date"name="date1"><br/>請輸入月份：<inputtype="month"name="month1"/><br/>請輸入年份和周數(shù)：<inputtype="week"name="week1"/><br/><inputtype="submit"value="提交"/></form>
其他：
file：可用于附件上傳
image：圖片顯示 類似img
附件<inputtype="file"/>image:<inputtype="image"name="image1"src="../../images/1.jpg"width="200"height="200"><br/>
[<input type="image"> 和 <img> 用法區(qū)別]
<input type="image" src="xxx.gif" onclick="return dosubmit();">
會發(fā)生表單提交兩次的現(xiàn)象惠豺，經(jīng)常會造成表單元素被重復提交叠蝇，數(shù)據(jù)庫被寫入異常５泳谩！
原因：：HTML 中 image的描述是“創(chuàng)建一個圖像控件惕鼓，該控件單擊后將導致表單立即被提交筋现√拼。”箱歧。
請 盡量 少用以免造成不必要的異常！Ｒ慌颉呀邢！
video audio
<body>視頻：<videosrc="../video/2.mp4"autoplaycontrols></video><br>音頻：<audiosrc="../video/2.mp4"autoplaycontrolsloop></audio></body>
image.png
表單元素
<datalist> 掌握:可以選擇，也可以輸入,缺點是firefox里不支持value
Webpage:<inputtype="url"list="url_list"name="link"/><datalistid="url_list"><optionlabel="W3School"value="http://www.W3School.com.cn"/><optionlabel="Google"value="http://www.google.com"/><optionlabel="Microsoft"value="http://www.microsoft.com"/></datalist>
新標準中已廢棄豹绪，瀏覽器支持不好
了解-瀏覽器支持不好
表單屬性
新屬性：
autocomplete
novalidate
新屬性：
placeholder() :提示
autofocus(
):自動獲取焦點
autocomplete()：必須曾經(jīng)提交過价淌，必須有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:內容改變時觸發(fā)
onkeyup:鍵盤彈起時觸發(fā)
oninvalid:驗證不通過時觸發(fā)
<body><formid="form1">手機號：<inputid="mobile"type="text"pattern="^1\d{10}$"><inputtype="submit"value="提交"/></form><scripttype="text/javascript">document.getElementById("mobile").oninvalid=function(){? ? ? ? ? ? //改變默認提示信息? ? ? ? ? ? this.setCustomValidity("請輸入手機號");? ? ? ? }</script></body>
進度條
progress:有max value屬性
meter:度量器 high:高值 low：低值 max min value:當前值
<progressmax="100"value="60"></progress><br>高<meterhigh="80"low="30"max="100"value="90"></meter><br>中<meterhigh="80"low="30"max="100"value="40"></meter><br>低<meterhigh="80"low="30"max="100"value="20"></meter><br>
image.png
語義元素
詳見結構標簽
https://www.runoob.com/html/html5-semantic-elements.html
h5新增加和廢棄的標簽
https://www.cnblogs.com/yjxFive/p/9145577.html
filedset
組合表單中的相關元素：
health information
height:
weight:
轉至：↓
鏈接：http://www.reibang.com/p/652e6aabada5
來源：簡書
著作權歸作者所有濒翻。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處啦膜。
