Re: [WSG] HTML5 - Marking up forms

2010-11-10 Thread Benjamin Hawkes-Lewis 
On Wed, Nov 10, 2010 at 8: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.

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

Re: [WSG] HTML5 - Marking up forms

2010-11-10 Thread Joseph Taylor 

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 legend text




Label for text input










Form legend text


Label for radio group










Radio label











Radio label











Radio label









Form legend text


Label for checkbox group









Checkbox label










Checkbox label











Checkbox label










Option label text




Option text
Option text
Option text
Option text
Option text








Option label text




Choose Your 
Product
data-icon="/graphics/structure/forms/products/iphone.png" 
data-html-text="iPhone 4in stock">iPhone 4
data-icon="/graphics/structure/forms/products/ipod.png" 
data-html-text="iPod in stock">iPod
data-icon="/graphics/structure/forms/products/air.png" 
data-html-text="MacBook Airout of stock">MacBook 
Air
data-icon="/graphics/structure/forms/products/imac.png" 
data-html-text="iMac Stationin stock">iMac 
Station









Label for textarea



rows="10" cols="51">










Kevin Rapley
Yoo-zuh-buhl | User Experience Consultant
0115 714 2337 | 0772 345 7862
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 
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 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
*** 



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

2010-11-10 Thread Kevin Rapley 
I would be interested to gather your thoughts around this solution, 
using progress tags to mark progress through the form.




Form legend text




Label for text input










Form legend text


Label for radio group










Radio label











Radio label











Radio label









Form legend text


Label for checkbox group









Checkbox label










Checkbox label











Checkbox label










Option label text




Option text
Option text
Option text
Option text
Option text








Option label text




Choose Your 
Product
data-icon="/graphics/structure/forms/products/iphone.png" 
data-html-text="iPhone 4in stock">iPhone 4
data-icon="/graphics/structure/forms/products/ipod.png" 
data-html-text="iPod in stock">iPod
data-html-text="MacBook Airout of stock">MacBook 
Air
data-icon="/graphics/structure/forms/products/imac.png" 
data-html-text="iMac Stationin stock">iMac 
Station









Label for textarea



rows="10" cols="51">










Kevin Rapley
Yoo-zuh-buhl | User Experience Consultant
0115 714 2337 | 0772 345 7862
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 
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 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
*** 



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

2010-11-10 Thread Chris Price 
On 10 November 2010 18:52, Thierry Koblentz 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 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

2010-11-10 Thread Thierry Koblentz 
> 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  and , 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

2010-11-10 Thread Kepler Gelotte 
There are a ton of ways to do this. At the moment I stick with one of two
formulas:


My Legend

My Label








I believe the “for” attribute should reference the “id” attribute of the
input element. So the above example should be:




My Legend

My Label






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:


My Legend

My Label




Or if its a bunch of checkboxes or something:


My Legend



Label for the checkbox



Label for the checkbox



Label for the checkbox





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  and , 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>  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 Guideline

Re: [WSG] HTML5 - Marking up forms

2010-11-10 Thread Joseph Taylor 

Eric,

There are a ton of ways to do this. At the moment I stick with one of 
two formulas:



My Legend

My Label




Or if its a bunch of checkboxes or something:


My Legend



Label for the checkbox



Label for the checkbox



Label for the checkbox




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  
and, 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"  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

2010-11-10 Thread Steve Green 
I'm with Patrick on this one. The ,  and  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  and , 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"  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

2010-11-10 Thread Eric Taylor 
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  and , 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"  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

2010-11-10 Thread Patrick H. Lauke 

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