Comments on: Forms markup and CSS - Revisited http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/ Musings on design, web standards and free software from a Sri Lankan geek Sun, 20 Jul 2008 00:12:10 +0000 http://wordpress.org/?v=2.1 By: Ryan Thrash http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5566 Ryan Thrash Wed, 06 Dec 2006 16:14:43 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5566 Great take on forms and thank you. Quick question: Why a span.label in the .controlset as opposed to just using a label? Great take on forms and thank you. Quick question:
Why a span.label in the .controlset as opposed to just using a label?

]]> By: Prabhath http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5567 Prabhath Wed, 06 Dec 2006 16:27:25 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5567 Thanks Ryan. The reason for using <code>span.label</code> is because a label can't be explicitly associated with the inputs in the controlset, which have their own labels. I wasn't sure if an orphaned label was OK to use. Thanks Ryan.

The reason for using span.label is because a label can’t be explicitly associated with the inputs in the controlset, which have their own labels. I wasn’t sure if an orphaned label was OK to use.

]]> By: Ryan Thrash http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5568 Ryan Thrash Wed, 06 Dec 2006 16:40:43 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5568 I think it is, but I'm probably wrong there. You could add name="" to the radios/checks, but those are also basically deprecated. Brings up an interesting question though! I think it is, but I’m probably wrong there. You could add name=”" to the radios/checks, but those are also basically deprecated. Brings up an interesting question though!

]]> By: Prabhath http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5569 Prabhath Wed, 06 Dec 2006 16:56:15 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5569 I've done <a href="http://nidahas.com/sandbox/form_template_2.html" rel="nofollow">another variation of the template</a> that uses <code>label.controlset</code> instead of <code>span.label</code>. This is why comments are a great idea ;-) I’ve done another variation of the template that uses label.controlset instead of span.label.

This is why comments are a great idea ;-)

]]> By: Jonathan Schemoul http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5570 Jonathan Schemoul Thu, 07 Dec 2006 09:55:49 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5570 Great ideas about form accessibility and css styling... (btw, I prefer the label.controlset solution too. :-)) Great ideas about form accessibility and css styling…

(btw, I prefer the label.controlset solution too. :-))

]]> By: Apple http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5571 Apple Thu, 07 Dec 2006 10:37:16 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5571 Very nice form markup. Maybe in future you can provide a complete PHP script using this form markup. I have been looking long for free (XHTML) PHP contact forms but couldn't find any. Maybe a good chance to get a lot of visitors and links. Very nice form markup. Maybe in future you can provide a complete PHP script using this form markup.

I have been looking long for free (XHTML) PHP contact forms but couldn’t find any. Maybe a good chance to get a lot of visitors and links.

]]> By: Daniel http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5572 Daniel Thu, 07 Dec 2006 16:57:47 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5572 Very nice visually, also in terms of accessibility for screen readers, the checkboxes and radio buttons themselves should be further enclosed in fieldset/legends... Very nice visually, also in terms of accessibility for screen readers, the checkboxes and radio buttons themselves should be further enclosed in fieldset/legends…

]]> By: Bart http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5573 Bart Thu, 07 Dec 2006 17:07:54 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5573 Good stuff! Simple and clean. What do you think of putting the controlset inside of an unordered list? Good stuff! Simple and clean. What do you think of putting the controlset inside of an unordered list?

]]> By: Prabhath http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5574 Prabhath Thu, 07 Dec 2006 17:20:39 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5574 @Apple: The <a href="http://sahana.lk/" rel="nofollow">Sahana project</a> which uses the earlier version of this template has a script for generating forms. If you're looking for a contact form that could be integrated to WordPress, check out <a href="http://codex.wordpress.org/Plugins/Mail" rel="nofollow">this list</a> from the codex. @Daniel: Thanks for the suggestion :-) I guess that could be easily achieved by limiting the scope of the fieldsets in the template to wrap each control set. @Bart: If you look at the <a href="http://nidahas.com/2006/01/12/forms-markup-and-css/" rel="nofollow">earlier version</a> of this template you'd notice that it started off using an unordered list for check boxes and radios. However, as explained in <a href="http://nidahas.com/2006/01/12/forms-markup-and-css/#comment-7" rel="nofollow">this comment</a>, it was probably a case of going overboard with semantics. @Apple: The Sahana project which uses the earlier version of this template has a script for generating forms. If you’re looking for a contact form that could be integrated to WordPress, check out this list from the codex.

@Daniel: Thanks for the suggestion :-) I guess that could be easily achieved by limiting the scope of the fieldsets in the template to wrap each control set.

@Bart: If you look at the earlier version of this template you’d notice that it started off using an unordered list for check boxes and radios. However, as explained in this comment, it was probably a case of going overboard with semantics.

]]> By: links for 2006-12-07 | SridhaReena http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5576 links for 2006-12-07 | SridhaReena Thu, 07 Dec 2006 23:22:12 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5576 [...] Nidahas » Forms markup and CSS - Revisited A CSS-based Form Template (tags: css forms webdesign) [...] […] Nidahas » Forms markup and CSS - Revisited A CSS-based Form Template (tags: css forms webdesign) […]

]]> By: Ash Haque http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5578 Ash Haque Mon, 11 Dec 2006 02:34:13 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5578 Great looking template, clean markup too! Great looking template, clean markup too!

]]> By: Daniel http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5579 Daniel Mon, 11 Dec 2006 05:42:51 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5579 I am not sure what you are saying, but I think that is correct ... as it stands ... someone smarter should probably confirm .. the screen reader will read the legend for the fieldset with each form element .. which is perfect .. except when you get to something like the preferences section... let's use preferred location... instead of saying preferences > preferred location > option1 preferences > preferred location > option2 preferences > preferred location > option3 it will say preferences > option1 preferences > option2 preferences > option3 Again I am no accessibility effort, but I think this is correct ... and let me re-iterate ... GREAT WORK .... I am not sure what you are saying, but I think that is correct … as it stands … someone smarter should probably confirm .. the screen reader will read the legend for the fieldset with each form element .. which is perfect .. except when you get to something like the preferences section… let’s use preferred location…

instead of saying
preferences > preferred location > option1
preferences > preferred location > option2
preferences > preferred location > option3

it will say
preferences > option1
preferences > option2
preferences > option3

Again I am no accessibility effort, but I think this is correct

… and let me re-iterate … GREAT WORK ….

]]> By: watchingnow » Blog Archive » links for 2006-12-08 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5580 watchingnow » Blog Archive » links for 2006-12-08 Tue, 12 Dec 2006 02:45:44 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5580 [...] Nidahas » Forms markup and CSS - Revisited Creating CSS and standards-based forms (tags: css design forms development) [...] […] Nidahas » Forms markup and CSS - Revisited Creating CSS and standards-based forms (tags: css design forms development) […]

]]> By: Steve http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5581 Steve Wed, 13 Dec 2006 15:53:50 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5581 While not strictly a CSS issue you may want to make the list of form errors a link that moves the input cursor to the appropriate filed or to the label for that field so the label ios read). This makes it easier for screen reader users and those with manual dexterity issues. While not strictly a CSS issue you may want to make the list of form errors a link that moves the input cursor to the appropriate filed or to the label for that field so the label ios read). This makes it easier for screen reader users and those with manual dexterity issues.

]]> By: Wilco http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5583 Wilco Thu, 14 Dec 2006 08:26:55 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5583 Great work! I've been looking at a simular problem myself for a while but I never got this far. I found a little problem with it. When a label extends to a second line things go wrong. You can't always prevent this from happening since users decide on their own font size. Is there a way to break with the common label rule so you can put a number of checkboxes under eachother. with the label to the right of it. I would suggest holding it outside the div with the input element inside the label. Great work! I’ve been looking at a simular problem myself for a while but I never got this far.

I found a little problem with it. When a label extends to a second line things go wrong. You can’t always prevent this from happening since users decide on their own font size.

Is there a way to break with the common label rule so you can put a number of checkboxes under eachother. with the label to the right of it. I would suggest holding it outside the div with the input element inside the label.

]]> By: Prabhath http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5584 Prabhath Thu, 14 Dec 2006 14:07:03 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5584 Thanks Wilco. I think what you want can already be done with this template. You have to use the <code>.controlset</code> set of classes. There's an example of such a set of checkboxes under the "Preferences" fieldset. Thanks Wilco.

I think what you want can already be done with this template. You have to use the .controlset set of classes. There’s an example of such a set of checkboxes under the “Preferences” fieldset.

]]> By: Smith Data Processing Services » Blog Archive » links for 2006-12-18 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5585 Smith Data Processing Services » Blog Archive » links for 2006-12-18 Mon, 18 Dec 2006 05:19:51 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5585 [...] Nidahas » Forms markup and CSS - Revisited (tags: css forms) [...] […] Nidahas » Forms markup and CSS - Revisited (tags: css forms) […]

]]> By: Chris Curtis dot Org: Random Musings of Chris Curtis and Co. http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5589 Chris Curtis dot Org: Random Musings of Chris Curtis and Co. Sat, 23 Dec 2006 21:27:55 +0000 http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/#comment-5589 [...] Unfortunately, I can’t actually recall where I came across this since I’ve had it open and waiting to blog about for several days now.  However, a post over on the Nidahas blog covers some very nice ways to make simple, accessible forms.  All the CSS and such is in the source code for that page, so just dig in there and see how the markup and CSS work together to create a semantic and accessible form that’s easy to use. 0 Comments, 0 Trackbacks, 0 Pingbacks · [...] […] Unfortunately, I can’t actually recall where I came across this since I’ve had it open and waiting to blog about for several days now.  However, a post over on the Nidahas blog covers some very nice ways to make simple, accessible forms.  All the CSS and such is in the source code for that page, so just dig in there and see how the markup and CSS work together to create a semantic and accessible form that’s easy to use. 0 Comments, 0 Trackbacks, 0 Pingbacks · […]

]]>