There are a ton of ways to do this. At the moment I stick with one of two formulas:
<fieldset> <legend>My Legend</legend> <div> <label for="My Field">My Label</label> <input type="text" name="My Field"> </div> </fieldset> I believe the “for” attribute should reference the “id” attribute of the input element. So the above example should be: <fieldset> <legend>My Legend</legend> <div> <label for="My Field Id">My Label</label> <input type="text" name="My Field" id=”My Field Id”> </div> </fieldset> In the case of checkboxes, multiple inputs can have the same name (that’s how they are grouped together). Each input needs a unique id though, so each label will reference a unique checkbox within the group. Best regards, Kepler Gelotte Neighbor Webmaster, Inc. 156 Normandy Dr., Piscataway, NJ 08854 <http://www.neighborwebmaster.com> www.neighborwebmaster.com phone/fax: (732) 302-0904 _____ From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Joseph Taylor Sent: Wednesday, November 10, 2010 12:50 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] HTML5 - Marking up forms Eric, There are a ton of ways to do this. At the moment I stick with one of two formulas: <fieldset> <legend>My Legend</legend> <div> <label for="My Field">My Label</label> <input type="text" name="My Field"> </div> </fieldset> Or if its a bunch of checkboxes or something: <fieldset> <legend>My Legend</legend> <div> <label for="My Field"> <input type="checkbox" name="My Field"> Label for the checkbox </label> <label for="My Field"> <input type="checkbox" name="My Field"> Label for the checkbox </label> <label for="My Field"> <input type="checkbox" name="My Field"> Label for the checkbox </label> </div> </fieldset> Joseph R. B. Taylor Web Designer / Developer -------------------------------------- Sites by Joe, LLC "Clean, Simple and Elegant Web Design" Phone: (609) 335-3076 Web: http://sitesbyjoe.com Email: j...@sitesbyjoe.com On 11/10/10 12:30 PM, Eric Taylor wrote: Understandable; however, with the change in HTML5 from Definition Lists to Description lists, would it not be more semantically valuable to mark forms up using <dt> and <dd>, for labels and inputs, providing the document with a more solid structure? As stated, my concern with this is the lack of grouping per item, when using Description Lists. I understand that paragraphs may be easier to handle when marking up forms and doing the CSS; however, is it a meaningful method of marking up forms that supports the forward progression of HTML5 and front-end development in general? This is the main reason I'm torn between Description lists and Unordered/Ordered lists. What makes most sense from a semantics view, and where is the balance between semantics and ease-of-use? Eric Taylor < Elements Aside /> http://www.elementsaside.com On Nov 10, 2010, at 11:41 AM, "Patrick H. Lauke" <mailto:re...@splintered.co.uk> <re...@splintered.co.uk> wrote: On 10/11/2010 17:08, Eric Taylor wrote: >From my experience, the best practice, currently, is using Description lists; however, my concern with this method is the lack of semantic grouping when using this set of elements. Another method I have used is using an Unordered list to group each field inside of a list item. However, this doesn't seem like it makes as much sense, semantically, as the Description list. What do you all think, and how do you go about marking up your forms in HTML5? HTML5 does not add any new semantics or constructs to mark up the structure of forms, it only adds new types, a few features (autofocus for instance) and validation functionality. How you actually structure the lot is still as before (and there are still likely heated arguments over which way is good or not...personally, I just use paragraphs, as the extra structure of lists is just overkill in my opinion) P -- Patrick H. Lauke ______________________________________________________________ re\xAD\xF4dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com | http://flickr.com/photos/redux/ ______________________________________________________________ twitter: @patrick_h_lauke | skype: patrick_h_lauke ______________________________________________________________ ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *******************************************************************