Re: [css-d] What is best practice when using CSS to create forms?
On Apr 20, 2011, at 12:04 AM, Barney Carroll wrote: • Make sure you have highly visible :focus styles for inputs. I (and many other users) find it much easier to use the keyboard for navigating forms, and an indicator of the focussed element is paramount. Or better: don't attempt to style form controls _at all_. Leave them at the browser / OS default. That is what users are most familiar with … (ducks, and dons radiation flame retardant clothing) Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What is best practice when using CSS to create forms?
I use much the same mark-up as shown in the 'alistapart' article you've referenced, using fieldset and legend. I recommend 'Fancy Form Design' by Jina Bolton et al (Sitepoint, (www.sitepoint.com)) if you want a book about it. Tim Dawson On 19/04/2011 04:12, Keith Purtell wrote: I have a simple form on my Contact page where I've used DIVs to organize content. Not sure this is best practice. I've seen online articles advocating definition lists (dl) and then the approach described at A List Apart: http://www.alistapart.com/articles/prettyaccessibleforms/ - Keith Purtell http://www.keithpurtell.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What is best practice when using CSS to create forms?
Here's where I plug Luke Wroblewski's book _Web Form Design: Filling in the Blanks_: http://www.lukew.com/resources/web_form_design.asp Kurtis Sent from my mobile On Apr 18, 2011, at 8:12 PM, Keith Purtell keithpurt...@keithpurtell.com wrote: I have a simple form on my Contact page where I've used DIVs to organize content. Not sure this is best practice. I've seen online articles advocating definition lists (dl) and then the approach described at A List Apart: http://www.alistapart.com/articles/prettyaccessibleforms/ - Keith Purtell http://www.keithpurtell.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What is best practice when using CSS to create forms?
On Tue, Apr 19, 2011 at 10:01 AM, Kurtis Kroon kurtis7...@gmail.com wrote: Here's where I plug Luke Wroblewski's book _Web Form Design: Filling in the Blanks_: http://www.lukew.com/resources/web_form_design.asp Kurtis Sent from my mobile On Apr 18, 2011, at 8:12 PM, Keith Purtell keithpurt...@keithpurtell.com wrote: I have a simple form on my Contact page where I've used DIVs to organize content. Not sure this is best practice. I've seen online articles advocating definition lists (dl) and then the approach described at A List Apart: http://www.alistapart.com/articles/prettyaccessibleforms/ - Keith Purtell http://www.keithpurtell.com __ Does form markup OR plugging LWs book have anything to do with CSS? -- tim.arn...@gmail.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What is best practice when using CSS to create forms?
On 19 April 2011 15:47, Tim Arnold tim.arn...@gmail.com wrote: Does form markup OR plugging LWs book have anything to do with CSS? Colossal amounts. Come back to us when you've built a form purely out of CSS and no markup. Keith, The HTML5 boilerplate [1] collects some excellent forms CSS (very helpfully commented to explain their purpose, too) together in its base stylesheet [2]. A few extra tips off the top of my head: • Don't get too ambitious with legend styling: the element has inherent layout properties that you can't completely override with CSS. • Make sure you have highly visible :focus styles for inputs. I (and many other users) find it much easier to use the keyboard for navigating forms, and an indicator of the focussed element is paramount. • Certain advanced input types rely on a 'ghost DOM' for which only the user agent (and proprietary CSS properties, in some cases) can control the rendering. Ambitious design ideas regarding esoteric fields often flounder. [1] http://html5boilerplate.com/ [2] https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css Regards, Barney Carroll barney.carr...@gmail.com 07594 506 381 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What is best practice when using CSS to create forms?
On Tue, Apr 19, 2011 at 11:04 AM, Barney Carroll barney.carr...@gmail.comwrote: On 19 April 2011 15:47, Tim Arnold tim.arn...@gmail.com wrote: Does form markup OR plugging LWs book have anything to do with CSS? Colossal amounts. Come back to us when you've built a form purely out of CSS and no markup. Obviously, I have never created a form purely out of CSS, but thanks for the invite back which I will take advantage of now even having failed in my assignment! I only commented because the question was about whether to use a DIV or a DL which has nothing whatever to do with CSS. Per the list policies found at http://css-discuss.incutio.com/wiki/Off_Topic : Some topics are off-topic for css-d, for example:- - mark-up questions A question on how best to style a DL for use in a form would certainly be on-topic. My apologies if I misunderstood. -- tim.arn...@gmail.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What is best practice when using CSS to create forms?
I only commented because the question was about whether to use a DIV or a DL which has nothing whatever to do with CSS. Per the list policies found at http://css-discuss.incutio.com/wiki/Off_Topic : Some topics are off-topic for css-d, for example:- mark-up questions A question on how best to style a DL for use in a form would certainly be on-topic. My apologies if I misunderstood. -- tim.arn...@gmail.com Mr Wroblewski's book explains best practices to make *usable* forms ... which are important if you want your customers to complete them. There are times when, for example, a top-left aligned label is better than one that you've floated to the side. And to tie it back to CSS, it is trivial to style the former -- minimal styles are needed, if any. Before one asks the question how to style? one needs to understand which style form for this task? Kurtis Sent from my mobile __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] What is best practice when using CSS to create forms?
I have a simple form on my Contact page where I've used DIVs to organize content. Not sure this is best practice. I've seen online articles advocating definition lists (dl) and then the approach described at A List Apart: http://www.alistapart.com/articles/prettyaccessibleforms/ - Keith Purtell http://www.keithpurtell.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
