Forum Moderators: not2easy
Enough with the words, here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<title>Accessible Table-less forms</title>
<style type="text/css" media="all"> form, label, input { font-size : 1em; }
fieldset { width : 25em; padding : 0.5em 1em; }
label { position : relative; width : 15em; display : block; margin : .5em 0em; }
label input { position : absolute; left : 100%; top : 0px; width : 10em; }
input.submit { margin-left : 15em; }
br { display : none; }
</style>
</head>
<body>
<h1>CSS Forms</h1>
<p>This page is based entirerly on CSS. No tables whatsoever. It's fast, accessible, and probably the most elegant way to make table-less forms today. Check it out yourself...</p>
<form method="post" action="">
<fieldset>
<legend>Personal details</legend>
<label>Name:<input type="text" name="name" /></label><br />
<label>Email:<input type="text" name="email" /></label><br />
<label>Telephone:<input type="text" name="tel" /></label><br />
<input type="submit" value="Submit" class="submit" />
</fieldset>
</form>
</body>
</html>
Comments? Any problems? Or is it just such great a solution you're awestruck? ;)
- Wert
Still waiting for people to tear the code apart... ;)
I tried "tearing" but I couldn't :)
I'm a fan of fieldset/legend/label anyway and this is good use of the label element for positioning the inputs.
I was going to question the "unnecessary" <br />'s but I take it they're for non-css/accessibility purposes, which is a nice touch.. and the whole thing stands up well under zoomed text too..
another bookmark, thank you for posting it :)
Suzy
IE 6
IE 5.5
Mozilla
Opera 7
Safari
Konqueror
Galleon
So far, it hasn't been rendered broken in any of those. All that's left to try is IE 5.0/Mac and IE 5.0/Win, my Windows-box is quite dead at the moment however... So if someone would be so kind as to test this code in those two browsers I'd be grateful. :)
Suzy: Yep, I put the <br />'s in there for non-CSS browsers, of course you can remove them if you'd like. I just think that it's better to include rather than exclude, given a choice. ;)
However, it breaks in opera 6/mac. It still works and looks ok, but the "table effect" is gone. I dont know the stats for that browser, but I suspect it is very low.
david
>> test this code
Looks great in IE5/Mac.
In IE5/Win the input fields extend past the right border of the fieldset box.
Very nice code!
I have one suggestion that is only tested in ie6, Opera7.2 and Moz 0.8 (firefox)
By addding text-align:right; like this:
label { position : relative; width : 11em; text-align:right; display : block; margin : .5em 0em; }
with this, the text is flushed right against the input boxes. This is easyier one the eyes because it creates a center line to focus one, between the label and the input.
Just a minor thing though - thanks for sharing!
kind regards
/Hafnius
Is the overlap huge or small though? If it's the former I might already have a fix for it... Just send me an email with a screenshot if you can. Would be most appreciated. :)
Hafnius: Thanks for the tip. I'm sure there are other great ones out there, so keep 'em coming. This might be the most elegant solution today, but it'll be butt-ugly compared to tomorrow. ;)
<label for="Comment">Comment:<div id="Comment" contenteditable="true" style="overflow:auto; width:100px; height:100px; border:1px solid #666666;"></div></label><br />
This is my suggestion for improvement: use for and id attributes to associate the labels with the fields, which makes the labels clickable and improves accessibility:
<label for="name">Name:<input type="text" name="name" id="name" /></label>
Even though your labels and fields are already implicitly associated (and therefore some people might argue that there is no need for explicit association) I like to make the labels clickable :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<title>Accessible Table-less forms</title>
<style type="text/css" media="all">
form, label, input { font-size : 1em; }
fieldset { width : 27em; padding : 0.5em 1em; }
label { text-align:right;position : relative; width : 15em; display : block; margin : .5em 0em; border-bottom:dotted 1px black; padding:2px;}
label input { position : absolute; left : 110%; top : 2px; width : 10em; border:1px solid black;border-top-width:0;padding:2px;}
label input:focus{background-color:#dedede;}
input.submit { margin-left : 15em; }
br { display : none; }
</style>
</head>
<body>
<h1>CSS Forms</h1>
<p>This page is based entierly on CSS. No tables whatsoever. It's fast, accessible, and probably the most elegant way to make table-less forms today. Check it out yourself…</p>
<form method="post" action="">
<fieldset>
<legend>Personal details</legend>
<label for="name">Name:<input type="text" name="name" id="name" /></label><br />
<label for="email">Email:<input type="text" name="email" id="email" /></label><br />
<label for="tel">Telephone:<input type="text" name="tel" id="tel" /></label><br />
<input type="submit" value="Submit" class="submit" />
</fieldset>
</form>
</body>
</html>
Sorry, I don't quite follow you... Could you clarify the question?
And thanks to Wert. Yes, I am awestruck. It's very neat.
It's not as if it's a huge problem (seeing as most IE users has moved on to IE 5.5+), and the form works. But still, it'd be nice if it could be fixed somehow. Hmm...
I am trying to create some web pages and am *HOPING* to use css to layout the various form(s) that may or may not be involved from page to page.
What I am looking for is a way to position a fieldset in a particular place (perhaps absolute) on any given page. I have a menu bar that is positioned at top:50 and left:100 or something like that. I would like to be able to position 3 different fieldsets below that.
I have tried:
a) Setting the position: abosolute; top: 50; left:100;
-all this does is cause every fieldset to be rendered one on top of the other... not pretty.
b) Wrapping all three fieldsets with ANOTHER fieldset and setting the wrappers position attributes.
-all this does is wrap all three fieldsets with yet another line and does not allow you to move the info around in any way shape or form.
Any help that anyone can offer would be greatly appreciated.
Cheers,
Erik
[edited by: SuzyUK at 3:16 am (utc) on July 23, 2004]
[edit reason] ooops sorry no URLS see TOS #13 [webmasterworld.com] [/edit]
Therefore, had I used position: absolute; top: 50px; left: 100px, all would have been solved.
Grrrr. Now don't y'all go making the same mistake.
Erik =)
Ever read 1984? I'm reminded of the guy who says "It's a beautiful thing the descruction of words.. soon thoughtcrime will be impossible".. substitute the word Tables for words...
:-)
Lana
Name:
[_____________]
And perhaps a couple alongside each other when they are related.
First Name:.....Last Name:
[_____________] [_____________]
I've been playing with floats and clearing to accomplish this for a while now (a bit serendipitous that this topic came up a few days later). Here's an example for everybody using the above sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<title>Accessible Table-less forms</title>
<style type="text/css" media="all">
form, label, input { font-size : 1em; }
fieldset { width : 25em; padding : 0.5em 1em; }
label { float: left; position : relative; width : 10em; display : inline; margin : .5em .5em; }
label.long { width : 21em; }
label input { display: inline; left : 100%; top : 0px; width : 10em; }
label.long input { width : 21em; }
input.submit { margin-left : 15em; }
br { clear: both; }
</style>
</head>
<body>
<h1>CSS Forms</h1>
<p>This page is based entirerly on CSS. No tables whatsoever. It's fast, accessible, and probably the most elegant way to make table-less forms today. Check it out yourself...</p>
<form method="post" action="">
<fieldset>
<legend>Personal details</legend>
<label>First Name:<input type="text" name="first_name" /></label>
<label>Last Name:<input type="text" name="last_name" /></label><br />
<label class="long">Email:<input type="text" name="email" /></label><br />
<label class="long">Telephone:<input type="text" name="tel" /></label><br />
<input type="submit" value="Submit" class="submit" />
</fieldset>
</form>
</body>
</html>
I've tested this setup with:
- IE 5.01, 5.5 and 6.0 in Windows
- Opera 7.23 and 7.5 in Windows
- Mozilla 1.7/Firefox 0.9.2 in Windows and Linux
- Konqueror in Linux
- Safari 1.22 in Mac OSX
I think it's pretty good so far. More input is always helpful, though.
Best,
John
And one thing I wonder about; why the br { clear : both; }? Granted, I've not tested it in IE, but in Opera and Moz it's unneccessary. Any reasons for it?
Other than that, it's a great job! :)
Heeeeey... Nice work. :) Only thing I can really comment on is that the right edge is too wide, but I guess that's inevitable if you want it to look okay in IE5. Also, the submit-button is a bit misplaced, would be better if the right edge was aligned with the text boxes.
They're just side effects of the original posted to this thread. Dropping the fieldset width to 23em will take care of it. Same with the submit button. A left margin of 15em and a width of 7em will fix that.
And one thing I wonder about; why the br { clear : both; }? Granted, I've not tested it in IE, but in Opera and Moz it's unneccessary. Any reasons for it?
Yeah, it's a holdover from the way I use it. Occasionally, in a form, you end up with one smaller textbox on a "row" due to the other data around it. Rather than expanding a textbox that only takes a few letters to the whole width, you end the row there, with the BR tag. Clear:both handles that nicely. I have one form with 60 form elements on it, all arranged with CSS.
Other than that, it's a great job! :)
Thanks. I'm a HUGE fan of css-p em forms now and am happy to share.
I want the form fields to flow left to right as shown below:
label1 [.....] label2 [.....] label3 [.....]
but if the page width is such that only a label can be accomodated but not the associated field, i want the label and the field to come in a new line.
how do we achieve this.
currently my html form is a collection of fieldsets with each fieldset having labels with a child input tag.
<form action="act" method="post">
<fieldset> <legend> first field set </legend>
<label class="inputField">Label1 <input type="text" class="textField" name="field1"> </label>
<label class="inputField">Label2 <input type="text" name="field2" class="textField"> </label>
<label class="inputField">Label3 <input type="text" name = "field3" class="textField"> </label>
<label class="inputField">Label4 <input type="text" name="field4" class="textField"> </label>
</fieldset>
</form>
So basically if one window width can only accomodate fields 1 and 2 and label3 the output i am getting is some thing like ...
label1 [.....] label2 [.......] label3
[......] label4 [......]
But what i need is
label1 [.....] label2 [.......]
label3 [......] label4 [......]
Thanks
Cheers
You can accomplish what you're asking by using
white-space: nowrap;
CritterNYC, that's pretty nifty. I'm going to have to go back and try this again, now that I'm not working. I just didn't have the time to mess with it before - and boy do I like your "look". Elegant....
vkaryl... glad you like it... and thanks for the compliment. I've been LOVING CSS forms when combined with some of the CSS fixes in IE7. It's a beautiful thing to have the WHOLE page be relative sizing, including all your forms layouts, and see it resize.
I'm actually going to put together some examples and a tutorial on this method, including a few different display styles. There are a few CSS form pages/tutorials out there, but I had never seen one that displayed the way I wanted to (as above), so I futzed with it for a while before I got what I wanted.
Regards,
John
