HTML and CSS Reference
In-Depth Information
<input name="stayloggedin" type="checkbox"
id="stayloggedin" value="remember" />
Remember me on this computer
</p>
<p class="submit">
<input type="submit" name="submit" id="submit"
value="Login" />
<input type="hidden" name="redirect" value="admin.php" />
</p>
</form>
Some of the labels appear on the left, and some appear on the right. This is a very simple form with just four
visible elements, so chances are a blind user could figure out which text labels go with which input fields.
However, the more complex the form gets, the harder it becomes to match the text to the right elements.
Indeed, if the form begins to depend too heavily on the layout of one particular browser at one screen size, it
may become challenging even for fully sighted users. All too often, I've seen forms where the labels get pushed
away from the fields they describe because my font size or window size isn't quite what the designers expected.
Fixing this is not hard. The simplest approach is merely to enclose each input field and its associated description
in a
label
element, like so:
<form action="login.php" method="post">
<p><label>Username:
<input type="text" name="log" id="log" size="18" />
</label></p>
<p><label>Password:
<input type="password" name="pwd" id="pwd" size="18" />
</label></p>
<p><label>
<input name="stayloggedin" type="checkbox"
id="stayloggedin" value="remember" />
Remember me on this computer</label>
</p>
<p class="submit">
<input type="submit" name="submit" value="Login" />
</p>
</form>
You do not need to label hidden fields with predefined values, because these are not meant to be seen by
anybody. However, you can if you wish.
Sometimes the descriptive text is not immediately next to the form field. In these cases, it's most important to
label the field description. Each form field should have an
id
attribute by which it is uniquely identified. The
label
element can be placed in any convenient location in the document. Its
for
attribute points to the
id
of
the associated field. For example, this form puts the labels in separate paragraphs so that they appear above
their fields rather than adjacent to them:
<form action="login.php" method="post">
<p><label for="log">Username: </label></p>
<p><input type="text" name="log" id="log" size="18" /></p>
<p><label for="pwd">Password: </label></p>
<p><input type="password" name="pw" id="pw" size="8" /></p>
<p><label for="stayloggedin ">
Search WWH ::
Custom Search