The required attribute of the HTML5 form uses

Time:2021-9-14

describe

Today, I accidentally found that the form has its own non null judgment function. After checking the data, I found that the required attribute is a new attribute in HTML5

Definition and Usage

The required attribute is a Boolean attribute
The required attribute specifies that the input fields must be filled in before submission.
If this attribute is used, the field is required (or required).
Note: the required attribute applies to the following types: text, search, URL, telephone, email, password, date pickers, number, checkbox, radio, and file.
 

Syntax usage


<input required="required">
<form method="post" action="">
       User name < input type = "text" id = "username" required = "required" > < br >
       Password < input type = "password" id = "password" required > < br >
       < input type = "submit" value = "login" >
   </form>

be careful:
1: Required and required = “required” have the same effect, except that the former is abbreviated
2: The code must be wrapped with a form tag to be valid
3: The button clicked must be of submit type, and the type of button is invalid

effect

Is a simple prompt to enter the change text box

在这里插入图片描述

How to customize prompt text

User name < input type = "text" id = "username" required oninvalid = "setcustomvalidity ('Please enter your name ');" oninput = "setcustomvalidity (' ');" >

How to disable required

1: Change the button type to button instead of submit
2: Add the formnovalidate attribute to the submit button

<form method="post" action="">
		   User name < input type = "text" id = "username" required = "required" > < br >
		   Password < input type = "password" id = "password" required > < br >
		   < input type = "submit" value = "login" formnovalidate >
	   </form>

3: Add the novalidate attribute to the element to disable the validation function of the whole form

<form method="post" action="" novalidate>
		   User name < input type = "text" id = "username" required = "required" > < br >
		   Password < input type = "password" id = "password" required > < br >
		   < input type = "submit" value = "login" >
	   </form>

4. Pattern attribute – use regular expression validation
(1) You do not have to use the ^ and $characters to indicate the beginning and end of the field value to match.
(2) If only pattern is set, the null value will pass. If NULL is not allowed, the required attribute should also be added.

This is the end of this article on the use of the required attribute of HTML5 forms. For more information about the required attribute of HTML5 forms, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!