-----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Lachlan Hardy Sent: Tuesday, April 05, 2005 1:52 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling Forms
[EMAIL PROTECTED] wrote: > Well, it seems that styling the actual form elements is the way to go, and > certainly appears to be ideal for simple forms. I use FIELDSET, FORM etc as per other people's suggestions above, but my personal favourite is wrapping the relevant form field inside the LABEL element. Makes styling seriously easy An invaluable reference is Cameron Adams's Accessible, Stylish Form Layout: http://www.themaninblue.com/writing/perspective/2004/03/24/ ***************************************************** It may make styling easier but incorporating form controls in labels has a different meaning than associating a label and a form control. For one thing, it isn't usable for those choosing a table layout for forms. Nor is it possible to use an incorporated form control with multiple labels. This is what the html 4.01 specs have to say about the meaning of labels and their relationship to form controls: The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control. The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one LABEL may be associated with the same control by creating multiple references via the for attribute. This example creates a table that is used to align two text input controls and their associated labels. Each label is associated explicitly with one text input: <FORM action="..." method="post"> <TABLE> <TR> <TD><LABEL for="fname">First Name</LABEL> <TD><INPUT type="text" name="firstname" id="fname"> <TR> <TD><LABEL for="lname">Last Name</LABEL> <TD><INPUT type="text" name="lastname" id="lname"> </TABLE> </FORM> This example extends a previous example form to include LABEL elements. <FORM action="http://somesite.com/prog/adduser"; method="post"> <P> <LABEL for="firstname">First name: </LABEL> <INPUT type="text" id="firstname"><BR> <LABEL for="lastname">Last name: </LABEL> <INPUT type="text" id="lastname"><BR> <LABEL for="email">email: </LABEL> <INPUT type="text" id="email"><BR> <INPUT type="radio" name="sex" value="Male"> Male<BR> <INPUT type="radio" name="sex" value="Female"> Female<BR> <INPUT type="submit" value="Send"> <INPUT type="reset"> </P> </FORM> To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control. In this example, we implicitly associate two labels with two text input controls: <FORM action="..." method="post"> <P> <LABEL> First Name <INPUT type="text" name="firstname"> </LABEL> <LABEL> <INPUT type="text" name="lastname"> Last Name </LABEL> </P> </FORM> Note that this technique cannot be used when a table is being used for layout, with the label in one cell and its associated control in another cell. When a LABEL element receives focus, it passes the focus on to its associated control. See the section below on access keys for examples. Labels may be rendered by user agents in a number of ways (e.g., visually, read by speech synthesizers, etc.) http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL Use what you want, but use it correctly. drew ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
