Prettier Accessible Forms

by Nick Rigby

118 Reader Comments

Back to the Article
  1. Hello. Opera 9.01 is inserting ‘Null’ in front of the label values for me, with the intended label then dropping down a line. Anyone got a fix for that?

    Copy & paste the code below to embed this comment.
  2. I was sure I didn’t already read an answer to my question on Opera 9.01 and Null, but it’s there on page 3.

    Copy & paste the code below to embed this comment.
  3. I know I’m awfully late to the party, but I was wondering about the statement in the article that, “forms don’t constitute tabular data.”

    I’ve heard other people say this, and I really don’t get why. Especially given the concept of label/data pairs. In fact, I would suspect that when most forms are submitted to a database the data is submitted in a near identical format (e.g. The first column being an identifying label, and the next column being the data (although, I still think it would be semantic, even if the order was reversed… just kind of whacky in L to R reading languages)).

    I’m wondering if I’m missing something.

    Copy & paste the code below to embed this comment.
  4. I dont have anything to add to the discussion. I just wanna say that the idea of using lists for structuring is very…ummm…unique.

    I won’t argue about semantics or anything. coz as long as it works, it’s totally fine by me :D

    Copy & paste the code below to embed this comment.
  5. Here is a poor attempt at re-implementing this using Prototype.js since JQuery clashes.  This requires that the form has an id=“cmxform”, I’m sure people out there that actually know what they’re doing could improve upon this.


    if( document.addEventListener ) document.addEventListener( ‘DOMContentLoaded’, cmxform, false );

    function cmxform(){ // Hide forms $( ‘cmxform’ ).hide();

    // Processing var someNodeList = $(‘cmxform’).getElementsByTagName(‘label’); var nodes = $A(someNodeList); nodes.each( function( i ){ var labelContent = i[removed]; var labelWidth = document.defaultView.getComputedStyle( i, ‘’ ).getPropertyValue( ‘width’ ); var labelSpan = document.createElement( ‘span’ ); labelSpan.style.display = ‘block’; labelSpan.style.width = labelWidth; labelSpan[removed] = labelContent; i.style.display = ‘-moz-inline-box’; i[removed] = null; i.appendChild( labelSpan ); } ); //.end(); // Show forms $( ‘cmxform’ ).show(); }

    Copy & paste the code below to embed this comment.
  6. Someone above was asking about a tableless two column css layout.

    Working for a non-profit which serves the disabled, this article was my original inspiration for developing the above. 

    I eventually found the use of fieldsets preferrable to unordered lists because of the extra junk that comes with them in screen-readers. Besides, they make natural large containers, I wish I had discovered them years ago.

    This article is right-on in promoting the use of labels, which I now use religiously. I simply happen to like the div/span approach.

    Copy & paste the code below to embed this comment.
  7. Someone above was asking about a
    “tableless two column css layout”:http://www.yeago.net/work/2006/09/two-column-css-layout.html

    Working for a non-profit which serves the disabled, this article was my original inspiration for developing the above.

    I eventually found the use of fieldsets preferrable to unordered lists because of the extra junk that comes with them in screen-readers. Besides, they make natural large containers, I wish I had discovered them years ago.

    This article is right-on in promoting the use of labels, which I now use religiously. I simply happen to like the div/span approach.

    ps: severe apologies for the double-post. forgot to Textile.

    Copy & paste the code below to embed this comment.
  8. Let me first say that this article has become a great resource for me and has changed the way I think about and create forms. But I’ve found a problem that I’m surprised that no one has mentioned here. I’m developing on a Mac, and everything looks perfect on Safari! But in the rest of the browsers I’ve seen, there are inconsitencies. I’ve done a little modification to the CSS for my own purposes, naturally, and set the label width to 33%, as I’m using them in some varying CSS column layouts and this causes the labels to collapse so that the inputs are right along the right side of them. This happens everywhere bu Mac Safari and MSIE. The only other inconsistency is that MSIE seems to give a left margin to fieldsets. I set up my Submit button like so:

    <li>
    <fieldset>
    <label><input type=‘submit’ value=‘Submit’ /></label>
    </fieldset>
    </li>

    So that it would line up with my checkboxes and other inputs, but it shift a good inch to the right. Any ideas on how to fix this situation?

    Copy & paste the code below to embed this comment.
  9. As a comment to the 2 column tableless design remark;

    you can now validate your tableless design at: http://w3tableless.com

    check if you’ve done it the right way.

    Copy & paste the code below to embed this comment.
  10. Hi,

    Both on IE 6 and Firefox on Win2k, when a legend has more than 1 line, it’s not broke but continues on a single line.

    It’s at the exact position of “Is this address also your invoice address ?” but longer.

    Even if I force the width property of the legend, it’s not working, evenwith ” !important”.

    If you have any idea “¦

    Cheers.

    Copy & paste the code below to embed this comment.
  11. Firstly, I think this article does provide a nice insight and a perfectly valid method for form layouts. I think whilst the use of Javascript to fix style hacks is far from ideal, it is a solution which should work for the vast majority of people and thus is not a big usability issue. The downside is simply the untidiness of having extra “˜hack fix’ code.

    I would, personally, disagree with your assertion that it is wrong to represent form data in a tabular form. I believe that it is perfectly acceptable to represent any data however you like providing the semantics are easy to understand, mathematically solid, and do not contravene existing standards unless there is a specific reason for doing so. In the case of forms, I would say that it’s as easy to understand the semantics of a table form layout vs. a list based layout. Because there aren’t any fixed standards in place for form semantics I can’t see why using tables can be considered a poorer solution to using lists.

    For most situations you can classify a form as a set of related fields with undefined size, and classify a field as a typical (key, value) pair. To give an example, taking the first three, fields of your form (Name, Address, City) using set notation you could mathematically represent a typical record of data as ((Name, “˜Homer Simpson’), (Address, “˜742 Evergreen Terrace’), (City, “˜Springfield’)). As the set contains pair based items only, you can consider a 2-column table where the first column represents the head of the pairs and the second represents the tail of the pairs. Clearly, it is a direct mapping between two representations and the related XHTML code would be pretty self explanatory.

    I think there is a certain hesitation to use tables in the designer world for fear of being ridiculed for being out-of-touch. I think in this case a table solution would be perfectly understandable and increase the clarity of the page’s stylesheet.

    Copy & paste the code below to embed this comment.
  12. The alternative javascript (in comment #106) for use with Prototype.js only works with one form on the page and with it’s ID being ‘cmxform’, not the class.  This alternative works pretty much the same as the original script, only using prototype.js instead of jquery.

    function cmxform(){

    // Hide forms
    $$(‘form.cmxform’).each(Element.hide);

    // Processing
    $$(‘form.cmxform li label’).each( function( label ){
      if (label.classNames() != ‘nocmx’) {
      var labelContent = label[removed];
      var labelWidth = document.defaultView.getComputedStyle( label, ‘’ ).getPropertyValue( ‘width’ );
      var labelSpan = document.createElement( ‘span’ );
      labelSpan.style.display = ‘block’;
      labelSpan.style.width = labelWidth;
      labelSpan[removed] = labelContent;
      label.style.display = ‘-moz-inline-box’;
      label[removed] = ‘’ ;
      label.appendChild( labelSpan );
      }
    } ) ;

    // Show forms
    $$(‘form.cmxform’).each(Element.show);

    }

    if( document.addEventListener ) document.addEventListener( ‘DOMContentLoaded’, cmxform, false );

    Copy & paste the code below to embed this comment.
  13. Why are submit buttons never included in fieldsets?

    Since submit buttons can have meaning themselves, it would seem appropriate to me. I’ve never understood this.

    Copy & paste the code below to embed this comment.
  14. Hi,

    bin gerade duch zufall auf den Artikel gestosen, finde den Artikel echt toll, hat mir sehr weiter geholfen.

    Danke
    :-)

    Copy & paste the code below to embed this comment.
  15. I checked the CSS and it doesnt validate.

    “See for yourself”:http://jigsaw.w3.org/css-validator/validator?uri=http://www.alistapart.com/d/prettyaccessibleforms/example_3/assets/css/_library/cmxform.css&usermedium=all

    Just something to keep in mind if you plan to do this.

    I think overall it has a nice end result without using floats, but it’s sort of a toss up between floats and javascript.

    Copy & paste the code below to embed this comment.
  16. i like the approach and want to try it in my next applications. especially the way that you use a list to define the form rows. interesting. need to check how you managed the gradient.. looks nice ;)
    you can pass by my blog http://webdevbros.grafix.at i am sure its interesting for you.

    Copy & paste the code below to embed this comment.
  17. <a href=”?http://www.urmood.com/urmood_css_tableless_forms/”>

    Nice article Nick, one of the best examples I’ve seen. I’ve been looking for a good css alternative to table based forms for a while now. I found this article along with a few other articles, all with different implementations. However, the majority of them used div, span, lists, p, br etc, which personally I don’t think is semantically correct. Javascript/css combinations like Nick’s seem to be a favourite too, which I’m not a fan of, sorry. Most of the examples I’ve seen don’t validate to XHTML 1.0 Strict, and fall apart in different browsers. They also didn’t cater for radio buttons, check boxes etc, so I’m glad to see Nick’s article includes these. ANYWAYS, as nothing else I have seen suited me I’ve been working on my own tableless form which covers all the points above and seems pretty bulletproof: Tested and working in Windows: IE 5, IE 5.5, IE 6, IE 7, FF 1, FF 2, Netscape 6*, Netscape 7*, Netscape 8, Opera 5**, Opera 6**, Opera 7, Opera 8, Opera 9 Having read the previous posts, this is a different solution that might suit some of you better. Thought I’d share it and see what you think: <a href=”?http://www.urmood.com/urmood_css_tableless_forms/”>
    Copy & paste the code below to embed this comment.
  18. I used your above tutorial, but my the list is messing with my page background (only on PCs though). Here’s the link:

    http://www.cinevegas.com/survey/non.html

    Please I need help!

    Copy & paste the code below to embed this comment.