HTML5: Making a form with <fieldset>

HTML5 introduces some new functionalities to web form.

But always take note, as with CSS3, not all of these functionalities are supported in all web browser.

Quick contact form

The <fieldset> that is used for grouping related elements in the form and it will put an outline to the form.

As you could see, a legend Contact information can be included in the outline too.

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

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.

Series Navigation<< HTML5: Hightlighting text with the <mark> element
HTML5: <label> tag >>