新增表單控件

1、email ——電子郵箱文本框

描述：

（1）當輸入不是郵箱的時候，驗證通不過

（2）移動端的鍵盤會有變化，英文鍵盤

<form>
    <input type="email" />
    <input type="submit" /> 按鈕
</form>

 

2、tel ——電話號碼

描述：沒有驗證信息，移動端鍵盤會變成數字的

<form>
    <input type="tel" />
    <input type="submit" />
</form>

 

3、url——網頁的URL

描述：當輸入不是網址的時候，驗證通不過

<form>
    <input type="url" />
    <input type="submit" />
</form>

 

4、search —— 搜索引擎

描述：chrome下輸入文字後，會多出一個關閉的X

<form>
    <input type="search" />
    <input type="submit" />
</form>

 

5、range——數值選擇器

描述：min最小值、max最大值、step步數、value當前值

<form>
    <input type="range" step="2" min="0" max="10" value="2" />
    <input type="submit" />
</form>

 

6、number ——只能包含數字的輸入框

<form>
    <input type="number"/>
    <input type="submit" />
</form>

 

7、color ——顏色選擇器

<form>
    <input type="color"/>
    <input type="submit" />
</form>

 

8、datetime ——顯示完整日期

utc表示世界標準時間

<form>
    <input type="datetime"/>
    <input type="submit" />
</form>

 

9、datetime-local :——顯示完整日期，不含utc

<form>
    <input type="datetime-local"/>
    <input type="submit" />
</form>

 

10、time ——顯示時間

<form>
    <input type="time"/>
    <input type="submit" />
</form>

 

11、date  ——顯示日期

<form>
    <input type="date"/>
    <input type="submit" />
</form>

 

12、week  ——顯示周

<form>
    <input type="week"/>
    <input type="submit" />
</form>

 

十3、month ——顯示月

<form>
    <input type="month"/>
    <input type="submit" />
</form>

 

十4、placeholder ——輸入框提示信息

描述：輸入的時候提示信息消失

<form>
    <input type="text" placeholder="請輸入4-16個字符" />
    <input type="submit" />
</form>

 

十5、autocomplete —— 是否保存用戶輸入值

描述：不顯示用戶曾經輸入的信息。默認爲on，關閉提示選擇off

<form>
    <input type="text" placeholder="請輸入4-16個字符" name="user" autocomplete="off" />
    <input type="submit" />
</form>

 

十6、autofocus ——指定哪一個表單元素頁面一打開就獲取輸入焦點

<form>
    <input type="text" placeholder="請輸入4-16個字符" name="user" autocomplete="off" />
    <input type="password" placeholder="請輸入4-16個字符" name="password" autocomplete="off" autofocus />  //這個頁面一打開就獲取焦點
    <input type="submit" />
</form>

 

十7、required :——此項必填，不能爲空，不然不能提交有提示

<form>
    <input type="text" placeholder="請輸入4-16個字符" name="user" autocomplete="off" required />
    <input type="password" placeholder="請輸入4-16個字符" name="password" autocomplete="off" required />
    <input type="submit" />
</form>

 

十8、Pattern ——正則驗證

描述：有安全隱患，能夠經過F12刪除

<form action="http://www.baidu.com">
    <input type="text" placeholder="請輸入4-16個字符" name="user" autocomplete="off" pattern="\d{1,5}" />
    <input type="submit" value="提交" />
    <input type="submit" value="保存至草稿箱"/>
</form>

 

十9、Formaction ——在submit裏定義單獨的提交地址

<button type="submit" formaction="demo_admin.asp">以管理員身份提交</button>