讀書筆記：HTML祕籍Web表單
//一個html5的表單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header>
<hgroup>
<h2>Zoo Keeper Application From</h2>
<h4> please complete the from </h4>
</hgroup>
</header>
<div>
<fieldset>
<legend>Contact Details </legend>
<table>
<tr>
<td>
<label>Name<em>* </em></label>
</td>
<td>
<input id="name" type="text">
</td>
</tr>
<tr>
<td>
<label> Telephone</label>
</td>
<td>
<input id="telephone" type="text">
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
<td>
<input id="email" type="text" />
</td>
</tr>
<tr>
<td>
<label>habby</label>
</td>
<td>
<input id="habby" type="checkbox" name="habby" />足球
<input id="habby" type="checkbox" name="habby" />籃球
</td>
</tr>
<tr>
<td>
<label>sex</label>
</td>
<td>
<input id="sex" type="radio" name="sex" />男
<input id="sex" type="radio" name="sex" />女
</td>
</tr>
<tr>
<td>
<label>home</label>
</td>
<td>
<select>
<option>雲南</option>
<option>黑龍江</option>
</select>
</td>
</tr>
<tr>
<td>
<label>other</label>
</td>
<td>
<textarea>其他資訊</textarea>
</td>
</tr>
</tr>
<tr>
<td>
<input type="button" value="按鈕">
</td>
<td>
<input type="submit" />
<input type="reset" />
<input type="image" src="../img/image.png">
</td>
</tr>
</table>
</fieldset>
</div>
<footer>
</footer>
</body>
</html>
1.表單<input>中的placeholder=“文字框正確的輸入內容”屬性---用來提示;title屬性當用戶點選當前文字框時提示輸入內容
2.在文字框獲取焦點時改變樣式
<style type="text/css">
input:focus{
background: palegoldenrod;
}
</style>
3.html驗證原理
表單的<input>的required屬性=表示該欄位不能為空
4.關閉驗證--<form novalidate>
焦點：挑選正確的起點--autofocus屬性，只能給一個<input>或<textarea>標籤新增該屬性；
驗證樣式偽類：
required(必填)，optional(選填)
valid(有效)，invalid(無效)
in-range(在範圍內)，out-of-range(超出範圍)
eg: input:required:invalid{
background-color:lightyellow;
}
正則表示式：匹配文字
常用於搜尋（在長文件中查詢匹配的文字）和驗證（驗證某個值匹配模式）
html5可以通過pattern應用到<input>或者<textarea>中
eg:
<input type="text" id="id" pattern="[a-z]{3}-[0-9]{3}" autofocus required />
js庫：https://github.com/westonruter/webform2
下的download表單驗證
http://www.useragentman.com/tests/html5Widgets
滑動條，資料選擇器，顏色選擇器
匯入<head><script src="webform2.js"></script></head>
新的輸入控制元件
<input type="email/url/search/tel/number/range/datetime/date/month/color">
number數值：有min和max屬性，可以限制只輸入數值
<input id="number" type="number" min="0" max="100" step="0.5">
網址url：必須是xxx://，且XX必須是字母；
email（電子郵箱）：必須包含一個@和一個.
tel(電話號碼)：不接受字母
range(滑動條)：數值型控制元件，不會顯示值，可以使用js來處理；
<input id="weight" type="range" min="50" max="1000" value="160" step="5" >
datetime(日期)：
<input type="date" >
<input type="time" >
<input type="month" >
<input type="week" >
color(顏色):
<input type="color" >
顯示輸入建議--datalist,顯示一個下拉建議表，既可以輸入又可以選擇；
eg:
<legend id="zz">dddd</legend>
<input id= "www" list="a">
<datalist id="a">
<option label="zz" value="zz">
<option label="ww" value="ww">
</datalist>
注：所有控制元件為空都會驗證成功，如果為必填專案，加上required屬性；
<progress></process>進度條標籤；js程式碼來獲取和修改；
eg: a:不確定進度條
<progress >滾動條不斷滾動
</progress>
<progress value="12" min="1" max="100">25%
</progress>
<meter></meter>計量條;low和high屬性表示過高或者過低；
eg:
<meter min="0" max="100" low="10" high="60" value="30" >30px
</meter>
contentEditable標記內容編輯元素
sesignMode編輯頁面和iframe標籤一起使用；