Ok you got both of these quite wrong for following reasons: In the first instance you shouldn't use <b> or <br /> at all. In the second instance you should not wrap <input> into <label> as the <label> should quite clearly be used for denoting a label of an input field and not the input field itself. Using a heading instead of a <legend> is OK, but use <legend> if the design allows it for even better accessibility.
What you ought to do is something like this. <fieldset> <h3>Personal details</h3> <ol> <li> <label for="surname">Surname</label> <input type="text" name="surname" id="surname" /> </li> <li> <label for="email">Email</label> <input type="text" name="email" id="email" /> </li> </ol> </fieldset> Each </li> is a container for <label><input> pairs. No need for <br/>. Each element is nicely 'styleable' via CSS. The <ol> gives a user insight into how many elements exist inside the given <fieldset> so for non-sighted user they will know to expect a more complex form if there are 15 items in the given list. You can give each <li> a class attribute to give it a more specific hook for styling or behaviour purposes. Hope this helps. Jason On Thu, Oct 16, 2008 at 12:35 PM, <[EMAIL PROTECTED]> wrote: > I am looking for feedback on two questions, based on the simple form > snippet below. > > <fieldset> > <legend><b>Personal Details</b></legend> > <label for="name">Name:</label> > <input id="name" type="text" name="name" size="30"> <br> > <label for="id">ID Number:</label> > <input id="id" type="text" name="id number" size="10"> > </fieldset> > > Question 1: > Is it acceptable, or advisable, to use a header tag <h6> in place of the > <legend> in order to get cross-browsers consistency when dealing with > complex form styling? How much impact might this have on accessibility, if > any? > > Question 2: > I don't see many folks using the <label> as a wrapper to contain the > input. Any reason not to do this? It allows for the <br /> to be removed > via display: block; on the <label> tag as well as allowing users (of most > browsers) to click on a much larger label to select the accompanying input. > > <fieldset> > <h6>Personal Details</h6> > <label for="name">Name: > <input id="name" type="text" name="name" size="30"> > </label> > <label for="id">ID Number: > <input id="id" type="text" name="id number" size="10"> > </label> > </fieldset> > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: [EMAIL PROTECTED] > ******************************************************************* -- Jason Grant BSc, MSc CEO, Flexewebs Ltd. www.flexewebs.com [EMAIL PROTECTED] +44 (0)7748 591 770 Company no.: 5587469 www.twitter.com/flexewebs www.linkedin.com/in/flexewebs ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *******************************************************************
