HTML5: Making a form with <fieldset>

This entry is part 16 of 34 in the series HTML5

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'>
    <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' />

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

Leave a comment

Leave a Reply