html5--- 新增type 屬性 · 前端速查手冊

[TOC] >[success] # 新引入的type 屬性 ~~~ 1.必須提交才能出發 2.只支持ie9往上的瀏覽器 ~~~ | 標簽 |描述 | | --- | --- | | email | html5 中新增的郵箱-驗證 | | tel | tel它并不是來實現驗證。它的本質目的是為了能夠在移動端打開數字鍵盤 | |url | 驗證只能輸入合法的網址：必須包含http:// | | number | 只能輸入數字(包含小數點)，不能輸入其它的字符，max:最大值，min:最小值，value:默認值 | | search | 以提供更人性化的輸入體驗多一個刪除input框內容按鈕 | | range | 范圍輸入條:范圍 max 最大值，min 最小值，value默認值不填寫默認中間 | | color | color選擇顏色 | | time | 時間：時分秒| | data | 日期：年月日 | | datetime | 大多數瀏覽器不能支持datetime.用于屏幕閱讀器- | | datetime-local | 期和時間 | | month | 月份 | | week | 一年中的第幾周 | >[danger] ##### 案例 ![](https://box.kancloud.cn/65c6345f8e437f08667cec191f77684e_355x432.png) ~~~ html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> header{ display: block; width: 100%; height: 100px; background-color: red; } </style> </head> <body> <form action="">   文本：<input type="text"> <br> 密碼：<input type="password"> <p>分割線</p>  郵箱：<input type="email"> <br>  電話：<input type="tel"> <br>  網址：<input type="url"> <br>  數量：<input type="number" value="60" max="100" min="0"> <br>  請輸入商品名稱：<input type="search"> <br>  范圍：<input type="range" max="100" min="0" value="50"> <br> 顏色：<input type="color"> <br>  時間：<input type="time"> <br>  日期：<input type="date"> <br>  日期時間：<input type="datetime"><br>  日期時間：<input type="datetime-local"> <br> 月份：<input type="month"> <br> 星期：<input type="week"> <input type="submit"> </form> <script src="../js/html5shiv.min.js"></script> </body> </html> ~~~