HTML5-新增type屬性
- 2019 年 10 月 10 日
- 筆記
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> 用戶名：<input type="text" name="userName"> <br> 密碼：<input type="password" name="userPwd"> <br> <!--email提供了默認的電子郵箱的完整驗證：要求必須包含@符號，同時必須包含服務器名稱，如果不能滿足驗證，則會阻止當前的數據提交--> 郵箱：<input type="email"> <br> <!--tel它並不是來實現驗證。它的本質目的是為了能夠在移動端打開數字鍵盤。意味着數字鍵盤限制了用戶只能輸入數字。 如何查看效果：qq發送文件>>手機端使用qq來接收>>使用手機瀏覽器查看--> 電話：<input type="tel"> <br> <!--驗證只能輸入合法的網址：必須包含http://--> 網址：<input type="url"> <br> <!--number：只能輸入數字(包含小數點)，不能輸入其它的字符 max:最大值 min:最小值 value:默認值--> 數量：<input type="number" value="60" max="100" min="0"> <br> <!--search：可以提供更人性化的輸入體驗--> 請輸入商品名稱：<input type="search"> <br> <!--range:範圍--> 範圍：<input type="range" max="100" min="0" value="50"> <br> 顏色：<input type="color"> <br> <!--日期時間相關--> <!--time:時間：時分秒--> 時間：<input type="time"> <br> <!--date：日期：年月日--> 日期：<input type="date"> <br> <!--datetime:大多數瀏覽器不能支持datetime.用於屏幕閱讀器--> 日期時間：<input type="datetime"><br> <!--datetime-local:日期和時間--> 日期時間：<input type="datetime-local"> <br> 月份：<input type="month"> <br> 星期：<input type="week"> <!--提交--> <input type="submit"> </form> </body> </html>
其他屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" id="myForm"> <!--placeholder：提示文本，提示佔位--> <!--autofocus:自動獲取焦點--> <!--autocomplete:自動完成：on:打開 off:關閉 1.必須成功提交過:提交過才會記錄 2.當前添加autocomplete的元素必須有name屬性--> 用戶名：<input type="text" name="userName" placeholder="請輸入用戶名" autofocus autocomplete="on"> <br> <!--tel並不會實現驗證，僅僅是在移動端能夠彈出數字鍵盤--> <!--required:必須輸入，如果沒有輸入則會阻止當前數據提交--> <!--pattern:正則表達式驗證 *:代表任意個 ?:代表0個或1個 +：代表1個或多個--> 手機號：<input type="tel" name="userPhone" required pattern="^(+86)?1d{10}$"> <br> <!--multiple：可以選擇多個文件--> 文件：<input type="file" name="photo" multiple> <br> <!--email:有默認驗證 在email中，multiple允許輸入多個郵箱地址，以逗號分隔--> 郵箱：<input type="email" name="email" multiple><br> <!--提交：--> <input type="submit"> <br> </form> <!--下面這個表單元素並沒有包含在form中：默認情況下面表單元素的數據不會進行提交--> <!--form:指定表單id,那麼在將來指定id號的表單進行數據提交的時候，也會將當前表單元素的數據一起提交--> 地址：<input type="text" name="address" form="myForm"> </body> </html>
