Welcome to WebmasterWorld Guest from 54.167.83.224

Forum Moderators: not2easy

Message Too Old, No Replies

Table-less CSS Forms

Another go at them...

     
4:06 pm on May 30, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:May 11, 2003
posts:172
votes: 0


I've recently played around with forms a bit, and I believe I've managed to come up with something that might be the simplest, most flexible solution yet. It's based on Nick_W's CSS-form [webmasterworld.com] (albeit I modified the HTML code a bit). I've tested the technique with Opera 7, IE6 and Moz 1.2, and so far it doesn't have any problems that I can see.

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

5:36 pm on May 30, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Jan 19, 2004
posts:562
votes: 0


Very Nice! I have a validation question though. For what little I have played with w3c validator the results were either Strict or Transitional. In this case it says valid XHTML 1.1 with no mention of strict or transitional. I guess it's the nature of 1.1. I've not gone there yet.
9:34 am on May 31, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:May 11, 2003
posts:172
votes: 0


Well, XHTML 1.1 only has a Strict doctype. It's really not *that* much of a difference from XHTML 1.0 Strict or HTML 4.01 Strict, but since I was writing up an example I figured I should use the latest (X)HTML standard.

Still waiting for people to tear the code apart... ;)

10:55 am on May 31, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Very Nice! Wertigon

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

8:24 am on June 1, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:May 11, 2003
posts:172
votes: 0


Okay, I've tried it out on a few more browsers. Tested ones now include:

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. ;)

11:28 am on June 1, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Jan 14, 2004
posts:388
votes: 0


Nice one! Looks fine in IE 5.21 / mac too.

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

11:29 am on June 1, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 15, 2002
posts:710
votes: 0


Nice, Wertigon!

>> test this code

Looks great in IE5/Mac.

In IE5/Win the input fields extend past the right border of the fieldset box.

1:30 am on June 2, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 21, 2003
posts:108
votes: 0


Hi Wertigon

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

12:28 pm on June 2, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:May 11, 2003
posts:172
votes: 0


Jamesa: Hmm... I *knew* some browser would have to fork it up. Oh well...

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. ;)

5:02 am on June 4, 2004 (gmt 0)

New User

10+ Year Member

joined:Apr 21, 2004
posts:11
votes: 0


If only it worked when using contenteditable divs to take in content...

<label for="Comment">Comment:<div id="Comment" contenteditable="true" style="overflow:auto; width:100px; height:100px; border:1px solid #666666;"></div></label><br />

5:29 am on June 4, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


Very nice! I've tried to do that before, and failed because it didn't occur to me to put the input tags inside the label tags.

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 :)

8:46 am on June 4, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 5, 2002
posts:142
votes: 0


Here's an optical retouche, after reading some of the comments. The focus effect won't be seen in IE. (Did I really have to say that?). It could be achieved via scripting, though.

<!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&#8230;</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>

3:49 pm on June 17, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:June 16, 2004
posts:84
votes: 0


Sorry, this is a very basic question fo rsuch an a attractive form. But, please, where do you say where you want the information to go?
1:04 pm on June 19, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:May 11, 2003
posts:172
votes: 0


Go where?

Sorry, I don't quite follow you... Could you clarify the question?

12:44 am on June 21, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


Put the URL of the target file in the action attribute of the form tag.
2:21 pm on June 21, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:June 16, 2004
posts:84
votes: 0


Thanks, PurpleMartin, much obliged.

And thanks to Wert. Yes, I am awestruck. It's very neat.

12:39 pm on June 24, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:May 11, 2003
posts:172
votes: 0


Hmm, I wonder if there's something that could fix it in IE 5.0... So far I've managed to play a little with the margins, it fixes the IE 5.0/Win problem of the input fields hanging out over the fieldset border, but that makes it break in every other browser... -_-;

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

11:14 pm on July 22, 2004 (gmt 0)

New User

10+ Year Member

joined:July 22, 2004
posts:2
votes: 0


Hi there,

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]

12:09 am on July 23, 2004 (gmt 0)

New User

10+ Year Member

joined:July 22, 2004
posts:2
votes: 0


Crap, I am quite embarrassed at this point in time... Apparently css requires measurement specification.

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 =)

9:50 am on July 23, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 13, 2004
posts:97
votes: 0


wow! Wertigon - how much fun is this?! You know you're turning into a css-geek when somebody shows you a neat way to remove yet another table and it makes your day! the visual retouch (drOliver!) is super nice too!

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

10:47 pm on July 23, 2004 (gmt 0)

Full Member

10+ Year Member

joined:Feb 23, 2003
posts:207
votes: 0


But what about those of us that prefer:


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

12:19 pm on July 24, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:May 11, 2003
posts:172
votes: 0


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.

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! :)

3:56 pm on July 26, 2004 (gmt 0)

Full Member

10+ Year Member

joined:Feb 23, 2003
posts:207
votes: 0


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.

7:34 am on July 27, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:June 16, 2004
posts:84
votes: 0


Looks very good, CritterNYC. Thanks very much for sharing. Cheers

cssuser

1:03 pm on Aug 23, 2004 (gmt 0)

Inactive Member
Account Expired

 
 


Hi,
I am new to css, and was looking at mechanisms for css based forms without tables.

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

9:19 am on Sept 1, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:July 31, 2003
posts:52
votes: 0


Also, how do you remove the break after the legend?
4:10 pm on Sept 1, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:July 5, 2003
posts:167
votes: 0


So how do you add a textarea with a specific row height without it overlapping the input or buttons below?

Cheers

5:14 pm on Sept 1, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 19, 2003
posts:1747
votes: 0


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....
7:06 pm on Sept 1, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Welcome to WebmasterWorld [WebmasterWorld.com], cssuser!

You can accomplish what you're asking by using

white-space: nowrap;
.
3:56 pm on Sept 2, 2004 (gmt 0)

Full Member

10+ Year Member

joined:Feb 23, 2003
posts:207
votes: 0


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

This 36 message thread spans 2 pages: 36
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members