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
*******************************************************************
