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'>
    <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' />
Series Navigation<< HTML5: Making a form with <fieldset>
HTML5: Form validation >>