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"<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∑dux (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
*******************************************************************

Reply via email to