An Unfinished Symphony

It's about the internet and stuff.

Style:Phreak’s Standard Form Layout Revisited

In August 2004 Style:Phreak created a demonstration of a standards compliant form marked up with semantic HTML and styled with CSS. I’ve only recently been introduced to it by an acquaintance from a forum I visit occasionally who uses a version based on it and asked how it could be made more semantic following a brief discussion about it. As a result of that discussion I’ve taken it upon myself to update it slightly, a possibility brought about due to better support available in current browsers compared to what was available in 2004.

Variations in this version:

  • The wrapping of label/input pairs within divs has been dropped as this was only used to allow styling effects to be done to them – those effects are possible without needing to add the extra markup.
  • The div surrounding the radio buttons has been replaced with a fieldset, which is more semantic, though it’s responsible for the minor issue in Opera 7.23 outlined below.
  • Although a tabindex could have been added one hasn’t been – as this isn’t an active form I decided against this. In a real form one would possibly have been used. Also the erroneous inclusion of one empty tabindex attribute in the original has been omitted here.
  • The statement, in the style:phreak original, that fields marked in bold are required is reliant on presentation and would mean that screenreader users won’t get the message, this has been replaced with the comment that those marked with a * are required.
  • As * marked fields are required it is important that all users get to see it, so it’s important that it isn’t included via the CSS content property, as per the original.
  • As the contents of the “required fields” paragraph contains essential information relating to the form it’s more meaningful to include it within the form, so that’s done too.
  • The script used to toggle the optional fields on and off has been removed in this version, however a script to correct a win IE bug has been included in order to prevent the resetting of select fields when their label is clicked.

This version has been tested and works as intended in the following current Windows browser versions: Internet Explorer 6, Firefox and Opera 8.52. It has also been tested in Opera 7.23 (the lowest version I care about supporting) and found to work with only one error – where the fieldset surrounding the radio buttons is surrounded by a border despite the CSS rule setting it to none. In IE 5.02 and IE 5.5 for Windows it works as intended apart from a misplacement of the textarea and its label, and the wrapping of the label for the input above it on to two lines – I could have corrected this with an IE 5 only stylesheet or a hack, I didn’t care enough to try to.

This version, as with Style:Phreak’s original is released under a creative commons licence.

View the updated form here.

Up arrow

Comments on 'Style:Phreak’s Standard Form Layout Revisited'

RSS feed for comments on this post.


[…] There’s two advanced options in this form. The first is to add additional fields into the form, and they’ll still be picked up in the email. To do this, edit the form to include your additional form fields (checkboxes and file uploads are not supported in this form) using the following method (if you’re not sure on working with forms, read up on accessible form layouts): […]


[…] For further information on layouts and how to style and mark them up I recommend reading Style:Phreak’s Standard Form Layout Revisited. […]

Sorry, the comment form is closed at this time.