[TOC] # 新增表單類型 #### email類型： ? 輸出內容必須為郵箱 示例： <input type="email" /> #### url類型： ? 輸出內容必須為url 示例： <input type="url" /> #### number類型： ? 輸入數值的文本框 示例： <input type="number" min="1" max="10" step="2"/> min:最小值 max:最大值 step:間隔 #### range類型： ? 指定范圍內的數字，表示形式為滑塊 示例： <input type="range" name="range" min="1" max="11" step="2"/> min:最小值 max:最大值 step:間隔 # 日期類型表單 ? date：日期文本框 ? week：星期文本框 ? time：時間文本框 ? datetime-local：日期時間文本框 ? search：搜索文本框 ? tel：電話文本框 ? color：顏色文本框 #### datelist標簽 datalist： ? 定義選項列表，用于輸入自動匹配 示例： <form action="1.php" method= "post"> <input type= "text" name= "city" list= "citylist"> <datalist id= "citylist" > <option value="beijing">北京</option> <option value= "nanjing">南京</option> <option value= "guandong">廣東</option> </datalist> </form> #### autofocus標簽 autofocus： ? 自動獲取焦點 示例： <form action="1.php" method="post" > <input type="name" autofocus="on"> <input type="submit"> </form> #### form屬性 form屬性： ? 提交form標簽以外的表單 示例： <form id="form" action="1.php" method="post”> <input type="text" name="city"> <input type="submit"> </form> <input type="number" name="age" form="form"/> #### 多文件上傳multiple屬性 multiple屬性： ? 設置multiple后可以設置多個文件 示例： <form action="1.php" method="post" enctype="multipart/form-data"> <input type="file" name="file[]" multiple="multiple"> <input type="submit"/> </form> 會自動調取手機拍照或圖片庫選項 #### 表單提示placeholder placeholder屬性： ? 設置文本框提示信息 示例： <form action="1.php" method="post"> <input type="text" name="title" placeholder="請輸入標題"> <input type="submit"/> </form> #### 表單驗證pattern屬性 pattern屬性： ? 通過正則表達式驗證表單 示例： <form action="1.php" method="post"> <input type="text" name="title" pattern="[1|0]" title="請輸入1或0"> <input type="submit"/> </form> #### 表單驗證required屬性 表單驗證required屬性 ? 表單內容不能為空 示例： <form id="form" action="1.php" method="post"> <input type="text" name="title" required title="標題不能為空"> <input type="submit"/> </form>