html5 智慧表單介紹
阿新 • • 發佈：2019-01-09
智慧表單介紹
1、XHTML中需要放在form之中的諸如inpu/button/select/textarea等標籤元素，在HTML5中完全可以放在頁面任何位置，然後通過新增的form屬性指向元素所屬表單的ID值，即可關聯起來。
<FORM id=foo>
…
</FORM>
<INPUT … form="foo">
2、HTML5提供了多樣的輸入型別和風格，讓設計介面更加豐富
智慧表單使用與規範
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<input
type="text"
list="mydata"
/><datalist
id="mydata">
<option
label="Top1"
value="讓子彈飛">
<option
label="Top2"
value="非誠勿擾2">
<option
label="Top3"
value="大笑江湖">
<option
label="Top4"
value="趙氏孤兒">
<option
label="Top5"
value=“PHP100">
</datalist>
新屬性介紹：
autofocus 載入時自動獲得焦點
required 必填專案placeholder 點選input內容消失
pattern 驗證正則表示式
|
智慧表單的瀏覽器支援
例項
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html>
<head>
<meta
charset=utf-8>
<title>HTML5視訊教程-canvas</title>
</head>
<body>
<formaction=""
method="get"
id="foo">
郵件<input
type="email"
placeholder="請輸入正確mail地址"><br>
網址<input
type="url"><br>
日期<input
type="date"><br>
月份<input
type="month"><br>
周 <input
type="week"><br>
時間<input
type="time"><br>
數字<input
type="number"><br>
滑動<input
type=range
min="0"
max="3"
step="1"><br>
搜尋<INPUT
type=search
results="n"
value="搜尋"><br>
顏色<INPUT
type=color><br>
正則測試<input
type="text"
pattern="[789]+"
required />
<input
type="text"
list="mydata"
/>
<datalist
id="mydata">
<option
label="Top1"
value="656463">
<option
label="Top2"
value="HTML5">
<option
label="Top3"
value="Javascript">
<option
label="Top4"
value="趙氏孤兒">
<option
label="Top5"
value="初戀這件小事">
</datalist>
<input
type="submit"
value="sub">
</form>
</body>
</html>
|