1. 程式人生 > >html5 表單的新增type屬性

html5 表單的新增type屬性

提示 表單 name屬性 則表達式 red 最小值 數字 電子郵箱 time

<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>


<!--表單中新增的其他屬性-->
<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)?1\d{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">

html5 表單的新增type屬性