DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> HTML5教程:Form表單自動驗證
HTML5教程:Form表單自動驗證
編輯:HTML和Xhtml     

1、required屬性:

<form>
 
        <input id="poluoluo_required" name="poluoluo.com" required type="text"/>
 
        <input type="submit" value="提交"/>
 
</form>

required屬性可以用用在大多數的輸入元素上(除了隱藏元素、圖片元素按鈕上等)。
required屬性表示此輸入框是必填項,當提交的時候,如果此輸入框為空,那麼將提示用戶輸入後提交。


<form>
<input id="poluoluo_required" name="poluoluo.com" required type="text"/>
<input type="submit" value="提交"/>
< /form>

2、pattern屬性:

<form>
 
        <input id="poluoluo_pattern" name="poluoluo.com" required pattern="\d{3}" type="text"/>
 
        <input type="submit" value="提交"/>
 
</form>

pattern屬性的值一般為正則表達式,當用戶輸入的內容符合一定的格式,那麼才能提交,否則將提示用戶不符合要求,如上所示必須輸入3位數字。

立即運行:
< form>
<input id="poluoluo_pattern" name="poluoluo.com" required pattern="\d{3}" type="text"/>
<input type="submit" value="提交"/>
< /form>

3、min屬性和max屬性:

<form>
 
        <input id="poluoluo_min_max" name="poluoluo.com" required min="3" max="16" type="number"/>
 
        <input type="submit" value="提交"/>
 
</form>

min和max這兩個屬性是數值類型或日起類型的input元素的專有屬性,他限制了input元素中輸入的數值和日期范圍。屬性值為數字。


立即運行:
< form>
<input id="poluoluo_min_max" name="poluoluo.com" required min="3" max="16" type="number"/>
<input type="submit" value="提交"/>
< /form>

4、step屬性:

<form>
 
        <input id="poluoluo_step" name="poluoluo.com" required step="10" min="0" max="100" type="number"/>
 
        <input type="submit" value="提交"/>
 
</form>

step屬性控制input元素的值增加或減少的步幅,例如你想讓用戶輸入得值在0-100之間,但是必須是10的倍數時,則如上代碼所示,點擊下方運行看效果。


立即運行:
< form>
<input id="poluoluo_step" name="poluoluo.com" required step="10" min="0" max="100" type="number"/>
<input type="submit" value="提交"/>
< /form>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved