Re: [WSG] labels as input wrappers + h6 in place of legend
- Original Message - From: Jason Grant [EMAIL PROTECTED] Boots.com is one of the most 'formsy' web sites out there. I suggest you sign up for it and try to see what has been done there... Regards. boots.com redirects to bootsus.bri-global.com/ - is this the site you were referring to? Looks OK, but uses questionalble extra div class=clearer/, lacks fieldset/ and/or legend, and no indication of required fields. Also, erors out when attemptingto submit the form for new user The leftformcell and rightformcell definitey provide a lot of flexibility, but is questionably overboard vs. applying label class=leftformcellinput class=rightformcell /. I had not thought about creating two seperate wrappers...trying to get it done with one or less. I am close to having a version 1 to post for review...I may do two different approaches to look for better feedback - Pro vs. Cons for each approach. Thanks. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] labels as input wrappers + h6 in place of legend
My boots.com does not redirect to that URL.Try this insted: http://www.boots.com/webapp/wcs/stores/servlet/TopCategoriesDisplay?langId=-1storeId=10052 http://www.boots.com/webapp/wcs/stores/servlet/TopCategoriesDisplay?langId=-1storeId=10052 Cheers, Jason On Sun, Oct 19, 2008 at 7:47 PM, [EMAIL PROTECTED] wrote: - Original Message - From: Jason Grant [EMAIL PROTECTED] Boots.com is one of the most 'formsy' web sites out there. I suggest you sign up for it and try to see what has been done there... Regards. boots.com redirects to bootsus.bri-global.com/ - is this the site you were referring to? Looks OK, but uses questionalble extra div class=clearer/, lacks fieldset/ and/or legend, and no indication of required fields. Also, erors out when attemptingto submit the form for new user The leftformcell and rightformcell definitey provide a lot of flexibility, but is questionably overboard vs. applying label class=leftformcellinput class=rightformcell /. I had not thought about creating two seperate wrappers...trying to get it done with one or less. I am close to having a version 1 to post for review...I may do two different approaches to look for better feedback - Pro vs. Cons for each approach. Thanks. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Jason Grant BSc, MSc CEO, Flexewebs Ltd. www.flexewebs.com [EMAIL PROTECTED] +44 (0)7748 591 770 Company no.: 5587469 www.twitter.com/flexewebs www.linkedin.com/in/flexewebs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] labels as input wrappers + h6 in place of legend
I have an obsession with web form styling - I cannot stand ugly web form
:-)
Fieldset, label and input tags are enough for basic and nice styling, no
extra div needed.
fieldset
legendspanContact Information/span/legend
label for= xyz/label
input id= type=checkbox class=add-a-class
/fieldset
That is for the site I have full control and know I will be the only one
updating the site. But if I make a template and the targeted users are
people who want to build their sites, then definitely bloated divs to
prevent customer service nightmare. I will even eliminate legend with a
clear conscious. Alas! IE and Opera are not kind to form elements.
tee
I use the same format as you do, but without the span in the legend. take
it a step further though and give the form element itself and id and start
in my styles by calling that id. First I define default styles for all
elements (I do use and believe in the css reset). Then based on which form
it is, the attributes are adjusted as needed by the form id in the styles.
I have to consider accessibility since I do government stuff a lot, so
headings just don't do it.
#FormID #FieldsetID #whatever { whatever }
--
Susan R. Grossman
[EMAIL PROTECTED]
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] labels as input wrappers + h6 in place of legend
Actually, the label tag wrapped around form input is the old traditional method. The for attribute method was introduced later to allow designers greater flexibility in positioning/styling forms whilst maintaining accessibility. On Fri, October 17, 2008 12:53 am, [EMAIL PROTECTED] wrote: Thank you everyone for your replies. So it seems the trusty old traditional filedset llegendContact Information/legend label for=nameName/labelbr / input id=name type=text /fieldset is the way to go to keep all browsers and screen readers happy. I think I can likely lose the br / and replace that with a display: block; on the label or input. This is the first of a series of questions I will have. I have the opportunity to rewrite some extremely complex forms for a very large CMS and I want to make them the best they can be. Thanks! - Original Message - From: Mike at Green-Beast.com [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Thursday, October 16, 2008 11:07:33 AM GMT -05:00 US/Canada Eastern Subject: Re: [WSG] labels as input wrappers + h6 in place of legend Hi Ben, I've always used label arount input fields [...] I don't think I've ever seen any recommendation against it. Here's one for you: http://green-beast.com/blog/?p=254 I haven't been paying attention to this, and someone's probably already said it (if so, sorry), but it's also worth noting that only form elements will be read in a screen reader's forms mode. Being as such, it's better to style the legend to look like an h6 rather than substituting it for one. Respectfully, Mike Cherim *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] labels as input wrappers + h6 in place of legend
- Original Message - From: Jason Grant [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Friday, October 17, 2008 4:51:46 AM GMT -05:00 US/Canada Eastern Subject: Re: [WSG] labels as input wrappers + h6 in place of legend You should also be aware of the fact that for a commercial project the below code snippet you posted will not be sufficient, as it does not have enought styling/behavioural hooks in it... -- That's my next bone to pick, and why I really liked the label wrapper. I really dislike the idea of wrapping the label input in a div but I will likely have to for the exact point you have made. I need lots of flexibility but want minimal code bloat. Here's a simplified version of where I am heading: ... fieldset class=parent id=address legendspanContact Information/span/legend div class=nameFirst label for=nameFirstName/label input id=nameFirst type=text /div div class=nameLast label for=nameLastName/label input id=nameLast type=text /div fieldset class=child id=dob legendspanDate of Birth/span/legend div class=dobMonth label for=dobMonthMonth/label input id=dobMonth type=text /div div class=dobDay label for=dobDayDay/label input id=dobDay type=text /div div class=dobYear label for=dobYearDay/label input id=dobYear type=text /div /fieldset /fieldset ... Why the span in the fieldset? I may potentially need to style that area as a sliding doors tab, plus it seems easier to achieve consistent cross-browser styles on the span as opposed to the legend. The nested fieldset is to allow for the DOB to me horizontal if/when desired. Still lots to do regarding other form elements...more questions as I progress. I will also post an example. Thanks thus far! /fieldset Seems painfully blaoted to me, but I need a lot of control to match virtually any situation *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] labels as input wrappers + h6 in place of legend
You don't need the nested fieldset for styling, but for semantics and general better structure/meaning of your form. It so happens that you can also then style that section nicer if you need to. More bloated than it needs to be? Yes. Is it better to use a list instead of divs? Of course it is. As you get more advanced in this, the whole 'set' will get even more bloated. Enjoy your HTML forms 'discovery'. Cheers, Jason On Fri, Oct 17, 2008 at 5:50 PM, [EMAIL PROTECTED] wrote: - Original Message - From: Jason Grant [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Friday, October 17, 2008 4:51:46 AM GMT -05:00 US/Canada Eastern Subject: Re: [WSG] labels as input wrappers + h6 in place of legend You should also be aware of the fact that for a commercial project the below code snippet you posted will not be sufficient, as it does not have enought styling/behavioural hooks in it... -- That's my next bone to pick, and why I really liked the label wrapper. I really dislike the idea of wrapping the label input in a div but I will likely have to for the exact point you have made. I need lots of flexibility but want minimal code bloat. Here's a simplified version of where I am heading: ... fieldset class=parent id=address legendspanContact Information/span/legend div class=nameFirst label for=nameFirstName/label input id=nameFirst type=text /div div class=nameLast label for=nameLastName/label input id=nameLast type=text/div fieldset class=child id=dob legendspanDate of Birth/span/legend div class=dobMonth label for=dobMonthMonth/label input id=dobMonth type=text /div div class=dobDay label for=dobDayDay/label input id=dobDay type=text /div div class=dobYear label for=dobYearDay/label input id=dobYear type=text /div /fieldset /fieldset ... Why the span in the fieldset? I may potentially need to style that area as a sliding doors tab, plus it seems easier to achieve consistent cross-browser styles on the span as opposed to the legend. The nested fieldset is to allow for the DOB to me horizontal if/when desired. Still lots to do regarding other form elements...more questions as I progress. I will also post an example. Thanks thus far! /fieldset Seems painfully blaoted to me, but I need a lot of control to match virtually any situation *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Jason Grant BSc, MSc CEO, Flexewebs Ltd. www.flexewebs.com [EMAIL PROTECTED] +44 (0)7748 591 770 Company no.: 5587469 www.twitter.com/flexewebs www.linkedin.com/in/flexewebs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] labels as input wrappers + h6 in place of legend
On Oct 17, 2008, at 9:50 AM, [EMAIL PROTECTED] wrote: That's my next bone to pick, and why I really liked the label wrapper. I really dislike the idea of wrapping the label input in a div but I will likely have to for the exact point you have made. I need lots of flexibility but want minimal code bloat. Here's a simplified version of where I am heading: ... fieldset class=parent id=address legendspanContact Information/span/legend div class=nameFirst label for=nameFirstName/label input id=nameFirst type=text /div div class=nameLast label for=nameLastName/label input id=nameLast type=text /div /fieldset ... Why the span in the fieldset? I may potentially need to style that area as a sliding doors tab, plus it seems easier to achieve consistent cross-browser styles on the span as opposed to the legend. The nested fieldset is to allow for the DOB to me horizontal if/ when desired. Still lots to do regarding other form elements...more questions as I progress. I will also post an example. Thanks thus far! I have an obsession with web form styling - I cannot stand ugly web form :-) So here is my two cents: if you want consistent cross-browser web form that looks nice. Add class in the input instead, especially when it involves using checkboxes, radio button, borders for input field, select and multiselect. Though you can utilize input ID, but for a web form, or various forms used throughout entire site that have many checkboxes, radio buttons and select options, using class will be a lot clearer for your style sheet and no need for extra div to wrap up each form element. Fieldset, label and input tags are enough for basic and nice styling, no extra div needed. fieldset legendspanContact Information/span/legend label for= xyz/label input id= type=checkbox class=add-a-class /fieldset That is for the site I have full control and know I will be the only one updating the site. But if I make a template and the targeted users are people who want to build their sites, then definitely bloated divs to prevent customer service nightmare. I will even eliminate legend with a clear conscious. Alas! IE and Opera are not kind to form elements. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] labels as input wrappers + h6 in place of legend
Boots.com is one of the most 'formsy' web sites out there. I suggest you sign up for it and try to see what has been done there. It's not bad and it will give insight into today's commercial needs from clients regarding forms. Hope that helps as a concrete example. Regards. On Fri, Oct 17, 2008 at 9:22 PM, tee [EMAIL PROTECTED] wrote: On Oct 17, 2008, at 9:50 AM, [EMAIL PROTECTED] wrote: That's my next bone to pick, and why I really liked the label wrapper. I really dislike the idea of wrapping the label input in a div but I will likely have to for the exact point you have made. I need lots of flexibility but want minimal code bloat. Here's a simplified version of where I am heading: ... fieldset class=parent id=address legendspanContact Information/span/legend div class=nameFirst label for=nameFirstName/label input id=nameFirst type=text /div div class=nameLast label for=nameLastName/label input id=nameLast type=text /div /fieldset ... Why the span in the fieldset? I may potentially need to style that area as a sliding doors tab, plus it seems easier to achieve consistent cross-browser styles on the span as opposed to the legend. The nested fieldset is to allow for the DOB to me horizontal if/when desired. Still lots to do regarding other form elements...more questions as I progress. I will also post an example. Thanks thus far! I have an obsession with web form styling - I cannot stand ugly web form :-) So here is my two cents: if you want consistent cross-browser web form that looks nice. Add class in the input instead, especially when it involves using checkboxes, radio button, borders for input field, select and multiselect. Though you can utilize input ID, but for a web form, or various forms used throughout entire site that have many checkboxes, radio buttons and select options, using class will be a lot clearer for your style sheet and no need for extra div to wrap up each form element. Fieldset, label and input tags are enough for basic and nice styling, no extra div needed. fieldset legendspanContact Information/span/legend label for= xyz/label input id= type=checkbox class=add-a-class /fieldset That is for the site I have full control and know I will be the only one updating the site. But if I make a template and the targeted users are people who want to build their sites, then definitely bloated divs to prevent customer service nightmare. I will even eliminate legend with a clear conscious. Alas! IE and Opera are not kind to form elements. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Jason Grant BSc, MSc CEO, Flexewebs Ltd. www.flexewebs.com [EMAIL PROTECTED] +44 (0)7748 591 770 Company no.: 5587469 www.twitter.com/flexewebs www.linkedin.com/in/flexewebs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] labels as input wrappers + h6 in place of legend
Stuart Foulstone wrote: Actually, the label tag wrapped around form input is the old traditional method. The for attribute method was introduced later to allow designers greater flexibility in positioning/styling forms whilst maintaining accessibility. Really? As far as I can tell looking at the historical record, Internet Explorer 4.0 and HTML 4.0 introduced the LABEL element, including the FOR attribute, IE didn't support implicit association until version 7.0, and the old tutorials tended to teach it the FOR attribute, so I'm not sure what tradition you're referring to. http://www.w3.org/TR/1998/REC-html40-19980424/appendix/changes.html#h-A.1.1.1 http://www.w3.org/TR/1998/REC-html40-19980424/interact/forms.html#h-17.9.1 http://www.sxlist.com/TECHREF/language/html/ib/Forms/label.htm http://www.insidedhtml.com/tips/elements/ts17/page1.asp http://www.cs.tut.fi/~jkorpela/forms/kbd.html -- Benjamin Hawkes-Lewis -- Benjamin Hawkes-Lewis *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] labels as input wrappers + h6 in place of legend
I am looking for feedback on two questions, based on the simple form snippet below. fieldset legendbPersonal Details/b/legend label for=nameName:/label input id=name type=text name=name size=30 br label for=idID Number:/label input id=id type=text name=id number size=10 /fieldset Question 1: Is it acceptable, or advisable, to use a header tag h6 in place of the legend in order to get cross-browsers consistency when dealing with complex form styling? How much impact might this have on accessibility, if any? Question 2: I don't see many folks using the label as a wrapper to contain the input. Any reason not to do this? It allows for the br / to be removed via display: block; on the label tag as well as allowing users (of most browsers) to click on a much larger label to select the accompanying input. fieldset h6Personal Details/h6 label for=nameName: input id=name type=text name=name size=30 /label label for=idID Number: input id=id type=text name=id number size=10 /label /fieldset *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] labels as input wrappers + h6 in place of legend
Jason Grant wrote: Ok you got both of these quite wrong for following reasons: In the first instance you shouldn't use b or br / at all. In the second instance you should not wrap input into label as the label should quite clearly be used for denoting a label of an input field and not the input field itself. Not so: When [the for attribute is] absent, the label being defined is associated with the element's contents. LABEL First Name INPUT type=text name=firstname /LABEL -- http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1 -- David Dorward http://dorward.me.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] labels as input wrappers + h6 in place of legend
I've always used label arount input fields labeltext: input type=text //label without the for= attribute. I've never had problems with it, and I don't think I've ever seen any recommendation against it. Johan Douma [EMAIL PROTECTED] 2008/10/16 David Dorward [EMAIL PROTECTED] Jason Grant wrote: Ok you got both of these quite wrong for following reasons: In the first instance you shouldn't use b or br / at all. In the second instance you should not wrap input into label as the label should quite clearly be used for denoting a label of an input field and not the input field itself. Not so: When [the for attribute is] absent, the label being defined is associated with the element's contents. LABEL First Name INPUT type=text name=firstname /LABEL -- http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1 -- David Dorward http://dorward.me.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] labels as input wrappers + h6 in place of legend
This is the first time for me to see someone proposing use of labelinput //label structure.I agree that ol is not strictly necessary and that a form is not necessarily a list, but one could argue that you are dealing with a list of form input elements. Read more why I do this here: http://www.alistapart.com/articles/prettyaccessibleforms Using a list also gives better control over the look as I never do: float:left; clear: left; since that proves to cause cross browser issues more often than not. Cheers, Jason On Thu, Oct 16, 2008 at 1:23 PM, Johan Douma [EMAIL PROTECTED] wrote: I've always used label arount input fields labeltext: input type=text //label without the for= attribute. I've never had problems with it, and I don't think I've ever seen any recommendation against it. Johan Douma [EMAIL PROTECTED] 2008/10/16 David Dorward [EMAIL PROTECTED] Jason Grant wrote: Ok you got both of these quite wrong for following reasons: In the first instance you shouldn't use b or br / at all. In the second instance you should not wrap input into label as the label should quite clearly be used for denoting a label of an input field and not the input field itself. Not so: When [the for attribute is] absent, the label being defined is associated with the element's contents. LABEL First Name INPUT type=text name=firstname /LABEL -- http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1 -- David Dorward http://dorward.me.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Jason Grant BSc, MSc CEO, Flexewebs Ltd. www.flexewebs.com [EMAIL PROTECTED] +44 (0)7748 591 770 Company no.: 5587469 www.twitter.com/flexewebs www.linkedin.com/in/flexewebs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] labels as input wrappers + h6 in place of legend
Johan – what you are describing is the correct usage in that scenario. Thanks, Tatham Oddie callto:+61414275989 call:+61414275989, callto:+61280113982 call:+61280113982, skype:tathamoddie?call skype:tathamoddie, msnim:[EMAIL PROTECTED] msn:[EMAIL PROTECTED], http://tatham.oddie.com.au/ tatham.oddie.com.au From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Johan Douma Sent: Thursday, 16 October 2008 11:23 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] labels as input wrappers + h6 in place of legend I've always used label arount input fields labeltext: input type=text //label without the for= attribute. I've never had problems with it, and I don't think I've ever seen any recommendation against it. Johan Douma [EMAIL PROTECTED] 2008/10/16 David Dorward [EMAIL PROTECTED] Jason Grant wrote: Ok you got both of these quite wrong for following reasons: In the first instance you shouldn't use b or br / at all. In the second instance you should not wrap input into label as the label should quite clearly be used for denoting a label of an input field and not the input field itself. Not so: When [the for attribute is] absent, the label being defined is associated with the element's contents. LABEL First Name INPUT type=text name=firstname /LABEL -- http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1 -- David Dorward http://dorward.me.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] labels as input wrappers + h6 in place of legend
Johan Douma wrote: I've always used label arount input fields labeltext: input type=text //label without the for= attribute. I've never had problems with it, and I don't think I've ever seen any recommendation against it. There's a discussion about some problems with that pattern at: http://www.w3.org/TR/WCAG20-TECHS/H44.html and http://green-beast.com/blog/?p=254 I'd suggest just using: div class=fieldlabel for=field-idLabel text:/label input id=field-id name=field-key type=text/div (substituting whatever you feel most appropriate for DIV) -- Benjamin Hawkes-Lewis *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] labels as input wrappers + h6 in place of legend
2008/10/16 David Dorward [EMAIL PROTECTED]
Jason Grant wrote:
Ok you got both of these quite wrong for following reasons:
In the first instance you shouldn't use b or br / at all.
In the second instance you should not wrap input into label as the
label should quite clearly be used for denoting a label of an input
field and not the input field itself.
Not so:
When [the for attribute is] absent, the label being defined is
associated with the element's contents.
Which it isn't in the original example provided, the *for* attribute is
provided.
In addition, there is no need to use the li elements around the input
elements, as you can use the display: option in CSS to make them appear like
a list, which is probably what you want, and not going through the hassle of
adding the list HTML elements. Since it is technically not a list.
My suggestion would be something to the content of:
fieldset
*legend //h6 /
*label for=name
input type=text id=name /
*etc...
*/fieldset
CSS:
label, input {
float: left;
clear: left;
}
Or, alternatively;
label, input {
display: list-element;
}
Or just mess around with it. Dude...
Also, no one has yet to answer the original question. And my suggestion is
no, because legend can easily be configured via CSS to look and appear
exactly as h6. So there.
/Svip
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] labels as input wrappers + h6 in place of legend
Ok you got both of these quite wrong for following reasons: In the first instance you shouldn't use b or br / at all. In the second instance you should not wrap input into label as the label should quite clearly be used for denoting a label of an input field and not the input field itself. Using a heading instead of a legend is OK, but use legend if the design allows it for even better accessibility. What you ought to do is something like this. fieldset h3Personal details/h3 ol li label for=surnameSurname/label input type=text name=surname id=surname / /li li label for=emailEmail/label input type=text name=email id=email / /li /ol /fieldset Each /li is a container for labelinput pairs. No need for br/. Each element is nicely 'styleable' via CSS. The ol gives a user insight into how many elements exist inside the given fieldset so for non-sighted user they will know to expect a more complex form if there are 15 items in the given list. You can give each li a class attribute to give it a more specific hook for styling or behaviour purposes. Hope this helps. Jason On Thu, Oct 16, 2008 at 12:35 PM, [EMAIL PROTECTED] wrote: I am looking for feedback on two questions, based on the simple form snippet below. fieldset legendbPersonal Details/b/legend label for=nameName:/label input id=name type=text name=name size=30 br label for=idID Number:/label input id=id type=text name=id number size=10 /fieldset Question 1: Is it acceptable, or advisable, to use a header tag h6 in place of the legend in order to get cross-browsers consistency when dealing with complex form styling? How much impact might this have on accessibility, if any? Question 2: I don't see many folks using the label as a wrapper to contain the input. Any reason not to do this? It allows for the br / to be removed via display: block; on the label tag as well as allowing users (of most browsers) to click on a much larger label to select the accompanying input. fieldset h6Personal Details/h6 label for=nameName: input id=name type=text name=name size=30 /label label for=idID Number: input id=id type=text name=id number size=10 /label /fieldset *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Jason Grant BSc, MSc CEO, Flexewebs Ltd. www.flexewebs.com [EMAIL PROTECTED] +44 (0)7748 591 770 Company no.: 5587469 www.twitter.com/flexewebs www.linkedin.com/in/flexewebs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] labels as input wrappers + h6 in place of legend
Hi Ben, I've always used label arount input fields [...] I don't think I've ever seen any recommendation against it. Here's one for you: http://green-beast.com/blog/?p=254 I haven't been paying attention to this, and someone's probably already said it (if so, sorry), but it's also worth noting that only form elements will be read in a screen reader's forms mode. Being as such, it's better to style the legend to look like an h6 rather than substituting it for one. Respectfully, Mike Cherim *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] labels as input wrappers + h6 in place of legend
Johan Douma wrote: I've always used label arount input fields labeltext: input type=text //label without the for= attribute. I've never had problems with it, and I don't think I've ever seen any recommendation against it. Support is weaker then for the for attribute, so I would avoid it. It is just worth pointing out that it isn't wrong to put the input inside the label. -- David Dorward http://dorward.me.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] labels as input wrappers + h6 in place of legend
I understand where you’re coming from because for some designs the legend isn’t easy to style consistently cross-browser, and so sometimes I have used a heading instead. However if possible, using the legend is much better. I also used to wrap form inputs in labels for the same reason as you say – styling the form becomes easy – however Mike’s article is very insightful and since then I’ve changed what I did and wrap as he suggests. So I just realised I’m basically echoing Mike’s comments, as that’s what I have also discerned as my best practice after quite a bit of form css experience and research. J Rach From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: 16 October 2008 12:35 To: wsg@webstandardsgroup.org Subject: [WSG] labels as input wrappers + h6 in place of legend I am looking for feedback on two questions, based on the simple form snippet below. fieldset legendbPersonal Details/b/legend label for=nameName:/label input id=name type=text name=name size=30 br label for=idID Number:/label input id=id type=text name=id number size=10 /fieldset Question 1: Is it acceptable, or advisable, to use a header tag h6 in place of the legend in order to get cross-browsers consistency when dealing with complex form styling? How much impact might this have on accessibility, if any? Question 2: I don't see many folks using the label as a wrapper to contain the input. Any reason not to do this? It allows for the br / to be removed via display: block; on the label tag as well as allowing users (of most browsers) to click on a much larger label to select the accompanying input. fieldset h6Personal Details/h6 label for=nameName: input id=name type=text name=name size=30 /label label for=idID Number: input id=id type=text name=id number size=10 /label /fieldset *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] labels as input wrappers + h6 in place of legend
Thank you everyone for your replies. So it seems the trusty old traditional filedset llegendContact Information/legend label for=nameName/labelbr / input id=name type=text /fieldset is the way to go to keep all browsers and screen readers happy. I think I can likely lose the br / and replace that with a display: block; on the label or input. This is the first of a series of questions I will have. I have the opportunity to rewrite some extremely complex forms for a very large CMS and I want to make them the best they can be. Thanks! - Original Message - From: Mike at Green-Beast.com [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Thursday, October 16, 2008 11:07:33 AM GMT -05:00 US/Canada Eastern Subject: Re: [WSG] labels as input wrappers + h6 in place of legend Hi Ben, I've always used label arount input fields [...] I don't think I've ever seen any recommendation against it. Here's one for you: http://green-beast.com/blog/?p=254 I haven't been paying attention to this, and someone's probably already said it (if so, sorry), but it's also worth noting that only form elements will be read in a screen reader's forms mode. Being as such, it's better to style the legend to look like an h6 rather than substituting it for one. Respectfully, Mike Cherim *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
