Forms markup and CSS - Revisited

2006.12.06

Earlier this year I posted an article on a CSS-based form template, originally done for the Sahana interface. It was modified based on the feedback I received from the readers who stumbled upon the article, and the final version made it to the Sahana system.

I have come to realize certain shortcomings of that template, hence this modified version.

There are plenty of excellent CSS-based forms solutions available online, which provide additional features such as toggable optional fields and help sections. What I have provided here is a flexible, semantically correct, and dare I say, accessible template to which such features could be readily applied.

Like the earlier version, the markup of this template is based on the accessible forms markup of Derek Featherstone. As usual, all input field widths are specified using the size attribute instead of CSS. I’ve explained the reasons in this BSS article.

The markup is quite self explanatory, so instead of detailing stuff here, I’ll let you check out the updated form template.

Permanent Link | Filed under: Design, Standards, Web, Thoughts

18 Comments

Comments Feed

  1. Ryan Thrash

    December 6th, 2006 at 10:14 pm

    Great take on forms and thank you. Quick question:
    Why a span.label in the .controlset as opposed to just using a label?

  2. Prabhath

    December 6th, 2006 at 10:27 pm

    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.

  3. Ryan Thrash

    December 6th, 2006 at 10:40 pm

    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!

  4. Prabhath

    December 6th, 2006 at 10:56 pm

    I’ve done another variation of the template that uses label.controlset instead of span.label.

    This is why comments are a great idea ;-)

  5. Jonathan Schemoul

    December 7th, 2006 at 3:55 pm

    Great ideas about form accessibility and css styling…

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

  6. Apple

    December 7th, 2006 at 4:37 pm

    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.

  7. Daniel

    December 7th, 2006 at 10:57 pm

    Very nice visually, also in terms of accessibility for screen readers, the checkboxes and radio buttons themselves should be further enclosed in fieldset/legends…

  8. Bart

    December 7th, 2006 at 11:07 pm

    Good stuff! Simple and clean. What do you think of putting the controlset inside of an unordered list?

  9. Prabhath

    December 7th, 2006 at 11:20 pm

    @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.

  10. links for 2006-12-07 | Sr&hellip

    December 8th, 2006 at 5:22 am

    […] Nidahas » Forms markup and CSS - Revisited A CSS-based Form Template (tags: css forms webdesign) […]

  11. Ash Haque

    December 11th, 2006 at 8:34 am

    Great looking template, clean markup too!

  12. Daniel

    December 11th, 2006 at 11:42 am

    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 ….

  13. watchingnow » Blog &hellip

    December 12th, 2006 at 8:45 am

    […] Nidahas » Forms markup and CSS - Revisited Creating CSS and standards-based forms (tags: css design forms development) […]

  14. Steve

    December 13th, 2006 at 9:53 pm

    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.

  15. Wilco

    December 14th, 2006 at 2:26 pm

    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.

  16. Prabhath

    December 14th, 2006 at 8:07 pm

    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.

  17. Smith Data Processing Ser&hellip

    December 18th, 2006 at 11:19 am

    […] Nidahas » Forms markup and CSS - Revisited (tags: css forms) […]

  18. Chris Curtis dot Org: Ran&hellip

    December 24th, 2006 at 3:27 am

    […] 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 · […]