HTML5-输入验证

下述内容主要讲述了《HTML5权威指南》第14章关于“其他表单元素及输入验证”。

一、使用其他表单元素

1. 生成选项列表

select元素可以用来生成一个选项列表供用户选择。

size属性用来设定要显示给用户的选项数目；
multiple属性，用户一次可以选择多个选项。

示例1：选择列表

代码语言：javascript复制

<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：选择列表，支持同时选多个

代码语言：javascript复制

for="like">
    Like Sport:
    "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>

示例3：建立结构

代码语言：javascript复制

<label for="love">
    <select name="love" id="love">
        <optgroup label="前端语言">
            <option value="javascript">JavaScriptoption>
            <option value="html">Htmloption>
            <option value="css">CSSoption>
        optgroup>
        <optgroup label="后端语言">
            <option value="java">Javaoption>
            <option value="php">PHPoption>
        optgroup>
    select>
label>

2. 输入多行文字

textarea元素生成多行文本框，用户可输入多行文字。

属性	说明
rows	行数
cols	列数
wrap	控制提交表单时文字中插入换行符的方式：hard时将会插入换行符；soft不会

示例：使用textarea元素

代码语言：javascript复制

<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>

3. 表示计算结果

output表示计算的结果。 示例：计算结果

代码语言：javascript复制

<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)

示例：验证

代码语言：javascript复制

<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 html python php

0 人点赞