HTML5-Detailed explanation of form input validation (picture and text)

1. Use other form elements

1. Generate a list of options

The select element can be used to generate a list of options for the user to choose from. The

• size attribute is used to set the number of options to be displayed to the user; the

• multiple attribute allows the user to select multiple options at a time.

Example 1: Selection list

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

Example 2: Selection list, supports multiple selections at the same time

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

Example 3: Creating a structure

<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. Enter multiple lines of text

# The ##textarea element generates a multi-line text box, and the user can enter multiple lines of text.

AttributeDescriptionrowsNumber of rows colsNumber of columnswrapControl the insertion of line breaks in the text when submitting the form Method: hard will insert line breaks; soft will not

Example: use textarea element

<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. Indicates the calculation result

output indicates the calculation result.

Example: Calculation results

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

2. Use input validation

HTML5 introduces support for input validation. Designers can tell the browser what type of data they need, and the browser will use this information to check whether the data entered by the user is valid before submitting the form.

The advantage is: users can get problem feedback immediately.

Validation attributesSupported elementsrequied textarea, select, input (text, search, url, telephone, email, password, date pickers, number, checkbox, radio and file)min、max input(umber, range, date, datetime, datetime-local, month, time and week)patterninput(text, search, url, telephone, email and password)

Example: Verification

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

Note: Pattern verification email and URL, do not enter It will not trigger verification when the content is included, so it needs to be used in conjunction with required!
Disable input validation: You can set the novalidate attribute of the form element, or you can set the formnovalidate attribute of the button or input element used to submit the form.

The above is the detailed content of HTML5-Detailed explanation of form input validation (picture and text). For more information, please follow other related articles on the PHP Chinese website!