In Web Development, we often use JavaScript with HTML to validate the form, but we can also do the same via HTML in the following ways.
HTML <input> required Attribute: In input tag of HTML, we can specify via “required attribute”. It informs the browser (HTML5 supported) that the field can’t be left blank. Browsers vary in terms of this implementation, some browsers case a shadow to the box or some show a warning.
-
Example:
<!DOCTYPE html><htmllang="en"><head><title>Form</title></head><body><p>This is a form</p><form><p>Name:</p><inputtype="text"required><p>Email:</p><inputtype="email"required><p>Address:</p><inputtype="text"required><br><buttonstyle="margin-top: 5px;">Submit</button></form></body></html> -
Output:
HTML <input> type Attribute: In input tag, if we require for the user to input their email-id we can set the type attribute to email, the same is applicable to number, date or URL. Similar to the required attribute, different browsers have different implementations.
-
Example:
<!DOCTYPE html><htmllang="en"><head><title>Form</title></head><body><p>This is a form</p><form><p>URL:</p><inputtype="url"><p>Email:</p><inputtype="email"><p>Phone Number:</p><inputtype="number"><br><buttonstyle="margin-top: 5px;">Submit</button></form></body></html> -
Output:
HTML <input> pattern Attribute: We already know, apart from using default rules we can also set our rules as for the pattern of URL, date or price, etc.
-
Example:
<!DOCTYPE html><htmllang="en"><head><title>Form</title></head><body><p>This is a form</p><form><p>URL:</p><inputtype="url"pattern="https?://.+"><p>Date1:</p><inputtype="date"pattern="\d{2, 1}/\d{2, 1}/\d{4}"><br><buttonstyle="margin-top: 5px;">Submit</button></form></body></html>