html5 表單
- 新增input類型
- 新增表單元素
- html5表單驗證
- 新增表單屬性
新增的input類型
input原有的type屬性值
- text(普通文本, 默認值)
- password(密碼框)
- radio(單選按鈕)
- checkbox(多選按鈕)
- file(文件上傳組件)
- button(普通按鈕)
- submit(提交按鈕)
- hidden(隱藏文本域)
input新增的type屬性值
- search(搜索框)
- email(郵件輸入框)
- url(url地址輸入框)
- tel(電話號碼輸入框)
- number(數字輸入框)
- range(滑動條)
- date(日期選擇)
- month(月份選擇)
- week(周選擇)
- time(時間選擇)
- datetime-local(日期選擇)
- datetime(包含時區)
- color(顏色選擇)
search
<input type="search">
它看起來是一個文本輸入框,可以輸入一個普通的文本
從語義上,我們可以用它表示一個搜索框,比如說下面這樣的:
[圖片上傳失敗...(image-2227db-1510624350095)]
在移動設備上的額外的特性(安卓手機上的截圖)
[圖片上傳失敗...(image-5242b8-1510624350096)]
[圖片上傳失敗...(image-dc7f6f-1510624350096)]
<input type="email">
從語義上講, 可以輸入一個電子郵件
在移動設備上的額外的特性(ipad上的截圖)
![Upload 6.png failed. Please try again.]
url
可以輸入一個url地址
在移動設備上的額外的特性(ipad上的截圖)
[圖片上傳失敗...(image-725e4e-1510624350096)]
tel
<input type="tel">
可以輸入一個電話號碼
在移動設備上的額外的特性(ipad上的截圖)
[圖片上傳失敗...(image-38b6a2-1510624350096)]
新增表單元素
- datalist
datalist
<input type="text" list="browers">
<datalist id="browers">
<option value="chrome"></option>
<option value="firfox"></option>
<option value="ie"></option>
</datalist>
表單驗證
表單驗證是指,在用戶提交表單之前,確保用戶輸入是數據是合法的
- 驗證輸入類型
- 驗證必填字段
- 驗證字符長度
- 驗證數值范圍
- 驗證日期和時間范圍
- 步長
- 正則表達式
驗證輸入類型
<form action="success.html" method="post">
<h2>驗證輸入類型</h2>
<label for="">
數字:
<input type="number">
</label>
<label for="">
郵箱:
<input type="email">
</label>
<label for="">
網址:
<input type="url">
</label>
<input type="submit">
</form>
驗證必填字段
<form action="success.html" method="post">
<h2>驗證必填字段</h2>
<label for="">
數字:
<input type="number" required="">
</label>
<label for="">
郵箱:
<input type="email" required="">
</label>
<label for="">
網址:
<input type="url" required="">
</label>
<input type="submit">
</form>
驗證字符長度
<form action="success.html" method="post">
<h2>驗證字符長度</h2>
<label for="">
密碼:
<input type="password" required="" minlength="6" maxlength="10">
</label>
<input type="submit">
</form>
驗證數值范圍
<form action="success.html" method="post">
<h2>驗證數值范圍</h2>
<label for="">
訂購數量:
<input type="number" required="" min="6" max="10">
</label>
<input type="submit">
</form>
驗證日期和時間范圍
<form action="success.html" method="post">
<h2>驗證日期和時間范圍</h2>
<label for="">
送貨日期:
<input type="date" required="" min="2016-04-01" max="2016-05-01">
</label>
<label for="">
送貨時間:
<input type="time" required="" min="08:00" max="18:00">
</label>
<input type="submit">
</form>
步長
<form action="success.html" method="post">
<h2>步長</h2>
<label for="">
訂購數量:
<input type="number" step="10">
</label>
<input type="submit">
</form>
正則表達式
<form action="success.html" method="post">
<h2>正則表達式</h2>
<label for="">
編號:
<input type="text" pattern="[0-4]{3}">
</label>
<input type="submit">
</form>
禁用表單驗證
html5提供的表單驗證還是很簡陋, 通常不能達到我們的實際需求, 很多時候我們還是需要使用javascript來完成表單驗證, 那么我們就需要禁用html5表單驗證,以免產生沖突
<form action="success.html" method="post" novalidate>
新增的表單屬性
- placeholder
- autofocus
- autocomplete
- multiple
placeholder
<input type="text" placeholder="請輸入用戶名">
autofocus
<input type="text" autofocus>
- 會在頁面加載時自動獲取焦點
- 一個頁面只能有一個autofocus屬性的定義
autocomplete
<form action="success.html" method="get" autocomplete="on">
<h2>autocomplete</h2>
<label for="">
用戶名:
<input type="text" name="username" placeholder="請輸入用戶名">
</label>
<input type="submit">
</form>
multiple
兩種用法
基本用用
<select name="" id="" multiple>
<option value="">option1</option>
<option value="">option2</option>
<option value="">option3</option>
</select>
type=file
<input type="file" multiple>
