Forms
<FORM Action="">
<TABLE Border = "2"
frame="hsides"
rules="groups"
cellpadding=8
>
<COLGROUP align="right">
<COLGROUP align="center">
<COLGROUP align="left">
<THEAD valign="top">
<TR>
<TH> Label </TH>
<TH> Control </TH>
<TH> Access </TH>
</TR>
<TBODY>
<TR>
<TH><LABEL for="fname"
accesskey="A">First Name:
</LABEL>
</TH>
<TD><INPUT type="text"
name="firstname"
id="fname"></TD>
<TD> A </TD>
</TR>
<TR>
<TH><LABEL for="lname"
accesskey="B">Last Name:
</LABEL>
</TH>
<TD><INPUT type="text"
name="lastname"
id="lname">
</TD>
<TD> B </TD>
</TR>
<TR>
<TH rowspan=2> Sex: </TH>
<TD>
<LABEL for="F"
accesskey="F"> Female:
</LABEL>
<INPUT type="radio"
name="sex"
value="FeMale"
id="F">
</TD>
<TD> F </TD>
</TR>
<TR>
<TD>
<LABEL for="M"
accesskey="M"> Male:
</LABEL>
<INPUT type="radio"
name="sex"
value="Male"
id="M">
</TD>
<TD> M </TD>
</TR>
<TBODY>
<TR>
<TH><BUTTON name="submit"
value="submit"
type="submit">
<b>Send</b>
<IMG src = "/Icons/smile.gif"
alt = "Yes!"
>
</BUTTON>
</TH>
<TH><BUTTON name="reset"
type="reset">
<em>Reset</em>
<IMG src = "/Icons/mr_yuk.gif"
alt = "No!"
>
</BUTTON>
</TH>
</TR>
</TABLE>
</FORM>
This example illustrates several notable features of HTML 4:
LABEL elements
may be used to associate information with other control elements
(except other LABEL elements).
Labels may be rendered by user agents in various ways, e.g., visually,
read by speech synthesizers, etc.)
When a LABEL element receives focus (i.e. becomes the currently
'receptive' element), it passes the focus on to its associated control.
A label is explicitly associated with another control using the
for attribute of the LABEL and the id
attribute of the control (i.e. they're the same).
A control is implicitly associated with a LABEL by being
enclosed between its start and end tags; note that if you do this you
then cannot use table cells to lay out the two independently, since the
start and end LABEL tags must be in the same cell.
BUTTON elements
whose type is "submit" are very similar to present 'submit' buttons
(INPUT elements whose type is "submit"). They both cause form data to be
submitted, but the BUTTON element allows HTML to be used on
the button, e.g. for character formatting or to place an image.
If a BUTTON is used with an IMG element, use the IMG element's
alt attribute to provide a description for users
who are unable to see the image.
The
accesskey attribute
provides for specifying direct keyboard access to form fields.
"Pressing" an access key assigned to an element gives focus to the
element. What 'pressing' means depends on the underlying system.
In MS Windows one generally has to press the "Alt" key concurrently
with the access key.
On Apple systems, one typically has to press the "Cmd" key concurrently
with the access key.
The rendering of access keys depends on the user agent.
W3C recommends that authors include the access key in label text or
wherever the access key is to apply.
What happens when an element receives focus depends on the element.
- text fields allow user input;
- activated radio buttons change values;
- submit buttons become highlighted and act as if clicked on when the
Return/Enter key is pressed;
- Links defined by A
are generally followed by the user agent when the
Return/Enter key is pressed.
This example assigns the access key "N" to a label associated with an
INPUT control. Typing the access key gives focus to the label which in
turn gives it to the associated control. The user may then enter text
into the INPUT area.
<FORM Action="">
<LABEL for="name" accesskey="N">
Your Name </LABEL>
<INPUT type="text" id="name">
</FORM>
Additional Resources:
HTML 4.01 Tags
|
