How to create form validation by using only HTML ? - GeeksforGeeks

15 Apr, 2020
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
HTML <input> type Attribute
HTML <input> pattern Attribute
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><html lang="en">  <head>    <title>Form</title></head>  <body>    <p>This is a form</p>    <form>        <p>Name:</p>        <input type="text" required>        <p>Email:</p>        <input type="email" required>        <p>Address:</p>        <input type="text" required>        <br>        <button style="margin-top: 5px;">          Submit        </button>    </form>  </body>  </html>
<!DOCTYPE html><html lang="en">  <head>    <title>Form</title></head>  <body>    <p>This is a form</p>    <form>        <p>Name:</p>        <input type="text" required>        <p>Email:</p>        <input type="email" required>        <p>Address:</p>        <input type="text" required>        <br>        <button style="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><html lang="en">  <head>    <title>Form</title></head>  <body>    <p>This is a form</p>    <form>        <p>URL:</p>        <input type="url">        <p>Email:</p>        <input type="email">        <p>Phone Number:</p>        <input type="number">        <br>        <button style="margin-top: 5px;">          Submit        </button>    </form>  </body>  </html>
<!DOCTYPE html><html lang="en">  <head>    <title>Form</title></head>  <body>    <p>This is a form</p>    <form>        <p>URL:</p>        <input type="url">        <p>Email:</p>        <input type="email">        <p>Phone Number:</p>        <input type="number">        <br>        <button style="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><html lang="en">  <head>    <title>Form</title></head>  <body>    <p>This is a form</p>    <form>        <p>URL:</p>        <input type="url" pattern="https?://.+">        <p>Date1:</p>        <input type="date"                pattern="\d{2, 1}/\d{2, 1}/\d{4}">        <br>        <button style="margin-top: 5px;">          Submit        </button>    </form></body>  </html>
<!DOCTYPE html><html lang="en">  <head>    <title>Form</title></head>  <body>    <p>This is a form</p>    <form>        <p>URL:</p>        <input type="url" pattern="https?://.+">        <p>Date1:</p>        <input type="date"                pattern="\d{2, 1}/\d{2, 1}/\d{4}">        <br>        <button style="margin-top: 5px;">          Submit        </button>    </form></body>  </html>
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Attributes
HTML-Misc
Picked
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills