HTML Forms and Validations.
Thursday, July 13, 2023
A valid HTML form ensures that the user's input meets the required criteria and is correct.
Using HTML attributes for form validation or JavaScript for more complex logic will let you implement more sophisticated validation logic.
HTML Input Attributes:
↬ required
↬ type
↬ pattern
↬ max & min
1/ required attribute
✧ It is a boolean attribute that assures that an input field must be filled out before submitting the form.
✧ It supports text, password, radio, checkbox, date pickers, number, file, email, tel, URL, and search input types.
Example:
2/ type attribute
✧ This attribute specifies the type of input expected from the user.
✧ You can use the 'type' attribute for many kinds of input fields, including text, password, email, number, checkbox, radio, date, file, submit, reset, button, etc.
Example:
3/Pattern attribute
✧ You can specify a regular expression that the user's input must match using this attribute.
Example:
4/ max & min
✧ You can use these attributes to specify the maximum and minimum values that can be entered in a numeric input field.
Example:
CSS Pseudo Selectors:
These PS make it possible to select elements and style them based on their state or attributes. Following is a list of frequently used CSS form input pseudo-selectors:
↬:required
↬:valid
↬:invalid
↬:disabled
↬:optional
1/:required selector
✧ This pseudo-selector is used to select and style form elements that have the required attribute, such as input fields.
The code given below will set the border color of all required input fields to red.
Example:
2/:valid selector
✧ This pseudo-selector is used to select and style form elements that are valid, such as input fields with valid values.
The code given below will set the border color of all valid input fields to green.
Example:
3/:invalid selector
✧ This pseudo-selector is used to select and style form elements that are invalid, such as input fields with invalid values.
The code given below will set the border color of all invalid input fields to red.
Example:
4/:disabled selector
✧ This pseudo-selector is used to select and style form elements that are disabled, such as input fields with disabled attributes.
The code given below will set the opacity of all disabled input fields to 0.5.
Example:
5/ :optional selector
✧ This pseudo-selector is used to select and style form elements with no required attribute.
The code given below will set the background color of all optional input fields to light gray.
Example:
