<h1>Form field hints</h1>
<form>
<p>Tab or click through the fields to reveal the hints. <span style="padding:2px;border:1px solid red;background:#ffffcc;">Only <strong>Username</strong> and <strong>Password</strong> show hints in this example!</span></p>

<dl>
    <dt>

        <label for="firstname">First Name:</label>
    </dt>
    <dd>
        <input
            name="firstname"
            id="firstname"
            type="text" />
    </dd>
    <dt>
        <label for="lastname">Last Name:</label>
    </dt>

    <dd>
        <input
            name="lastname"
            id="lastname"
            type="text" />
    </dd>

    <dt><label for="year">Birth Year:</label></dt>
    <dd>
        <select id="year" name="year">
            <option value="">YYYY</option>
            <option value="1066">1066</option>
            <option value="1492">1492</option>

            <option value="1776">1776</option>
            <option value="1812">1812</option>
            <option value="1917">1917</option>
            <option value="1942">1942</option>
            <option value="1999">1999</option>
        </select>

    </dd>
    <dt>
        <label for="username">Username:</label>
    </dt>
    <dd>
        <input
            name="username"
            id="username"
            type="text" />
        <span class="hint">Between 4-12 characters.<span class="hint-pointer"> </span></span>
    </dd>

    <dt>
        <label for="password">Password:</label>
    </dt>
    <dd>
        <input
            name="password"
            id="password"
            type="password" />
        <span class="hint">Between 5-13 characters, but not 7.  Never 7.<span class="hint-pointer"> </span></span>
    </dd>
    <dt class="button"> </dt>

    <dd class="button">
        <input
            type="submit"
            class="button"
            value="Submit" />
    </dd>
</dl>
</form>

<br style="clear: left" />