HTML5: Form validation

This entry is part 18 of 34 in the series HTML5

We look back at the earlier form.

The email input type tells the browser that user should enter an email address.

In all of the fields, we have put a required attribute.

This will tell compatible browsers to ensure that the field is filled up before being submitted.

<!DOCTYPE html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>Quick contact form</title>
        <legend>Contact information</legend>
                <label for='email'>Email:</label>
                <input required type='email' id='email' name='email'/>
                <label for='tel'>Telephone number:</label>
                <input required type='tel' id='tel' name='tel'/>
                <label for='url'>Website:</label>
                <input required type='url' id='url' name='url'/>
        <input type='submit' value='Submit this' />

If you try the form, you will find that for the url input box, you need to put in http://.  For example,

Series Navigation<< HTML5: <label> tag
HTML5: Search box >>

Leave a comment

Leave a Reply