Re: [WSG] Styling forms
Thierry Koblentz wrote:
On Behalf Of Mike at Green-Beast.com
As a side note, I style these BRs with display:none.
I'm curious, what effect does that have on the styled page?Do you do
something like...
label {
display : block;
}
br {
display : none;
}
Hi Mike,
I don't use display:block, most of the time I float everything and use the
label to clear.
Depending on the width of the labels I may use text-align:right; to move the
text in the label toward the text box.
I also set the widths in EMs, to avoid the text to wrap if it grows. With the fieldset width set in pixels, when these elements grow, they simply pile up without breaking anything.
If I kill the BRs it is just to make sure they don't create any vertical space.
That sounds like quite an elegant solution. I may have to try that out.
Thanks.
--
Christian Snodgrass
Azure Ronin Web Design
http://www.arwebdesign.net/ http://www.arwebdesign.net
Phone: 859.816.7955
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [OBORONA-SPAM] Re: [WSG] Styling forms
Perhaps Chris But standards people are interested in following standards, not what others may do. We are meant to be leaders, not followers. I also know some people who still want tabled layouts running in Mambo. That doesn't mean their options are either standards compliant nor sensible. There's nothing stopping us from: id =form element_1 id =form element_2 id =form element_3 if we need to order elements. Or have I missed something? Joe On Feb 8 2008, at 07:30, Chris Knowles wrote: Joe Ortenzi wrote: I would have thought so. Isn't that what the id attribute is used for? Something for JavaScript to reference? Chris Knowles wrote: CK from what I can see the reason lists have come into use in forms has a CK lot to do with javascript libraries that have re-ordering of elements by CK drag and drop that tend to work mainly on lists. Therefore lists are CK useful to wrap form elements if you are creating form building software CK so the form elements can be easily reordered by non-technical users. I suppose that form elements can be easily reordered even if form elements are not LI-wrapped. Can't they? yes, but my point was that a lot of js libraries base drag and drop re-ordering of elements around list elements and not other elements. And I have noticed a lot of form building services use lists to markup forms because they require drag and drop re- ordering of form elements. So I'm suggesting they are only using list elements because they can add drag and drop easily by using an external library that supports it, not because they think lists are necessarily a good markup choice. -- Chris Knowles *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** Joe Ortenzi [EMAIL PROTECTED] www.joiz.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms (Away)
I'll be back on 12/2/2008. For any urgent query please contact Jimmy Liu or Kishor Mistry. Regards Teru Yanagihashi DID-IT 88287 8902287 (DDI) *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
Chris Knowles wrote: CK yes, but my point was that a lot of js libraries base drag and drop CK re-ordering of elements around list elements and not other elements. And CK I have noticed a lot of form building services use lists to markup forms CK because they require drag and drop re-ordering of form elements. So I'm CK suggesting they are only using list elements because they can add drag CK and drop easily by using an external library that supports it, not CK because they think lists are necessarily a good markup choice. So this is the problem of those JS libraries. Do we really need to break semantics because of this problem? I prefer fixing JS instead. Regards, Alexey Novikov http://studiomade.ru *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
Hi Rachel, I'd be very interested in reading your article when it's ready For better or worse, it's published: http://green-beast.com/blog/?p=254 Cheers. Mike *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
I'm with you there. I also check my sites without styling. Gives an idea if the document is well structured. I'll be posting a link to the archive of this thread on the forum I regulary use. The common guide to people asking to mark up forms has been to use lists. It'll be interesting too see the discussion spark off there as well. Your article will be nice food for thoughts. Straying away from the topic a little. (I suppose I should've created a new topic?) I noticed you used small on your blog. In HTML4 it's a font style element on the line with b and i etc. However, in HTML5 it now got a meaning. Small print. The question is, even though HTML5 is still a draft, can we say that small has a semantic meaning now? Even though HTML, which is a current recommendation, doesn't define it as such? I've often found my self wanting to use small for small prints, side comments and such, but until HTML5 came along I thought it was just the way I interpreted the small tag, so I didn't make any use of it. - Original Message - From: Mike at Green-Beast.com [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Friday, February 08, 2008 6:51 PM Subject: Re: [WSG] Styling forms Hello Thomas, But I'm not sure I feel comfortable with a br between the label and input. I know developers are mostly split down the middle about this issue that I've seen. To me, and perhaps this is really silly, but I really like my sites to look and be just as usable with styles off as they are with styles on, and I find adding breaks really neatens up the form visually when viewing the site without styles, organizing it a bit. To me that's a positive thing. I don't think the break use has any bearing on the accessibility of the form's elements so that doesn't seem to have bearing on my decision. No negatives that I'm aware of. Semantically speaking, I think the introduction of a break is akin to adding a slight pause. I don't think that has any bearing on accessibility to that end either. I will say this, though, I do respect the choice made by those who choose not to use it. So much so that the third version of my contact form script has a configuration variable called $add_breaks to which entering yes will add them in and entering no remove them. Each to their own I figured. No harm either way that I know of so I may as well be accommodating :) Cheers. Mike - Original Message - From: Thomas Thomassen [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Friday, February 08, 2008 11:32 AM Subject: Re: [WSG] Styling forms Very interesting article. I'm reevaluating my options about lists on forms. But I'm not sure I feel comfortable with a br between the label and input. Semantically it looks like it separates them, even though the FOR attributes connects them. If the br came after the input then both the label and the input ends up in the same line without any CSS styling. - Original Message - From: Mike at Green-Beast.com [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Friday, February 08, 2008 3:34 PM Subject: Re: [WSG] Styling forms Hi Rachel, I'd be very interested in reading your article when it's ready For better or worse, it's published: http://green-beast.com/blog/?p=254 Cheers. Mike *** 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] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
Very interesting article. I'm reevaluating my options about lists on forms. But I'm not sure I feel comfortable with a br between the label and input. Semantically it looks like it separates them, even though the FOR attributes connects them. If the br came after the input then both the label and the input ends up in the same line without any CSS styling. - Original Message - From: Mike at Green-Beast.com [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Friday, February 08, 2008 3:34 PM Subject: Re: [WSG] Styling forms Hi Rachel, I'd be very interested in reading your article when it's ready For better or worse, it's published: http://green-beast.com/blog/?p=254 Cheers. Mike *** 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] Styling forms
On Behalf Of Mike at Green-Beast.com I don't think the break use has any bearing on the accessibility of the form's elements so that doesn't seem to have bearing on my decision. No negatives that I'm aware of. Semantically speaking, I think the introduction of a break is akin to adding a slight pause. I don't think that has any bearing on accessibility to that end either. I use the line break because without it and without styles support, labels and input fields appear next to each other. I think this may be confusing to some people; they could visually associate a label with the wrong input field. As a side note, I style these BRs with display:none. -- Regards, Thierry | http://www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Styling forms
-- origineel bericht -- Onderwerp: RE: [WSG] Styling forms Van:Thierry Koblentz [EMAIL PROTECTED] Datum: 08-02-2008 19:42 On Behalf Of Mike at Green-Beast.com I don't think the break use has any bearing on the accessibility of the form's elements so that doesn't seem to have bearing on my decision. No negatives that I'm aware of. Semantically speaking, I think the introduction of a break is akin to adding a slight pause. I don't think that has any bearing on accessibility to that end either. I use the line break because without it and without styles support, labels and input fields appear next to each other. I think this may be confusing to some people; they could visually associate a label with the wrong input field. As a side note, I style these BRs with display:none. -- Regards, Thierry | http://www.TJKDesign.com *** 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] Styling forms
Hello Thomas, But I'm not sure I feel comfortable with a br between the label and input. I know developers are mostly split down the middle about this issue that I've seen. To me, and perhaps this is really silly, but I really like my sites to look and be just as usable with styles off as they are with styles on, and I find adding breaks really neatens up the form visually when viewing the site without styles, organizing it a bit. To me that's a positive thing. I don't think the break use has any bearing on the accessibility of the form's elements so that doesn't seem to have bearing on my decision. No negatives that I'm aware of. Semantically speaking, I think the introduction of a break is akin to adding a slight pause. I don't think that has any bearing on accessibility to that end either. I will say this, though, I do respect the choice made by those who choose not to use it. So much so that the third version of my contact form script has a configuration variable called $add_breaks to which entering yes will add them in and entering no remove them. Each to their own I figured. No harm either way that I know of so I may as well be accommodating :) Cheers. Mike - Original Message - From: Thomas Thomassen [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Friday, February 08, 2008 11:32 AM Subject: Re: [WSG] Styling forms Very interesting article. I'm reevaluating my options about lists on forms. But I'm not sure I feel comfortable with a br between the label and input. Semantically it looks like it separates them, even though the FOR attributes connects them. If the br came after the input then both the label and the input ends up in the same line without any CSS styling. - Original Message - From: Mike at Green-Beast.com [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Friday, February 08, 2008 3:34 PM Subject: Re: [WSG] Styling forms Hi Rachel, I'd be very interested in reading your article when it's ready For better or worse, it's published: http://green-beast.com/blog/?p=254 Cheers. Mike *** 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: [OBORONA-SPAM] Re: [WSG] Styling forms
Joe Ortenzi wrote: Perhaps Chris But standards people are interested in following standards, not what others may do. We are meant to be leaders, not followers. I also know some people who still want tabled layouts running in Mambo. That doesn't mean their options are either standards compliant nor sensible. what i really meant was, I can't see why people would use lists for forms and I don't know why they have started doing so. I was just offering one possible reason why they have. There's nothing stopping us from: id =form element_1 id =form element_2 id =form element_3 if we need to order elements. Or have I missed something? yes, you can do it that way. I myself tried to implement a drag and drop on table rows which essentially worked quite well but messed up inexplicably at times in certain browsers and therefore wasn't an acceptable solution. And it took some time to code, so what I'm saying is, it's easier in a case like that to implement as a list if possible and use a pre-written javascript library that easily adds drag and drop to lists in a few lines of code. Therefore, you start using markup based on pre-written libraries and not on your natural choice. Hence, maybe thats where this using lists in forms has come from? -- Chris Knowles *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
Hi Thierry,
As a side note, I style these BRs with display:none.
I'm curious, what effect does that have on the styled page?Do you do
something like...
label {
display : block;
}
br {
display : none;
}
Thanks.
Mike
- Original Message -
From: Thierry Koblentz [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Friday, February 08, 2008 2:32 PM
Subject: RE: [WSG] Styling forms
On Behalf Of Mike at Green-Beast.com
I don't think the break use has any bearing on the accessibility of the
form's elements so that doesn't seem to have bearing on my decision. No
negatives that I'm aware of.
Semantically speaking, I think the introduction of a break is akin to
adding
a slight pause. I don't think that has any bearing on accessibility to
that
end either.
I use the line break because without it and without styles support, labels
and input fields appear next to each other.
I think this may be confusing to some people; they could visually
associate a label with the wrong input field.
As a side note, I style these BRs with display:none.
--
Regards,
Thierry | http://www.TJKDesign.com
***
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] Styling forms
On Behalf Of Mike at Green-Beast.com
As a side note, I style these BRs with display:none.
I'm curious, what effect does that have on the styled page?Do you do
something like...
label {
display : block;
}
br {
display : none;
}
Hi Mike,
I don't use display:block, most of the time I float everything and use the
label to clear.
Depending on the width of the labels I may use text-align:right; to move the
text in the label toward the text box.
I also set the widths in EMs, to avoid the text to wrap if it grows. With the
fieldset width set in pixels, when these elements grow, they simply pile up
without breaking anything.
If I kill the BRs it is just to make sure they don't create any vertical space.
--
Regards,
Thierry | http://www.TJKDesign.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Styling forms
I don't use display:block, most of the time I float everything and use the label to clear. Depending on the width of the labels I may use text-align:right; to move the text in the label toward the text box. I also set the widths in EMs, to avoid the text to wrap if it grows. With the fieldset width set in pixels, when these elements grow, they simply pile up without breaking anything. If I kill the BRs it is just to make sure they don't create any vertical space. Thanks Thierry. Mike *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
On Feb 6, 2008 6:03 AM, sri kumar [EMAIL PROTECTED] wrote: FYI, your approach is perfect to my knowledge, but the INPUT element should not wrapped by any LABEL element. It's not compliant/accessible... For somebody labelling themselves Webstandard guy, your knowledge is scarily off-base. FWIW, I think a form can easily be construed as being a list, whether ordered or unordered - it's a list of questions to which you have to provide the answers - so using a UL or OL is absolutely an acceptable solution. DL isn't for reasons that everyone should be aware of. They are also not paragraphs, so wrapping form elements in P is also not a suitable choice. Developers should also be aware of the way in which assistive technology such as screenreaders interacts for forms, specifically the forms mode that many have, where only form-related elements will be read out - this means that paragraphs of text and headings may not be available to screenreader users. -- - Matthew *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Styling forms
On Behalf Of Thomas Thomassen Sent: Thursday, February 07, 2008 10:29 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling forms While I see your point, what I find to be troublesome is that Label and Input are inline elements. While it's easy to wrap the Inputs in Labels and make the Labels block elements, with just plain HTML and no CSS that means a form's elements will end up all in one long line. fwiw, I think BRs are the perfect fit. -- Regards, Thierry | http://www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
fwiw, I think BRs are the perfect fit. I agree. :) Mike - Original Message - From: Thierry Koblentz [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Thursday, February 07, 2008 1:55 PM Subject: RE: [WSG] Styling forms On Behalf Of Thomas Thomassen Sent: Thursday, February 07, 2008 10:29 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling forms While I see your point, what I find to be troublesome is that Label and Input are inline elements. While it's easy to wrap the Inputs in Labels and make the Labels block elements, with just plain HTML and no CSS that means a form's elements will end up all in one long line. fwiw, I think BRs are the perfect fit. -- Regards, Thierry | http://www.TJKDesign.com *** 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] Styling forms
On Behalf Of Thierry Koblentz Sent: Thursday, February 07, 2008 10:29 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling forms TK fwiw, I think BRs are the perfect fit. BRs? Are BRs semantically correct? I believe they aren't. -- Regards, Alexey Novikov http://studiomade.ru *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
Still need some extra elements to organise them. Such as lists. I don't know why that would be. Proper use of form elements is the only organizational support needed. In my opinion, use of any other non-form elements on form's isn't necessary, or advantageous and, if not careful, can actually take away from the form. Just like a p doesn't need a td, a label + input combo doesn't need an li. Old conversation, I know, but I just had to chime in. Cheers. Mike Cherim http://green-beast.com/ - Original Message - From: Thomas Thomassen [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Thursday, February 07, 2008 11:05 AM Subject: Re: [WSG] Styling forms Fieldsets and Labels is present in HTML4 as well. Don't see anything new about that. Still need some extra elements to organise them. Such as lists. - Original Message - From: Joe Ortenzi To: wsg@webstandardsgroup.org Sent: Thursday, February 07, 2008 8:36 AM Subject: Re: [WSG] Styling forms Has anyone looked up the HTML 5 pages on form elements? http://www.w3.org/TR/html5-diff/ http://www.w3.org/html/wg/html5/#forms It's all fieldsets and labels... which makes more semantic sense than paragraphs, lists, and dd/dl JOe On Feb 6 2008, at 04:06, Steve Green wrote: There may be specific cases where it would be right to mark up a form as a list, although I can't think of one. As a general rule it would be wrong. The argument against marking up a form as a list is that a form is not a list. A form is one or more groups of form controls, and the fieldset element is the correct means by which form controls should be grouped. Within a fieldset, paragraph elements should be used for individual form controls. Steve -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Horowitz Sent: 06 February 2008 03:38 To: wsg@webstandardsgroup.org Subject: [WSG] Styling forms I've been looking at styling forms and I'm seeing some people mark them up as ordered lists and other using paragraphs. What are the arguments for the different markup types. -- Michael Horowitz Your Computer Consultant http://yourcomputerconsultant.com 561-394-9079 *** 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] *** Joe Ortenzi [EMAIL PROTECTED] www.joiz.com *** 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] Styling forms
Fieldsets and Labels is present in HTML4 as well. Don't see anything new about that. Still need some extra elements to organise them. Such as lists. - Original Message - From: Joe Ortenzi To: wsg@webstandardsgroup.org Sent: Thursday, February 07, 2008 8:36 AM Subject: Re: [WSG] Styling forms Has anyone looked up the HTML 5 pages on form elements? http://www.w3.org/TR/html5-diff/ http://www.w3.org/html/wg/html5/#forms It's all fieldsets and labels... which makes more semantic sense than paragraphs, lists, and dd/dl JOe On Feb 6 2008, at 04:06, Steve Green wrote: There may be specific cases where it would be right to mark up a form as a list, although I can't think of one. As a general rule it would be wrong. The argument against marking up a form as a list is that a form is not a list. A form is one or more groups of form controls, and the fieldset element is the correct means by which form controls should be grouped. Within a fieldset, paragraph elements should be used for individual form controls. Steve -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Horowitz Sent: 06 February 2008 03:38 To: wsg@webstandardsgroup.org Subject: [WSG] Styling forms I've been looking at styling forms and I'm seeing some people mark them up as ordered lists and other using paragraphs. What are the arguments for the different markup types. -- Michael Horowitz Your Computer Consultant http://yourcomputerconsultant.com 561-394-9079 *** 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] *** Joe Ortenzi [EMAIL PROTECTED] www.joiz.com *** 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] Styling forms
I was merely highlighting that in the forms section of the HTML 5 diff doc, it describes the structure of forms with fieldsets and labels. Why are lists required? By some reckoning, the fact that one input element follows another means you need to order them. This is a false precept. We do not need to order paragraphs to have _them_ make semantic sense, so why do form input elements need to be listed in an order in addition to the order they are provided in? The label/input relation is similar to DT/DD but since forms have their own version of the label content paradigm, we should use that one within forms, I would have thought. Joe On Feb 7 2008, at 16:05, Thomas Thomassen wrote: Fieldsets and Labels is present in HTML4 as well. Don't see anything new about that. Still need some extra elements to organise them. Such as lists. - Original Message - From: Joe Ortenzi To: wsg@webstandardsgroup.org Sent: Thursday, February 07, 2008 8:36 AM Subject: Re: [WSG] Styling forms Has anyone looked up the HTML 5 pages on form elements? http://www.w3.org/TR/html5-diff/ http://www.w3.org/html/wg/html5/#forms It's all fieldsets and labels... which makes more semantic sense than paragraphs, lists, and dd/dl JOe On Feb 6 2008, at 04:06, Steve Green wrote: There may be specific cases where it would be right to mark up a form as a list, although I can't think of one. As a general rule it would be wrong. The argument against marking up a form as a list is that a form is not a list. A form is one or more groups of form controls, and the fieldset element is the correct means by which form controls should be grouped. Within a fieldset, paragraph elements should be used for individual form controls. Steve -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Horowitz Sent: 06 February 2008 03:38 To: wsg@webstandardsgroup.org Subject: [WSG] Styling forms I've been looking at styling forms and I'm seeing some people mark them up as ordered lists and other using paragraphs. What are the arguments for the different markup types. -- Michael Horowitz Your Computer Consultant http://yourcomputerconsultant.com 561-394-9079 Joe Ortenzi [EMAIL PROTECTED] www.joiz.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
Well done Alexey! Are we not confusing semantics with presentational here? if it is OK to strip the presentational out of a list element (when we use a list for a navigation group and want our navigation elements in a row instead of a column) what is wrong with supplanting the inline quality of a label/input group by designating it a block element, and then group several form elements, or even each label input group with fieldsets? BTW: br / is the equivalent of a force carriage return and thus belongs within paragraphs, i thought! Joe On Feb 7 2008, at 19:55, Алексей Новиков wrote: On Behalf Of Thierry Koblentz Sent: Thursday, February 07, 2008 10:29 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling forms TK fwiw, I think BRs are the perfect fit. BRs? Are BRs semantically correct? I believe they aren't. -- Regards, Alexey Novikov http://studiomade.ru *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** Joe Ortenzi [EMAIL PROTECTED] www.joiz.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
While I see your point, what I find to be troublesome is that Label and Input are inline elements. While it's easy to wrap the Inputs in Labels and make the Labels block elements, with just plain HTML and no CSS that means a form's elements will end up all in one long line. Now, one can assume that most users will be using a user agent applying CSS, so it might not be much of an issue. But I don't see ptd as similar to label + inputli. - Original Message - From: Mike at Green-Beast.com [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Thursday, February 07, 2008 6:07 PM Subject: Re: [WSG] Styling forms Still need some extra elements to organise them. Such as lists. I don't know why that would be. Proper use of form elements is the only organizational support needed. In my opinion, use of any other non-form elements on form's isn't necessary, or advantageous and, if not careful, can actually take away from the form. Just like a p doesn't need a td, a label + input combo doesn't need an li. Old conversation, I know, but I just had to chime in. Cheers. Mike Cherim http://green-beast.com/ - Original Message - From: Thomas Thomassen [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Thursday, February 07, 2008 11:05 AM Subject: Re: [WSG] Styling forms Fieldsets and Labels is present in HTML4 as well. Don't see anything new about that. Still need some extra elements to organise them. Such as lists. - Original Message - From: Joe Ortenzi To: wsg@webstandardsgroup.org Sent: Thursday, February 07, 2008 8:36 AM Subject: Re: [WSG] Styling forms Has anyone looked up the HTML 5 pages on form elements? http://www.w3.org/TR/html5-diff/ http://www.w3.org/html/wg/html5/#forms It's all fieldsets and labels... which makes more semantic sense than paragraphs, lists, and dd/dl JOe On Feb 6 2008, at 04:06, Steve Green wrote: There may be specific cases where it would be right to mark up a form as a list, although I can't think of one. As a general rule it would be wrong. The argument against marking up a form as a list is that a form is not a list. A form is one or more groups of form controls, and the fieldset element is the correct means by which form controls should be grouped. Within a fieldset, paragraph elements should be used for individual form controls. Steve -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Horowitz Sent: 06 February 2008 03:38 To: wsg@webstandardsgroup.org Subject: [WSG] Styling forms I've been looking at styling forms and I'm seeing some people mark them up as ordered lists and other using paragraphs. What are the arguments for the different markup types. -- Michael Horowitz Your Computer Consultant http://yourcomputerconsultant.com 561-394-9079 *** 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] *** Joe Ortenzi [EMAIL PROTECTED] www.joiz.com *** 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] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Styling forms
On Behalf Of Thierry Koblentz Sent: Thursday, February 07, 2008 10:29 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling forms TK fwiw, I think BRs are the perfect fit. BRs? Are BRs semantically correct? I believe they aren't. 9.3.2 Controlling line breaks [1] A line break is defined to be a carriage return (#x000D;), a line feed (#x000A;), or a carriage return/line feed pair. All line breaks constitute white space. And if you ask me, I prefer to use BRs in forms than in other places for the sole purpose of clearing elements ;) [1] http://www.w3.org/TR/html401/struct/text.html#h-9.3.2 -- Regards, Thierry | http://www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
Hello Thomas, How does screenreaders treat using just labelinput//label? I'm writing an article on just that thing now. Jaws is okay with it, but Windows Eyes chokes on it. That in itself may not be too-too important due to the number of users, but I'm 99.99% sure that Safari on Mac users will have difficulty (at best) actually inputting content in such a form input. I can't replicate this on Safari for Windows, but I have gotten lots of feedback to go on. I actually just updated both of my version two contact forms today to correct this (v3 was already fixed). I've been fixing forms all day actually. I have come to the conclusion that the only proper method is... label for=fooFoo Text/label input id=foo Though I suppose input alt=Foo Text would also be okay. Cheers. Mike - Original Message - From: Thomas Thomassen [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Thursday, February 07, 2008 4:36 PM Subject: Re: [WSG] Styling forms hm... this thread has given me a thinker. How does screenreaders treat using just labelinput//label? form fieldset labelFoo: input id=foo//label labelBar: input id=bar//label /fieldset /form How will it present the form? If it's all inline, will it be read continuous, or will there be a break between the elements? - Original Message - From: Joe Ortenzi To: wsg@webstandardsgroup.org Sent: Thursday, February 07, 2008 9:31 PM Subject: Re: [WSG] Styling forms Well done Alexey! Are we not confusing semantics with presentational here? if it is OK to strip the presentational out of a list element (when we use a list for a navigation group and want our navigation elements in a row instead of a column) what is wrong with supplanting the inline quality of a label/input group by designating it a block element, and then group several form elements, or even each label input group with fieldsets? BTW: br / is the equivalent of a force carriage return and thus belongs within paragraphs, i thought! Joe On Feb 7 2008, at 19:55, Алексей Новиков wrote: On Behalf Of Thierry Koblentz Sent: Thursday, February 07, 2008 10:29 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling forms TK fwiw, I think BRs are the perfect fit. BRs? Are BRs semantically correct? I believe they aren't. -- Regards, Alexey Novikov http://studiomade.ru *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** Joe Ortenzi [EMAIL PROTECTED] www.joiz.com *** 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] Styling forms
Michael Horowitz wrote: I've been looking at styling forms and I'm seeing some people mark them up as ordered lists and other using paragraphs. What are the arguments for the different markup types. from what I can see the reason lists have come into use in forms has a lot to do with javascript libraries that have re-ordering of elements by drag and drop that tend to work mainly on lists. Therefore lists are useful to wrap form elements if you are creating form building software so the form elements can be easily reordered by non-technical users. -- Chris Knowles *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
hm... this thread has given me a thinker. How does screenreaders treat using just labelinput//label? form fieldset labelFoo: input id=foo//label labelBar: input id=bar//label /fieldset /form How will it present the form? If it's all inline, will it be read continuous, or will there be a break between the elements? - Original Message - From: Joe Ortenzi To: wsg@webstandardsgroup.org Sent: Thursday, February 07, 2008 9:31 PM Subject: Re: [WSG] Styling forms Well done Alexey! Are we not confusing semantics with presentational here? if it is OK to strip the presentational out of a list element (when we use a list for a navigation group and want our navigation elements in a row instead of a column) what is wrong with supplanting the inline quality of a label/input group by designating it a block element, and then group several form elements, or even each label input group with fieldsets? BTW: br / is the equivalent of a force carriage return and thus belongs within paragraphs, i thought! Joe On Feb 7 2008, at 19:55, Алексей Новиков wrote: On Behalf Of Thierry Koblentz Sent: Thursday, February 07, 2008 10:29 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling forms TK fwiw, I think BRs are the perfect fit. BRs? Are BRs semantically correct? I believe they aren't. -- Regards, Alexey Novikov http://studiomade.ru *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** Joe Ortenzi [EMAIL PROTECTED] www.joiz.com *** 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] Styling forms
I got a better theory on why lists are used for forms... people have fallen for lists and believe that they are the bees knees for every (x)html problem they encounter. Chris Knowles [EMAIL PROTECTED] 8/02/2008 6:53:08 am Michael Horowitz wrote: I've been looking at styling forms and I'm seeing some people mark them up as ordered lists and other using paragraphs. What are the arguments for the different markup types. from what I can see the reason lists have come into use in forms has a lot to do with javascript libraries that have re-ordering of elements by drag and drop that tend to work mainly on lists. Therefore lists are useful to wrap form elements if you are creating form building software so the form elements can be easily reordered by non-technical users. -- Chris Knowles *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** ** The above message has been scanned and meets the Insurance Commission of Western Australia's Email security requirements for inbound transmission. ** The above message has been scanned and meets the Insurance Commission of Western Australia's Email security policy requirements for outbound transmission. This email (facsimile) and any attachments may be confidential and privileged. If you are not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this email (facsimile) is strictly prohibited. If you have received this email (facsimile) in error please contact the Insurance Commission. Web: www.icwa.wa.gov.au Phone: +61 08 9264 * *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [OBORONA-SPAM] Re: [WSG] Styling forms
Chris Knowles wrote: CK from what I can see the reason lists have come into use in forms has a CK lot to do with javascript libraries that have re-ordering of elements by CK drag and drop that tend to work mainly on lists. Therefore lists are CK useful to wrap form elements if you are creating form building software CK so the form elements can be easily reordered by non-technical users. I suppose that form elements can be easily reordered even if form elements are not LI-wrapped. Can't they? Regards, Alexey Novikov http://studiomade.ru *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Styling forms
That's really interesting Mike. After visiting a conference a couple of years ago where a demonstration was given on screen reader use of forms, I have been wrapping the input in a label and having a for attribute set. Both were presented as being equally accessible (the demo must have been in JAWS), and wrapping the input made it easier to style. I'd be very interested in reading your article when it's ready :o) Rachel May P +64-4-384-3546 E [EMAIL PROTECTED] The Survey Company Level 1, 50 Manners St PO Box 6859, Marion Square Wellington www.thesurveycompany.com The Survey Company is a division of Heliocell Ltd. PLEASE NOTE: This email message and accompanying data may contain information that is confidential and subject to legal privilege. If you are not the intended recipient you are notified that any use dissemination distribution or copying of this message or data is prohibited. If you have received this email message in error please notify us immediately and erase all copies of the message and attachments. Any views expressed in this message are those of the individual sender, except where the sender states them, with requisite authority, to be those of Heliocell Ltd. The recipient stated is the sole intended recipient and this email is not to be forwarded or shared digitally without the permission of the sender. Thank you -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mike at Green-Beast.com Sent: Friday, 8 February 2008 11:24 a.m. To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling forms Hello Thomas, How does screenreaders treat using just labelinput//label? I'm writing an article on just that thing now. Jaws is okay with it, but Windows Eyes chokes on it. That in itself may not be too-too important due to the number of users, but I'm 99.99% sure that Safari on Mac users will have difficulty (at best) actually inputting content in such a form input. I can't replicate this on Safari for Windows, but I have gotten lots of feedback to go on. I actually just updated both of my version two contact forms today to correct this (v3 was already fixed). I've been fixing forms all day actually. I have come to the conclusion that the only proper method is... label for=fooFoo Text/label input id=foo Though I suppose input alt=Foo Text would also be okay. Cheers. Mike - Original Message - From: Thomas Thomassen [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Thursday, February 07, 2008 4:36 PM Subject: Re: [WSG] Styling forms hm... this thread has given me a thinker. How does screenreaders treat using just labelinput//label? form fieldset labelFoo: input id=foo//label labelBar: input id=bar//label /fieldset /form How will it present the form? If it's all inline, will it be read continuous, or will there be a break between the elements? - Original Message - From: Joe Ortenzi To: wsg@webstandardsgroup.org Sent: Thursday, February 07, 2008 9:31 PM Subject: Re: [WSG] Styling forms Well done Alexey! Are we not confusing semantics with presentational here? if it is OK to strip the presentational out of a list element (when we use a list for a navigation group and want our navigation elements in a row instead of a column) what is wrong with supplanting the inline quality of a label/input group by designating it a block element, and then group several form elements, or even each label input group with fieldsets? BTW: br / is the equivalent of a force carriage return and thus belongs within paragraphs, i thought! Joe On Feb 7 2008, at 19:55, Алексей Новиков wrote: On Behalf Of Thierry Koblentz Sent: Thursday, February 07, 2008 10:29 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling forms TK fwiw, I think BRs are the perfect fit. BRs? Are BRs semantically correct? I believe they aren't. -- Regards, Alexey Novikov http://studiomade.ru *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** Joe Ortenzi [EMAIL PROTECTED] www.joiz.com *** 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] Styling forms
As far as CSS formating goes, I find it easier when the label doesn't wrap the input. Also, I believe that is the same reason that lists have made their way into forms, because it makes them that much easier to format and gives you something else to grab onto. Rachel May wrote: That's really interesting Mike. After visiting a conference a couple of years ago where a demonstration was given on screen reader use of forms, I have been wrapping the input in a label and having a for attribute set. Both were presented as being equally accessible (the demo must have been in JAWS), and wrapping the input made it easier to style. I'd be very interested in reading your article when it's ready :o) Rachel May P +64-4-384-3546 E [EMAIL PROTECTED] The Survey Company Level 1, 50 Manners St PO Box 6859, Marion Square Wellington www.thesurveycompany.com The Survey Company is a division of Heliocell Ltd. PLEASE NOTE: This email message and accompanying data may contain information that is confidential and subject to legal privilege. If you are not the intended recipient you are notified that any use dissemination distribution or copying of this message or data is prohibited. If you have received this email message in error please notify us immediately and erase all copies of the message and attachments. Any views expressed in this message are those of the individual sender, except where the sender states them, with requisite authority, to be those of Heliocell Ltd. The recipient stated is the sole intended recipient and this email is not to be forwarded or shared digitally without the permission of the sender. Thank you -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mike at Green-Beast.com Sent: Friday, 8 February 2008 11:24 a.m. To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling forms Hello Thomas, How does screenreaders treat using just labelinput//label? I'm writing an article on just that thing now. Jaws is okay with it, but Windows Eyes chokes on it. That in itself may not be too-too important due to the number of users, but I'm 99.99% sure that Safari on Mac users will have difficulty (at best) actually inputting content in such a form input. I can't replicate this on Safari for Windows, but I have gotten lots of feedback to go on. I actually just updated both of my version two contact forms today to correct this (v3 was already fixed). I've been fixing forms all day actually. I have come to the conclusion that the only proper method is... label for=fooFoo Text/label input id=foo Though I suppose input alt=Foo Text would also be okay. Cheers. Mike - Original Message - From: Thomas Thomassen [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Thursday, February 07, 2008 4:36 PM Subject: Re: [WSG] Styling forms hm... this thread has given me a thinker. How does screenreaders treat using just labelinput//label? form fieldset labelFoo: input id=foo//label labelBar: input id=bar//label /fieldset /form How will it present the form? If it's all inline, will it be read continuous, or will there be a break between the elements? - Original Message - From: Joe Ortenzi To: wsg@webstandardsgroup.org Sent: Thursday, February 07, 2008 9:31 PM Subject: Re: [WSG] Styling forms Well done Alexey! Are we not confusing semantics with presentational here? if it is OK to strip the presentational out of a list element (when we use a list for a navigation group and want our navigation elements in a row instead of a column) what is wrong with supplanting the inline quality of a label/input group by designating it a block element, and then group several form elements, or even each label input group with fieldsets? BTW: br / is the equivalent of a force carriage return and thus belongs within paragraphs, i thought! Joe On Feb 7 2008, at 19:55, Алексей Новиков wrote: On Behalf Of Thierry Koblentz Sent: Thursday, February 07, 2008 10:29 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling forms TK fwiw, I think BRs are the perfect fit. BRs? Are BRs semantically correct? I believe they aren't. -- Regards, Alexey Novikov http://studiomade.ru *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** Joe Ortenzi [EMAIL PROTECTED] www.joiz.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED
Re: [OBORONA-SPAM] Re: [WSG] Styling forms
I would have thought so. Isn't that what the id attribute is used for? Something for JavaScript to reference? On Feb 7 2008, at 22:17, Алексей Новиков wrote: Chris Knowles wrote: CK from what I can see the reason lists have come into use in forms has a CK lot to do with javascript libraries that have re-ordering of elements by CK drag and drop that tend to work mainly on lists. Therefore lists are CK useful to wrap form elements if you are creating form building software CK so the form elements can be easily reordered by non-technical users. I suppose that form elements can be easily reordered even if form elements are not LI-wrapped. Can't they? Regards, Alexey Novikov http://studiomade.ru *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** Joe Ortenzi [EMAIL PROTECTED] www.joiz.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [OBORONA-SPAM] Re: [WSG] Styling forms
Joe Ortenzi wrote: I would have thought so. Isn't that what the id attribute is used for? Something for JavaScript to reference? Chris Knowles wrote: CK from what I can see the reason lists have come into use in forms has a CK lot to do with javascript libraries that have re-ordering of elements by CK drag and drop that tend to work mainly on lists. Therefore lists are CK useful to wrap form elements if you are creating form building software CK so the form elements can be easily reordered by non-technical users. I suppose that form elements can be easily reordered even if form elements are not LI-wrapped. Can't they? yes, but my point was that a lot of js libraries base drag and drop re-ordering of elements around list elements and not other elements. And I have noticed a lot of form building services use lists to markup forms because they require drag and drop re-ordering of form elements. So I'm suggesting they are only using list elements because they can add drag and drop easily by using an external library that supports it, not because they think lists are necessarily a good markup choice. -- Chris Knowles *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
Yes, the only difference between between the input in the label and having it outside of the label with the for attribute set is primarily just some formatting via CSS differences. Beyond that, there is little difference. All modern browsers (and even most older ones) allow you to click on the label to put your focus in the input that that the label is referenced to, regardless of which way it is implemented. Thomas Thomassen wrote: When the LABEL element wraps around INPUT you do not need the FOR attribute.The hierarchy provides the connection between them. However, when the LABEL does not wrap around the INPUT, the FOR attribute is required for useragent to know the elements are related. - Original Message - From: John Faulds [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Wednesday, February 06, 2008 7:42 AM Subject: Re: [WSG] Styling forms Hi Germ17,I have seen your example presented in GERMWORKS.NETFYI, your approach is perfect to my knowledge, but the INPUT element should not wrapped by any LABEL element. It's not compliant/accessible...I request you to modify this example according to standards, if you believe the same. You're wrong there. It's perfectly valid HTML and I don't believe it is any less accessible as long as the 'for' attribute is specified. -- Tyssen Design http://www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** 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] *** -- Christian Snodgrass Azure Ronin Web Design http://www.arwebdesign.net/ http://www.arwebdesign.net Phone: 859.816.7955 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
Has anyone looked up the HTML 5 pages on form elements? http://www.w3.org/TR/html5-diff/ http://www.w3.org/html/wg/html5/#forms It's all fieldsets and labels... which makes more semantic sense than paragraphs, lists, and dd/dl JOe On Feb 6 2008, at 04:06, Steve Green wrote: There may be specific cases where it would be right to mark up a form as a list, although I can't think of one. As a general rule it would be wrong. The argument against marking up a form as a list is that a form is not a list. A form is one or more groups of form controls, and the fieldset element is the correct means by which form controls should be grouped. Within a fieldset, paragraph elements should be used for individual form controls. Steve -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Horowitz Sent: 06 February 2008 03:38 To: wsg@webstandardsgroup.org Subject: [WSG] Styling forms I've been looking at styling forms and I'm seeing some people mark them up as ordered lists and other using paragraphs. What are the arguments for the different markup types. -- Michael Horowitz Your Computer Consultant http://yourcomputerconsultant.com 561-394-9079 *** 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] *** Joe Ortenzi [EMAIL PROTECTED] www.joiz.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Styling forms
I've been looking at styling forms and I'm seeing some people mark them up as ordered lists and other using paragraphs. What are the arguments for the different markup types. -- Michael Horowitz Your Computer Consultant http://yourcomputerconsultant.com 561-394-9079 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
good question!! I personally used to use lists then i realised that paragraphs actually use these code (both html and css) and is easier to stylise! I wrote some of my thoughts hear a week or so ago! http://germworks.net/blog/2008/01/23/lists-p-whats-best-for-forms/ On Feb 6, 2008 12:38 PM, Michael Horowitz [EMAIL PROTECTED] wrote: I've been looking at styling forms and I'm seeing some people mark them up as ordered lists and other using paragraphs. What are the arguments for the different markup types. -- Michael Horowitz Your Computer Consultant http://yourcomputerconsultant.com 561-394-9079 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- JP2 Designs http://www.jp2designs.com http://www.germworks.net *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Styling forms
Forms should be marked up as you would anything else; If you are placing a paragraph in the form you should use a p. If you are placing a list inside the form you should use a ul/ol, if you are placing headings inside the form you should use h1-h6 etc. etc. The inputs should be arranged using div's instead of tables of course, unless you are presenting tabular data inside the form. Simple hey! On 2/6/08, Michael Horowitz [EMAIL PROTECTED] wrote: I've been looking at styling forms and I'm seeing some people mark them up as ordered lists and other using paragraphs. What are the arguments for the different markup types. -- Michael Horowitz Your Computer Consultant http://yourcomputerconsultant.com 561-394-9079 *** 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] Styling forms
It kind of depends on the form itself. Definition lists and unordered lists also are used a lot. Usually, I would say unordered or definition lists are the most appropriate. If the questions were numbered, I could see using ordered lists. Paragraphs are kind of the lazy way. You can also use field sets, which are really appropriate for groups of related items. Michael Horowitz wrote: I've been looking at styling forms and I'm seeing some people mark them up as ordered lists and other using paragraphs. What are the arguments for the different markup types. -- Christian Snodgrass Azure Ronin Web Design http://www.arwebdesign.net/ http://www.arwebdesign.net Phone: 859.816.7955 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Styling forms
There may be specific cases where it would be right to mark up a form as a list, although I can't think of one. As a general rule it would be wrong. The argument against marking up a form as a list is that a form is not a list. A form is one or more groups of form controls, and the fieldset element is the correct means by which form controls should be grouped. Within a fieldset, paragraph elements should be used for individual form controls. Steve -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Horowitz Sent: 06 February 2008 03:38 To: wsg@webstandardsgroup.org Subject: [WSG] Styling forms I've been looking at styling forms and I'm seeing some people mark them up as ordered lists and other using paragraphs. What are the arguments for the different markup types. -- Michael Horowitz Your Computer Consultant http://yourcomputerconsultant.com 561-394-9079 *** 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] Styling forms
Hi Germ17,I have seen your example presented in GERMWORKS.NETFYI, your approach is perfect to my knowledge, but the INPUT element should not wrapped by any LABEL element. It's not compliant/accessible...I request you to modify this example according to standards, if you believe the same. Thanks, Srikumar McAfee Inc | Project Lead | Webstandard Guy Mobile: +91 98800 31872 Date: Wed, 6 Feb 2008 12:52:58 +0900 From: [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling forms good question!! I personally used to use lists then i realised that paragraphs actually use these code (both html and css) and is easier to stylise! I wrote some of my thoughts hear a week or so ago! http://germworks.net/blog/2008/01/23/lists-p-whats-best-for-forms/ On Feb 6, 2008 12:38 PM, Michael Horowitz [EMAIL PROTECTED] wrote: I've been looking at styling forms and I'm seeing some people mark them up as ordered lists and other using paragraphs. What are the arguments for the different markup types. -- Michael Horowitz Your Computer Consultant http://yourcomputerconsultant.com 561-394-9079 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- JP2 Designs http://www.jp2designs.com http://www.germworks.net *** 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] Styling forms
Have a look at this article on A List Apart: http://www.alistapart.com/articles/prettyaccessibleforms If you haven't been too that site before then have a snoop around. They got lots of really good articles. - Original Message - From: Christian Snodgrass [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Wednesday, February 06, 2008 4:50 AM Subject: Re: [WSG] Styling forms It kind of depends on the form itself. Definition lists and unordered lists also are used a lot. Usually, I would say unordered or definition lists are the most appropriate. If the questions were numbered, I could see using ordered lists. Paragraphs are kind of the lazy way. You can also use field sets, which are really appropriate for groups of related items. Michael Horowitz wrote: I've been looking at styling forms and I'm seeing some people mark them up as ordered lists and other using paragraphs. What are the arguments for the different markup types. -- Christian Snodgrass Azure Ronin Web Design http://www.arwebdesign.net/ http://www.arwebdesign.net Phone: 859.816.7955 *** 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] Styling forms
When the LABEL element wraps around INPUT you do not need the FOR attribute.The hierarchy provides the connection between them. However, when the LABEL does not wrap around the INPUT, the FOR attribute is required for useragent to know the elements are related. - Original Message - From: John Faulds [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Wednesday, February 06, 2008 7:42 AM Subject: Re: [WSG] Styling forms Hi Germ17,I have seen your example presented in GERMWORKS.NETFYI, your approach is perfect to my knowledge, but the INPUT element should not wrapped by any LABEL element. It's not compliant/accessible...I request you to modify this example according to standards, if you believe the same. You're wrong there. It's perfectly valid HTML and I don't believe it is any less accessible as long as the 'for' attribute is specified. -- Tyssen Design http://www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** 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] Styling forms inside a horizontal navigation bar
I haven't got access to IE/PC right now, but removing the floats and
using display:inline worked for me in FF and Safari.
change these two rules:
#navbar ul {
list-style-type: none;
display:inline;
}
#navbar form {
display:inline;
margin-left: 6px;
}
On 21 Jun 2005, at 5:08 PM, Anura Samara wrote:
I'm trying to get a search form to appear neatly within a horizontal
navigation bar. Here's my test page so far ==
http://www.thesamaras.com/horiz/horiz_form.htm
At the moment, the only way I can get this to work is to float the
form within the containing div. I've noticed that IE and others seem
to handle forms differently - in IE the entire form contents appear to
be slightly higher than in FF and Opera which has the effect of making
the form label appear to be on a different line from the navigation
items.
As a result, I've added a 2px top margin only for IE to push it down a
little.
Firstly, is there a better way to achieve this? All my efforts at
tracking down working examples of this elsewhere have failed!
Secondly, just how do form buttons inherit their font-size? It seems I
can either have large text (ie. the browser default) or much smaller
text.
Thanks for any help, Anura
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Styling forms inside a horizontal navigation bar
I'm trying to get a search form to appear neatly within a horizontal navigation bar. Here's my test page so far == http://www.thesamaras.com/horiz/horiz_form.htm At the moment, the only way I can get this to work is to float the form within the containing div. I've noticed that IE and others seem to handle forms differently - in IE the entire form contents appear to be slightly higher than in FF and Opera which has the effect of making the form label appear to be on a different line from the navigation items. As a result, I've added a 2px top margin only for IE to push it down a little. Firstly, is there a better way to achieve this? All my efforts at tracking down working examples of this elsewhere have failed! Secondly, just how do form buttons inherit their font-size? It seems I can either have large text (ie. the browser default) or much smaller text. Thanks for any help, Anura ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Styling Forms
Hi
Here's my bit of advice.
It's very likely that you will add another form to a web site in the future.
For that reason, I'd remove the selectors and define a general form style,
then add only the particular styles for that particular form. Do you really
need to define your font families? Is the form using a different font family
and size from the rest of the site? Is it using a different color text than
the rest of the site?
form
{margin: 5% 0 2% 7.5%;}
fieldset
{border: 1px solid #090;
padding: 0 15px;}
legend
{font: bold 14px arial, helvetica, sans-serif;
color: #fff;
background: #009900;
border: 1px solid #ccc;
border-bottom-color: #666;
border-right-color: #666;
margin-bottom: 10px;
padding: 4px 8px;}
form p
{clear: left;
margin: 0;
padding: 5px 0 10px 0;
font-weight: bold;}
form p label
{float: left;
width: 30%;
font-weight: bold;}
.input
{background: #E8F2D7;}
.btn
{color: #fff;
background: #009900;
border: 1px solid #ccc;
border-bottom-color: #666;
border-right-color: #666;
margin-bottom: 5px;}
#contactform
{width: 645px;}
You will appreciate the generalized settings when you build the next form,
perhaps a feedback form and you don't have to do any extra work.
Ted
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of [EMAIL PROTECTED]
Sent: Tuesday, April 05, 2005 10:14 PM
To: wsg@webstandardsgroup.org
Cc: [EMAIL PROTECTED]
Subject: Re: [WSG] Styling Forms
Good evening mates,
First, thanks to all for the excellent advice and direction!
I was successful in creating a table less form, albeit simple, that
renders perfectly in IE6 (hard to believe), and damn good in FF1 and
Opera7.4.
If interested, the page is located at the following URL:
http://www.waltermortgage.com/contactus.stm
Both the XHTML (transitional) and CSS validate with no errors or warnings
found! This particular client who is extremely computer literate
completely embraced the conversion to a standards-based site, and I wanted
it right.
Although I've been designing for 7+ years and working with standards for
15 months I always consider my cup half-full therefore please do not
hesitate to let me know if I missed something.
Here's the CSS if interested:
#contactform
{width: 645px;
font: 12px verdana, helvetica, arial, sans-serif;
color: #000;
margin: 5% 0 2% 7.5%;}
#contactform fieldset
{border: 1px solid #090;
padding: 0 15px;}
#contactform legend
{font: bold 14px arial, helvetica, sans-serif;
color: #fff;
background: #009900;
border: 1px solid #ccc;
border-bottom-color: #666;
border-right-color: #666;
margin-bottom: 10px;
padding: 4px 8px;}
#contactform p
{clear: left;
margin: 0;
padding: 5px 0 10px 0;
font-weight: bold;}
#contactform p label
{float: left;
width: 30%;
font-weight: bold;}
.input
{background: #E8F2D7;}
.btn
{color: #fff;
background: #009900;
border: 1px solid #ccc;
border-bottom-color: #666;
border-right-color: #666;
margin-bottom: 5px;}
Very appreciatively yours,
Mario
G'day folks
Firstly, apologies to Chris for not noticing that he'd already referred
Mario to Cameron's article
Secondly, Drew's points:
It may make styling easier but incorporating form controls in labels
has a
different meaning than associating a label and a form control. For
one thing, it isn't usable for those choosing a table layout for
forms.
Nor is
it possible to use an incorporated form control with multiple labels.
Both very good points. Obviously incorporating form controls and labels
wouldn't make sense for a typical tabular form layout. On the other
hand, I don't know why you'd want to use tables for layout when you
could style the elements themselves
I guess there could be some cases where you NEED multiple inputs to be
associated with each other as tabular data - perhaps an editable data
grid or the like? In which case, not being able to assign multiple
labels to each input would also be an issue
I don't see standard web forms (ie detail-gathering for shopping,
membership registration, feedback etc) as requiring a table structure.
Those sort of forms inevitably have simpler internal relationships
Back to the multiple labels: Again, there are definitely scenarios (such
as the one above) where they could be put to good use. However, I've
never actually done it. Every time I've come across a potential use for
multiple labels, I've realised that my form simply needs better
specification
Obviously all of the above is completely subjective. Maybe I'm the only
one who has never needed to do either of the things Drew mentioned. As
he said:
Use what you want, but use it correctly.
For my money, incorporating form controls inside labels is my default
construction for form HTML. Occasionally, I've needed to consider other
options, but each time some creative CSS has produced the required
layout and saved me changing the HTML
Oh, and I still use the FOR attribute, regardless
RE: [WSG] Styling Forms
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Lachlan Hardy Sent: Tuesday, April 05, 2005 1:52 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Styling Forms [EMAIL PROTECTED] wrote: Well, it seems that styling the actual form elements is the way to go, and certainly appears to be ideal for simple forms. I use FIELDSET, FORM etc as per other people's suggestions above, but my personal favourite is wrapping the relevant form field inside the LABEL element. Makes styling seriously easy An invaluable reference is Cameron Adams's Accessible, Stylish Form Layout: http://www.themaninblue.com/writing/perspective/2004/03/24/ * It may make styling easier but incorporating form controls in labels has a different meaning than associating a label and a form control. For one thing, it isn't usable for those choosing a table layout for forms. Nor is it possible to use an incorporated form control with multiple labels. This is what the html 4.01 specs have to say about the meaning of labels and their relationship to form controls: The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control. The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one LABEL may be associated with the same control by creating multiple references via the for attribute. This example creates a table that is used to align two text input controls and their associated labels. Each label is associated explicitly with one text input: FORM action=... method=post TABLE TR TDLABEL for=fnameFirst Name/LABEL TDINPUT type=text name=firstname id=fname TR TDLABEL for=lnameLast Name/LABEL TDINPUT type=text name=lastname id=lname /TABLE /FORM This example extends a previous example form to include LABEL elements. FORM action=http://somesite.com/prog/adduser; method=post P LABEL for=firstnameFirst name: /LABEL INPUT type=text id=firstnameBR LABEL for=lastnameLast name: /LABEL INPUT type=text id=lastnameBR LABEL for=emailemail: /LABEL INPUT type=text id=emailBR INPUT type=radio name=sex value=Male MaleBR INPUT type=radio name=sex value=Female FemaleBR INPUT type=submit value=Send INPUT type=reset /P /FORM To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control. In this example, we implicitly associate two labels with two text input controls: FORM action=... method=post P LABEL First Name INPUT type=text name=firstname /LABEL LABEL INPUT type=text name=lastname Last Name /LABEL /P /FORM Note that this technique cannot be used when a table is being used for layout, with the label in one cell and its associated control in another cell. When a LABEL element receives focus, it passes the focus on to its associated control. See the section below on access keys for examples. Labels may be rendered by user agents in a number of ways (e.g., visually, read by speech synthesizers, etc.) http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL Use what you want, but use it correctly. drew ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling Forms
I think that styling forms is very nice addon to any site. See http://www.pixy.cz/pixylophone/obrazky/styled-forms.gif -- styling the form elements can make them look worse outside the major browsers. -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling Forms
I think that styling forms is very nice addon to any site. And one thing more - you can't rely on it, you won't now how it is rendered on various platforms, nevertheless it might look weird, it might also be unusable etc. ... If you style 'em, you have to be careful. -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Styling Forms
I'm currently suggesting all input elements have a class to reflect the type. So they can be controlled via CSS a little easier. e.g. input type=radio class=radio input type=checkbox class=checkbox input type=submit class=submit input type=text class=radio etc. Are there any associated issues that I've not considered? regards mike 2k:)2 Mike Foskett Web Standards, Accessibility Testing Consultant Multimedia Publishing and Production British Educational Communications and Technology Agency (Becta) Milburn Hill Road, Science Park, Coventry CV4 7JJ Email: [EMAIL PROTECTED] Tel: 02476 416994 Ext 3342 [Tuesday - Thursday] Fax: 02476 411410 www.becta.org.uk ** This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This footnote also confirms that this email message has been swept by MIMEsweeper for the presence of computer viruses. www.mimesweeper.com ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Styling Forms
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Anthony TimberlakeSent: Tuesday, April 05, 2005 8:59 AMTo: wsg@webstandardsgroup.orgSubject: Re: [WSG] Styling Forms I think that styling forms is very nice addon to any site. Who wants to look at a dull white area on a black site? Not me...== Great, style away; keeping in mind Jan's caution about non-major browser renderings. Styling has nothing todo with the specs cited.Incorporating the control or just associating itwith a labelhasmeaningful/semantic consequences which are completely unrelated to style.The point was to use label correctly. drew
Re: [WSG] Styling Forms
G'day folks Firstly, apologies to Chris for not noticing that he'd already referred Mario to Cameron's article Secondly, Drew's points: It may make styling easier but incorporating form controls in labels has a different meaning than associating a label and a form control. For one thing, it isn't usable for those choosing a table layout for forms. Nor is it possible to use an incorporated form control with multiple labels. Both very good points. Obviously incorporating form controls and labels wouldn't make sense for a typical tabular form layout. On the other hand, I don't know why you'd want to use tables for layout when you could style the elements themselves I guess there could be some cases where you NEED multiple inputs to be associated with each other as tabular data - perhaps an editable data grid or the like? In which case, not being able to assign multiple labels to each input would also be an issue I don't see standard web forms (ie detail-gathering for shopping, membership registration, feedback etc) as requiring a table structure. Those sort of forms inevitably have simpler internal relationships Back to the multiple labels: Again, there are definitely scenarios (such as the one above) where they could be put to good use. However, I've never actually done it. Every time I've come across a potential use for multiple labels, I've realised that my form simply needs better specification Obviously all of the above is completely subjective. Maybe I'm the only one who has never needed to do either of the things Drew mentioned. As he said: Use what you want, but use it correctly. For my money, incorporating form controls inside labels is my default construction for form HTML. Occasionally, I've needed to consider other options, but each time some creative CSS has produced the required layout and saved me changing the HTML Oh, and I still use the FOR attribute, regardless of implicit associations Cheers, Lachlan ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling Forms
Good evening mates,
First, thanks to all for the excellent advice and direction!
I was successful in creating a table less form, albeit simple, that
renders perfectly in IE6 (hard to believe), and damn good in FF1 and
Opera7.4.
If interested, the page is located at the following URL:
http://www.waltermortgage.com/contactus.stm
Both the XHTML (transitional) and CSS validate with no errors or warnings
found! This particular client who is extremely computer literate
completely embraced the conversion to a standards-based site, and I wanted
it right.
Although Ive been designing for 7+ years and working with standards for
15 months I always consider my cup half-full therefore please do not
hesitate to let me know if I missed something.
Here's the CSS if interested:
#contactform
{width: 645px;
font: 12px verdana, helvetica, arial, sans-serif;
color: #000;
margin: 5% 0 2% 7.5%;}
#contactform fieldset
{border: 1px solid #090;
padding: 0 15px;}
#contactform legend
{font: bold 14px arial, helvetica, sans-serif;
color: #fff;
background: #009900;
border: 1px solid #ccc;
border-bottom-color: #666;
border-right-color: #666;
margin-bottom: 10px;
padding: 4px 8px;}
#contactform p
{clear: left;
margin: 0;
padding: 5px 0 10px 0;
font-weight: bold;}
#contactform p label
{float: left;
width: 30%;
font-weight: bold;}
.input
{background: #E8F2D7;}
.btn
{color: #fff;
background: #009900;
border: 1px solid #ccc;
border-bottom-color: #666;
border-right-color: #666;
margin-bottom: 5px;}
Very appreciatively yours,
Mario
G'day folks
Firstly, apologies to Chris for not noticing that he'd already referred
Mario to Cameron's article
Secondly, Drew's points:
It may make styling easier but incorporating form controls in labels
has a
different meaning than associating a label and a form control. For
one thing, it isn't usable for those choosing a table layout for
forms.
Nor is
it possible to use an incorporated form control with multiple labels.
Both very good points. Obviously incorporating form controls and labels
wouldn't make sense for a typical tabular form layout. On the other
hand, I don't know why you'd want to use tables for layout when you
could style the elements themselves
I guess there could be some cases where you NEED multiple inputs to be
associated with each other as tabular data - perhaps an editable data
grid or the like? In which case, not being able to assign multiple
labels to each input would also be an issue
I don't see standard web forms (ie detail-gathering for shopping,
membership registration, feedback etc) as requiring a table structure.
Those sort of forms inevitably have simpler internal relationships
Back to the multiple labels: Again, there are definitely scenarios (such
as the one above) where they could be put to good use. However, I've
never actually done it. Every time I've come across a potential use for
multiple labels, I've realised that my form simply needs better
specification
Obviously all of the above is completely subjective. Maybe I'm the only
one who has never needed to do either of the things Drew mentioned. As
he said:
Use what you want, but use it correctly.
For my money, incorporating form controls inside labels is my default
construction for form HTML. Occasionally, I've needed to consider other
options, but each time some creative CSS has produced the required
layout and saved me changing the HTML
Oh, and I still use the FOR attribute, regardless of implicit
associations
Cheers,
Lachlan
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Styling Forms
Good evening all, I know there's two schools of thought regarding forms where one uses a table and the other a definition list to style and layout the data fields. I have a simple form on a client's Contact Us page, and I wondered if there's a consensus as to which method is more semantically correct? Please advise... Kind regards, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling Forms
I'd be pointing you towards styling fieldset and label elements rather than using dl or table Good examples http://www.themaninblue.com/experiment/InForm/ Cheers Chris On Tue, 2005-04-05 at 13:40, [EMAIL PROTECTED] wrote: Good evening all, I know there's two schools of thought regarding forms where one uses a table and the other a definition list to style and layout the data fields. I have a simple form on a client's Contact Us page, and I wondered if there's a consensus as to which method is more semantically correct? Please advise... Kind regards, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling Forms
[EMAIL PROTECTED] wrote: Good evening all, I know there's two schools of thought regarding forms where one uses a table and the other a definition list to style and layout the data fields. I have a simple form on a client's Contact Us page, and I wondered if there's a consensus as to which method is more semantically correct? Please advise... There's a simple question I ask myself before I decide whether something goes in a table or not, and that question is: Is it tabular data? In this case I'd have to say that a form is _not_ tabular data. Its form data, and thus I'd try to make use of the tags designed to deal with forms: form fieldset legend label input textarea Hope that helps Darren ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Styling Forms
G'day I know there's two schools of thought regarding forms where one uses a table and the other a definition list to style and layout the data fields. I have a simple form on a client's Contact Us page, and I wondered if there's a consensus as to which method is more semantically correct? Not sure about consensus, but I use labels with the form elements and style the labels to float left with a fixed width these days. No tables or definition lists needed. Use fieldset to group form elements. There is however some consensus about using tables for layout. There's also a small matter of accessibility... A quick scan of the webstandardsgroup.org resources section shows this link: http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/accessible-forms-1.shtml Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Styling Forms
If you use label elements around your text then you can simply do this:
HTML:
plabel for=firstNameFirst Name/labelinput type=text id=firstName
//p
CSS:
form p{
clear:both;
}
form p label{
float:left;
width:30%;
}
Grant
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Darren Wood
Sent: Tuesday, 5 April 2005 12:35 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Styling Forms
[EMAIL PROTECTED] wrote:
Good evening all,
I know there's two schools of thought regarding forms where one uses a
table and the other a definition list to style and layout the data fields.
I have a simple form on a client's Contact Us page, and I wondered if
there's a consensus as to which method is more semantically correct?
Please advise...
There's a simple question I ask myself before I decide whether something
goes in a table or not, and that question is:
Is it tabular data?
In this case I'd have to say that a form is _not_ tabular data. Its
form data, and thus I'd try to make use of the tags designed to deal
with forms:
form
fieldset
legend
label
input
textarea
Hope that helps
Darren
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
This message is intended for the addressee named and may contain
privileged information or confidential information or both. If you
are not the intended recipient please delete it and notify the sender.
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Styling Forms
How about plain old form elements?
Example:
style type=text/css
form { font: 65%/1.2 verdana, sans-serif; margin-bottom: 3em; }
fieldset { margin-bottom: 0.3em; border: none; }
label { width: 160px; }
label.radio { width: auto; }
input, select, textarea { font-family: verdana; font-size: 1.0em;
_background: none !important; }
select { width: 152px; }
.hiddenFields { display: none; }
/style
form id=feedback action= method=post
fieldset
label for=firstNameFirst Name/label
input type=text id=firstName name=firstName value= size=27 /
/fieldset
fieldset
label for=lastNameLast Name/label
input type=text id=lastName name=lastName value= size=27 /
/fieldset
fieldset
label for=emailEmail Address/label
input type=text id=email name=email value= size=27 /
/fieldset
fieldset
label for=findUsHow Did You Find Us?/label
select id=findUs name=findUs
option value= selected=selectedPlease select .../option
option value=FriendA Friend Told You About Us/option
option value=PosterPoster/option
option value=FlyerFlyer/option
option value=GoogleGoogle/option
option value=Search EngineOther Search Engine/option
option value=TVTelevision Ad/option
option value=RadioRadio/option
option value=NewspaperNewspaper/option
option value=OtherOther/option
/select
/fieldset
fieldset
label for=commentsComments/label
textarea id=comments name=comments cols=27 rows=6 title=Please
enter your comments here/textarea
/fieldset
fieldset
input type=submit id=submit name=submit value=submit /
/fieldset
/form
Richard :o)
- Original Message -
From: [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Tuesday, April 05, 2005 1:40 PM
Subject: [WSG] Styling Forms
Good evening all,
I know there's two schools of thought regarding forms where one uses a
table and the other a definition list to style and layout the data fields.
I have a simple form on a client's Contact Us page, and I wondered if
there's a consensus as to which method is more semantically correct?
Please advise...
Kind regards,
Mario S. Cisneros
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Styling Forms
Well, it seems that styling the actual form elements is the way to go, and certainly appears to be ideal for simple forms. Thank you Chris, Bert and Darren for the quick response, advice and links! Yours respectfully, Mario G'day I know there's two schools of thought regarding forms where one uses a table and the other a definition list to style and layout the data fields. I have a simple form on a client's Contact Us page, and I wondered if there's a consensus as to which method is more semantically correct? Not sure about consensus, but I use labels with the form elements and style the labels to float left with a fixed width these days. No tables or definition lists needed. Use fieldset to group form elements. There is however some consensus about using tables for layout. There's also a small matter of accessibility... A quick scan of the webstandardsgroup.org resources section shows this link: http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/accessible-forms-1.shtml Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
