Welcome to WebmasterWorld Guest from 50.19.53.104

Forum Moderators: not2easy

Message Too Old, No Replies

Table-less CSS Forms

Another go at them...

     

Wertigon

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

10+ Year Member



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

bumpaw

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

10+ Year Member



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.

Wertigon

9:34 am on May 31, 2004 (gmt 0)

10+ Year Member



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

SuzyUK

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

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



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

Wertigon

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

10+ Year Member



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

Bonusbana

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

10+ Year Member



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

jamesa

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

WebmasterWorld Senior Member 10+ Year Member



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.

hafnius

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

10+ Year Member



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

Wertigon

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

10+ Year Member



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

onesmalldaz

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

10+ Year Member



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

Purple Martin

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

WebmasterWorld Senior Member 10+ Year Member



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

DrOliver

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

10+ Year Member



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>

zonkd

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

10+ Year Member



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?

Wertigon

1:04 pm on Jun 19, 2004 (gmt 0)

10+ Year Member



Go where?

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

Purple Martin

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

WebmasterWorld Senior Member 10+ Year Member



Put the URL of the target file in the action attribute of the form tag.

zonkd

2:21 pm on Jun 21, 2004 (gmt 0)

10+ Year Member



Thanks, PurpleMartin, much obliged.

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

Wertigon

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

10+ Year Member



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

eazyejensen

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

10+ Year Member



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]

eazyejensen

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

10+ Year Member



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

Stratus42

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

10+ Year Member



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

CritterNYC

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

10+ Year Member



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

Wertigon

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

10+ Year Member



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

CritterNYC

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

10+ Year Member



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.

zonkd

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

10+ Year Member



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

cssuser

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

10+ Year Member



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

wibble

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

10+ Year Member



Also, how do you remove the break after the legend?

Aberdeen

4:10 pm on Sep 1, 2004 (gmt 0)

10+ Year Member



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

Cheers

vkaryl

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

WebmasterWorld Senior Member 10+ Year Member



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

DrDoc

7:06 pm on Sep 1, 2004 (gmt 0)

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



Welcome to WebmasterWorld [WebmasterWorld.com], cssuser!

You can accomplish what you're asking by using

white-space: nowrap;
.

CritterNYC

3:56 pm on Sep 2, 2004 (gmt 0)

10+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month