The required property is the basic tool in HTML5 for form validation, ensuring that users fill in fields before submitting. 1. It is directly added to the <input>, or <select> tags, so that the browser prompts the user when the field is empty; 2. Use it in combination with multiple input types such as email, number, url and tel to improve the user experience; 3. Automatically integrate form submission behavior to prevent unfilled required items from being submitted, and supports more comprehensive verification with properties such as placeholder, pattern, minlength/maxlength and other properties; 4. However, only check whether it is empty, and do not verify the rationality of the content. Complex logic still requires JavaScript or back-end verification. </select>

In web forms, the required property is a simple but very practical tool to ensure that users fill in certain fields before submitting. It does not require JavaScript to implement basic verification functions and is the first line of defense for front-end verification.

Basic usage: directly add it to the input tag

To use the required property, just add it to <input> , <textarea></textarea> , or <select></select> tags you want to fill in:

 <input type="text" name="username" required>

This way, when the user tries to submit a form, if the field is empty, the browser will automatically prompt them to fill in the content. Different browsers may have different prompt styles, but a short prompt message will usually pop up, such as "Please fill in this field".

Note: required property is only effective in browsers that support HTML5. If you need to be compatible with old browsers, it is best to use it with JavaScript verification.

Supports multiple input types to improve user experience

required can be used with many HTML5 input types, such as:

• type="email" : Requires entry of a legal email format
• type="number" : limits only numbers to be entered
• type="url" : Must be a valid URL
• type="tel" : phone number (the mobile terminal will call up the numeric keyboard)

These types are used in conjunction with required to provide a more friendly input experience and verification mechanism on mobile or in modern browsers.

For example, the following example:

 <input type="email" name="email" required placeholder="Please enter your email">

If the user does not fill in or the content is not in the email format, the browser will block the submission and prompt an error.

Naturally combined with form submission behavior

When you use the required property in the form, the browser will automatically check when the user clicks the submit button. If a required item is not filled in, the form will not be submitted and the focus will automatically be positioned on the first required item that is not filled in.

You can use it with other properties, such as:

• placeholder : Provides input prompts
• pattern : Regular expression validation (HTML5 only)
• minlength / maxlength : limit input length

These properties can exist simultaneously with required , making verification more comprehensive:

 <input type="text" name="password" required minlength="6" placeholder="at least 6 digits of password">

Not omnipotent, don't rely on it for complex verification

Although required is convenient, it is only responsible for "whether it is empty" and will not judge whether the content makes sense. For example, you have an age field:

 <input type="number" name="age" required>

Even if the user enters -100 , it will pass the verification as long as it is not a null value. Therefore, for complex logical judgments, JavaScript or backend verification must be used to ensure the bottom line.

In addition, sometimes users may mistakenly clear the field. At this time, they can manually check whether it is empty in JS and give prompts in advance, rather than waiting for the user to submit it before discovering the problem.

Overall, required is a lightweight but very practical form verification property that is suitable for ensuring that the user fills in the keyword fields. Although it cannot handle too complex logic, it is enough in most scenarios.

The above is the detailed content of How to use the required attribute for form validation?. For more information, please follow other related articles on the PHP Chinese website!