How to create form validation by using only HTML ?

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.