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?
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)).
Copy & paste the code below to embed this comment.
arn ie
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.
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.
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.
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:
Copy & paste the code below to embed this comment.
Mark Wraith
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.
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);
Copy & paste the code below to embed this comment.
Eric Higgins
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.
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.
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/”>
118 Reader Comments
Back to the ArticleStephen Stewart
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?
Stephen Stewart
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.
andy standfield
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.
Rizky Syajuli
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
arn ie
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(); }Stephen Yeago
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.
Stephen Yeago
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.
Chris Forrette
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?
Dirk-Jan de Groot
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.
Jérémy Lecour
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.
Mark Wraith
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.
Mark Mitchenall
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 );
John N
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.
Andre Brück
Hi,
bin gerade duch zufall auf den Artikel gestosen, finde den Artikel echt toll, hat mir sehr weiter geholfen.
Danke
:-)
Eric Higgins
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.
michal gabrukiewicz
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.
Stephen Sinclair
<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/”>Roger Tinch
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!