Error This Field is Required Please Enter a Response to Continue Css Profile
The form data is very important for a website and it is necessary that the correct form data or valid form data is submitted to the form. In order to make sure that the form data is valid or to make an input field mandatory, various attributes can be used. We shall discuss the following attributes in this article & will understand with the help of examples.
- Required
- Maxlength
- Minlength
- Min and Max
- Multiple
- Pattern
Let's discuss all the points one by one through the examples.
1. Required attribute: If you want to make an input mandatory to be entered by the user, you can use the required attribute. This attribute can be used with any input type such as email, URL, text, file, password, checkbox, radio, etc. This can help to make any input field mandatory.
Syntax:
<input type="..." id="..." name="..." required>
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< body >
< p >Required Attribute</ p >
< form >
< label >Name:</ label >
< input type = "text" required />
< label >Email:</ label >
< input type = "email" required />
< button style = "margin-top: 5px" >Submit</ button >
</ form >
</ body >
</ html >
Output:
2. Maxlength attribute: The maxlength attribute helps us to specify the maximum length of an input field in the form i.e. the maximum no. of characters that can be entered for the specific field. It can be used to make the maximum length of a telephone number in India as 10 digits so as to prevent any wrong input data submission.
Syntax:
<input type="..." id="..." name="..." maxlength="...">
Note: When the maxlength attribute is set, it will not allow the user to enter more characters than those specified.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< body >
< p >Maxlength Attribute</ p >
< form >
< label >Roll No.</ label >
< input type = "text" maxlength = "10" required />
< label >Email:</ label >
< input type = "email" required />
< button style = "margin-top: 5px" >Submit</ button >
</ form >
</ body >
</ html >
Output:
3. Minlength attribute: The minlength attribute helps us to specify the minimum length of an input field in the form i.e. the minimum no. of characters that must be entered for the specific field. It can be useful to make the minimum length of a password that can't be guessed or a telephone number in India as 10 digits so as to prevent any wrong input data submission.
Syntax:
<input type="..." id="..." name="..." minlength="...">
Note: When the minlength attribute is set, an input field will not accept lesser characters than those specified.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< body >
< p >minlength Attribute</ p >
< form >
< label >Roll No.</ label >
< input type = "text" minlength = "5" required />
< label >Email:</ label >
< input type = "email" required />
< button style = "margin-top: 5px" >Submit</ button >
</ form >
</ body >
</ html >
Output:
4. Min and max attributes: The min and max attributes of the input field are used to specify the minimum and maximum allowed values for an input field. We can create a range of allowed values using min and max together.
min specifies the minimum value an input field can have whereas max specifies the maximum value for a field.
The min and max attributes work with the various input types such as number, range, date, datetime, month, time and week. We can use these attributes in a field where we want a user to enter some amount. We can set the maximum limit and minimum limit for the amount to be entered.
Syntax:
<input type="..." id="..." name="..." max="..."> <input type="..." id="..." name="..." min="..." max="...">
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< body >
< p >Min and max Attributes</ p >
< form >
< label >Amount</ label >
< input type = "number" min = "50" max = "100" required />
< label >Email:</ label >
< input type = "email" required />
< button style = "margin-top: 5px" >Submit</ button >
</ form >
</ body >
</ html >
Output:
5. Multiple attribute: The multiple attribute can help us to allow a user to enter more than one value in a single input field. The multiple attribute can be used only for email and file input types.
Syntax:
<input type="..." id="..." name="...." multiple>
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< body >
< p >Multiple Attribute</ p >
< form >
< label >Amount</ label >
< input type = "number" min = "50" max = "100" required />
< label >Email:</ label >
< input type = "email" multiple required />
< button style = "margin-top: 5px" >Submit</ button >
</ form >
</ body >
</ html >
Output:
6. Pattern attribute: The pattern attribute defines a particular pattern that an input field's value must satisfy when the form is submitted. The pattern attribute works with text, date, search, URL, tel, email, and password input types. We make use of regex or regular expressions to specify the pattern. It is useful in situations where we want the input entered must be according to the given pattern only. The inputs that do not satisfy the pattern will not be accepted by the form.
Syntax:
<input type="...." id="..." name="...." pattern=".....">
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< body >
< p >Pattern Attribute</ p >
< form >
< label >Tel.</ label >
< input type = "text" pattern = "[0-9]{10}" required />
< label >Email:</ label >
< input type = "email" multiple required />
< button style = "margin-top: 5px" >Submit</ button >
</ form >
</ body >
</ html >
Output:
In the above example, the pattern specifies that Tel. can be composed of digits only and its length must be 10.
This is how we can make the form data required or add certain checks on the input that is entered.
Source: https://www.geeksforgeeks.org/how-to-perform-form-validation-for-a-required-field-in-html/
0 Response to "Error This Field is Required Please Enter a Response to Continue Css Profile"
Post a Comment