Re: [WSG] HTML5 - Marking up forms
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 ***
Re: [WSG] HTML5 - Marking up forms
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 ***
RE: [WSG] HTML5 - Marking up forms
I'm with Patrick on this one. The form, fieldset and label elements provide all the semantic structure you need. Anything else is noise. Steve Green Test Partners Ltd -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Eric Taylor Sent: 10 November 2010 17:30 To: wsg@webstandardsgroup.org Subject: Re: [WSG] HTML5 - Marking up forms 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\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 ***
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 legendMy Legend/legend div label for=My FieldMy Label/label input type=text name=My Field /div /fieldset Or if its a bunch of checkboxes or something: fieldset legendMy 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 usingdt anddd, 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. Laukere...@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 ***
RE: [WSG] HTML5 - Marking up forms
There are a ton of ways to do this. At the moment I stick with one of two formulas: fieldset legendMy Legend/legend div label for=My FieldMy 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 legendMy Legend/legend div label for=My Field IdMy 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 legendMy Legend/legend div label for=My FieldMy Label/label input type=text name=My Field /div /fieldset Or if its a bunch of checkboxes or something: fieldset legendMy 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
RE: [WSG] HTML5 - Marking up forms
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? I don't think lists should be used for this (there might be a case for a OL in case of dependant selects, but that would be a stretch). In the case of DL, I'd say that the relationship between DTs and DDs is no better than the one created by the labels and their for attribute. fwiw, I use divs to wrap controls with their label, not because it makes things easier to style, but because of the way the form would look with no such wrapper and no styling. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] HTML5 - Marking up forms
On 10 November 2010 18:52, Thierry Koblentz thierry.koble...@gmail.comwrote: I don't think lists should be used for this (there might be a case for a OL in case of dependant selects, but that would be a stretch). In the case of DL, I'd say that the relationship between DTs and DDs is no better than the one created by the labels and their for attribute. fwiw, I use divs to wrap controls with their label, not because it makes things easier to style, but because of the way the form would look with no such wrapper and no styling. I'm with you there Thierry Fieldset is, by definition, a grouping within a form. The legend describes the fieldset. The label for and input id link to each other. There is no subset of fieldset like dt is to dl or li is to ul so the only logical element would be a div which is neutral. I can only imagine I would have to grapple with semantics when I need to break down a li or dd. If you lost the styling in a form built with a list would it appear to make sense when each element had a bullet beside it? Would another logical outcome not be that each fieldset would require a separate list which may comprise 1 element? -- Chris Price Choctaw *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] HTML5 - Marking up forms
IE8 and earlier 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 3:45 PM, Kevin Rapley wrote: I would be interested to gather your thoughts around this solution, using progress tags to mark progress through the form. form action=# method=post fieldset legend class=visuallyhiddenForm legend text/legend progress value=0.0 max=5.0 label for=text-example span class=label Label for text input /span span class=input input type=text name=text-example id=text-example class=text / /span /label /progress progress value=1.0 max=5.0 class=radio-group fieldset legend class=visuallyhiddenForm legend text/legend span class=label Label for radio group /span div class=radiobutton-container progress value=1.1 max=5.0 label for=radio-label-1 span class=input input type=radio name=radio-group-name id=radio-label-1 / /span span class=label Radio label /span /label /progress progress value=1.2 max=5.0 label for=radio-label-2 span class=input input type=radio name=radio-group-name id=radio-label-2 / /span span class=label Radio label /span /label /progress progress value=1.3 max=5.0 label for=radio-label-3 span class=input input type=radio name=radio-group-name id=radio-label-3 / /span span class=label Radio label /span /label /progress /div!-- / .radiobutton-container -- /fieldset /progress!-- / .radio-group -- progress value=2.0 max=5.0 class=checkbox-group fieldset legend class=visuallyhiddenForm legend text/legend span class=label Label for checkbox group /span div class=checkbox-container progress value=2.1 max=5.0 label for=checkbox-label-1 span class=input input type=checkbox name=checkbox-label-1 id=checkbox-label-1 / /span span class=label Checkbox label /span /label /progress progress value=2.2 max=5.0 label for=checkbox-label-2 span class=input input type=checkbox name=checkbox-label-2 id=checkbox-label-2 / /span span class=label Checkbox label /span /label /progress progress value=2.3 max=5.0 label for=checkbox-label-3 span class=input input type=checkbox name=checkbox-label-3 id=checkbox-label-3 / /span span class=label Checkbox label /span /label /progress /div!-- / .checkbox-container -- /fieldset /progress!-- / .checkbox-group -- progress value=3.0 max=5.0 label for=select-box-label span class=label Option label text /span span class=input select name=select-box-label id=select-box-label option selected=selected data-skip=1Option text/option optionOption text/option optionOption text/option optionOption text/option optionOption text/option /select /span /label /progress progress value=4.0 max=5.0 label for=select-box-label span class=label Option label text /span span class=input select name=fancySelect class=combibox option value=0 selected=selected data-skip=1Choose Your Product/option option value=1 data-icon=/graphics/structure/forms/products/iphone.png data-html-text=iPhone 4lt;igt;in stocklt;/igt;iPhone 4/option option value=2 data-icon=/graphics/structure/forms/products/ipod.png data-html-text=iPod lt;igt;in stocklt;/igt;iPod/option option value=3 data-icon=/graphics/structure/forms/products/air.png data-html-text=MacBook Airlt;igt;out of stocklt;/igt;MacBook Air/option option value=4 data-icon=/graphics/structure/forms/products/imac.png data-html-text=iMac Stationlt;igt;in stocklt;/igt;iMac Station/option /select /span /label /progress progress value=5.0 max=5.0 label for=textarea-example span class=label Label for textarea /span span class=input textarea name=textarea-example id=textarea-example class=text rows=10 cols=51/textarea /span /label /progress input type=submit value=Submit form class=button / /fieldset /form Kevin Rapley Yoo-zuh-buhl | User Experience Consultant 0115 714 2337 | 0772 345 7862 yoo-zuh-buhl.co.uk http://yoo-zuh-buhl.co.uk Yoo-zuh-buhl, The Terrace, Cultural Quarter, Grantham Road, Lincoln, LN2 1BD On 10/11/2010 19:37, Chris Price wrote: On 10 November 2010 18:52, Thierry Koblentz thierry.koble...@gmail.com mailto:thierry.koble...@gmail.com wrote: I don't think lists should be used for this (there might be a case for a OL in case of dependant selects, but that would be a stretch). In the case of DL, I'd say that the relationship between DTs and DDs is no better than the one created by the labels and their for attribute. fwiw, I use divs to wrap controls with their label, not because it makes things easier to style, but because of the way the form would look with no such wrapper and no styling. I'm with you there Thierry Fieldset is, by definition, a grouping within a form. The legend describes the fieldset. The label for and input id link to each other. There is no subset of fieldset like dt is to dl or li is to ul so the only logical element would be a div which is neutral. I can only imagine I would have
Re: [WSG] HTML5 - Marking up forms
On Wed, Nov 10, 2010 at 8:45 PM, Kevin Rapley ke...@digikev.co.uk wrote: I would be interested to gather your thoughts around this solution, using progress tags to mark progress through the form. A possible problem with this is that there is no guarantee that the user has completed earlier fields before moving on to later fields. I'd suggest adding a single progress element with JS, and tweaking its value as the user actually completes the form. -- Benjamin Hawkes-Lewis *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
