學習自HTML5China
表單結構更自由
XHTML中需要放在form之中的諸如input /button/select/textarea等標籤元素,在HTML 5中完全可以放在頁面任何位置,然後通過新增的form屬性指向元素所屬表單的ID值,即可關聯起來.比如:
<form id="iform"> <input type="text"> ... </form> <input value="我在id爲iform的表單外" form="foo">
多樣的輸入類型(大部分新類型目前並不爲所有標準瀏覽器支持,請參見樣例演示中的提示)
email輸入類型<input type="email" name="email">
此類型要求輸入格式正確的email地址,否則瀏覽器是不允許提交的,並會有一個錯誤信息提示.此類型在Opera中必須指定name值,否則無效果.
url輸入類型
<input type="url">
上面代碼展示的文本域要求輸入格式正確的URL地址,Opera中會自動在開始處添加http://. 日期時間相關輸入類型(這些個很牛X的)
這一系列是很酷的一個類型,完全解決了煩瑣的JS日曆控件問題.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一樣. number輸入類型
<input type="date"> <input type="time"> <input type="month"> <input type="week">
這個不用多解釋了,要求輸入一個數字字符,若未輸入則會拋出一個錯誤.
range輸入類型
<input type="number">
此類型將顯示一個可拖動的滑塊條,並可通過設定max/min/step值限定拖動範圍.拖動時會反饋給value一個值.
search輸入類型
<input type="search">
此類型表示輸入的將是一個搜索關鍵字,通過results=s可顯示一個搜索小圖標.
tel輸入類型
<input type="tel">
此類型要求輸入一個電話號碼,但實際上它並沒有特殊的驗證,與text類型沒什麼區別.
color輸入類型
<input type="color">
此類型表單,可讓用戶通過顏色選擇器選擇一個顏色值,並反饋到value中.
新增的表單屬性
placeholder屬性<input type="text" placeholder="點擊我會以清除">
這是一個很實用的屬性,免去了用JS去實現點擊清除表單初始值.瀏覽器支持也還不錯,MS除了Firefox,其他標準瀏覽器都能很好的支持.
require/pattern屬性
<input type="text" name="require" required=""> <input type="text" name="require1" required="required"> <input type="text" name="require2" pattern="^[1-9]\d{5}$">
表單驗證屬性,require類型時,若輸入值爲空,則拒絕提交,並會有一個提示.上面兩種寫法都對,這個很有用.並且可以用於textarea以及hidden/image/submit類型.pattern類型爲正則驗證,可以完成各種複雜的驗證.這兩種類型在Opera中必須指定name值,否則無效果.
autofocus屬性
<input type="text" autofocus="true">
默認聚焦屬性,可在頁面加載時聚焦到一個表單控件,類似於JS的focus().
list屬性
<input type="text" list="ilist"> <datalist id="ilist"> <option label="a" value="a"> </option><option label="b" value="b"> </option><option label="c" value="c"> </option></datalist>
該屬性需要與datalist屬性共用,datalist是對選擇框的記憶,而list屬性可以爲選擇框自定義記憶的內容.
max/min/step屬性
<input type="range" max="100" min="1" step="20">
限制值的輸入範圍,以及值的輸入漸進程度,比如可在number設定輸入最大值最小值,或者在range中設定拖動階梯.
autocomplete屬性
<input type="text" autocomplete="on">
此屬性是爲表單提供自動完成功能.如果該屬性爲打開狀態可很好地自動完成.一般來說,此屬性必須啓動瀏覽器的自動完成功能.
