HTML5-表單輸入驗證詳解（圖文）

一、使用其他表單元素

1. 產生選項清單

select元素可以用來產生一個選項清單供使用者選擇。

• size屬性用來設定要顯示給使用者的選項數目；

• multiple屬性，使用者一次可以選擇多個選項。

範例1：選擇列表

<label for="fave">
    Favorite Fruit:    <select name="fave" id="fave">
        <option value="apples">苹果</option>
        <option value="organges">橘子</option>
        <option value="pears">梨</option>
    </select></label>

範例2：選擇列表，支援同時選取多個

<label for="like">
    Like Sport:
    <select name="like" id="like" size="3" multiple>
        <option value="football">足球</option>
        <option value="basketball">篮球</option>
        <option value="table tennis">乒乓球</option>
        <option value="badminton">羽毛球</option>
        <option value="swiming">游泳</option>
    </select>
</label>

範例3：建立結構

<label for="love">
    <select name="love" id="love">
        <optgroup label="前端语言">
            <option value="javascript">JavaScript</option>
            <option value="html">Html</option>
            <option value="css">CSS</option>
        </optgroup>
        <optgroup label="后端语言">
            <option value="java">Java</option>
            <option value="php">PHP</option>
        </optgroup>
    </select></label>

2. 輸入多行文字

textarea元素產生多行文字框，使用者可輸入多行文字。

屬性	說明
#rows

#行數列數3. 表示計算結果output表示計算的結果。

	cols
#wrap	控制提交表單時文字中插入換行符的方式：hard時會插入換行符號；soft不會
	#範例：HTML5-表單輸入驗證詳解（圖文）
	<form action="http://localhost:8888/form/select" method="post"> <p> <label for="textarea_1"> 请输入一段文字:<textarea name="textarea_1" id="textarea_1" cols="30" rows="10" wrap="soft"></textarea> </label> </p> <p> <label for="textarea_2"> 请再次输入一段文字:<textarea name="textarea_2" id="textarea_2" cols="30" rows="10" wrap="hard"></textarea> </label> </p> <input type="submit" value="提交"></form>

範例：計算結果

<form action="return false;" oninput="res.value = quantity.value * price.value">
    <fieldset>
        <legend>价格计算</legend>
        <input type="number" placeholder="数量" id="quantity" name="quantity"> x        
        <input type="number" placeholder="价格" id="price" name="price"> =        
        <output for="quantity price" name="res"></output>
    </fieldset></form>

二、使用輸入驗證

#HTML5引入了對輸入驗證的支援。設計者可告知瀏覽器自己需要什麼類型的數據，然後瀏覽器在提交表單之前會使用這些資訊檢查使用者輸入的資料是否有效。 其好處是
：使用者可以立刻得到問題回饋。 驗證屬性

支援元素###################requied###### textarea、select、input(text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及file)#############min、max###### input(umber, range, date, datetime, datetime-local, month, time 以及week)############pattern######input(text, search, url, telephone, email以及password)##################範例：驗證######

<form action="http://localhost:8888/form/validate" method="post">
    <p>
        <label for="name">
            姓名:<input type="text" name="name" id="name" required>
        </label>
    </p>
    <p>
        <label for="email">
            邮箱:<input type="text" name="email" id="email" required pattern="\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)
            [A-Za-z0-9]+)*\.[A-Za-z0-9]+">
        </label>
    </p>
    <p>
        <label for="age">
            年龄:<input type="number" name="age" id="age" min="1" max="150">
        </label>
    </p>
    <input type="submit" value="提交"></form>

#######注意###：pattern驗證信箱和URL，不輸入內容時其不會觸發驗證，所以需要配合required使用！ ######禁止輸入驗證###：可以設定form元素的###novalidate###屬性，也可以設定用來提交表單的button或input元素的###formnovalidate###屬性。 ###

以上是HTML5-表單輸入驗證詳解（圖文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！