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

HTML5: <label> tag

This entry is part 17 of 34 in the series HTML5

In the earlier example, we have used a <label> tag which is new in HTML5.

Quick contact form

With this <label> tag, if we click on the text Email, the email input box will be selected.

Notice in line 14, we have used id=’email’ to bind the <input> textbox to the email label in line 13.

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

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

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

HTML5: Search box

This entry is part 19 of 34 in the series HTML5

HTML5 provides a search box feature.  To define a search box, use type=’search’.

You could also add a results field such as results=’5′.

This keeps the previous 5 search terms. Now with these history search terms, it could notify users if a term has been used before.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Search Box</title>
</head>
<body>
<form role='search'>
    <label for='search'>Search term</label>
    <input required type='search' results='5' id='search' name='search'/>
    <input type='submit' value='Go'/>
</form>
</body>
</html>

HTML5: Calendar and time

This entry is part 20 of 34 in the series HTML5

Before HTML5, we would use jqueryUI to create a calendar widget for user to pick a date and time.

You can refer to this earlier post regarding jqueryUI datepicker.

HTML5 offers the following date and time options:

  • Date and time
  • Date and time local – set to your local time with no UTC
  • Date
  • Time
  • Month
  • Week
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Date & Time</title>
</head>
<body>
<form>
    <label for='datetime_id'>Date & Time</label>
    <input required type='datetime' id='datetime_id' name='datetime'/>
    <input type='submit' value='Go'/>
    <br>
    <label for='datetime_local_id'>Date & Time Local</label>
    <input required type='datetime-local' id='datetime_local_id' name='datetime-local'/>
    <input type='submit' value='Go'/>
    <br>
    <label for='date_id'>Date</label>
    <input required type='date' id='date_id' name='date'/>
    <input type='submit' value='Go'/>
    <br>
    <label for='time_id'>Time</label>
    <input required type='time' id='time_id' name='time'/>
    <input type='submit' value='Go'/>
    <br>
    <label for='month_id'>Month</label>
    <input required type='month' id='month_id' name='month'/>
    <input type='submit' value='Go'/>
    <br>
    <label for='week_id'>Week</label>
    <input required type='week' id='week_id' name='week'/>
    <input type='submit' value='Go'/>
</form>
</body>
</html>