homepage Welcome to WebmasterWorld Guest from 54.211.95.201
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

This 36 message thread spans 2 pages: 36 ( [1] 2 > >     
Table-less CSS Forms
Another go at them...
Wertigon




msg:1190719
 4:06 pm on May 30, 2004 (gmt 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

 

bumpaw




msg:1190720
 5:36 pm on May 30, 2004 (gmt 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.

Wertigon




msg:1190721
 9:34 am on May 31, 2004 (gmt 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... ;)

SuzyUK




msg:1190722
 10:55 am on May 31, 2004 (gmt 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

Wertigon




msg:1190723
 8:24 am on Jun 1, 2004 (gmt 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. ;)

Bonusbana




msg:1190724
 11:28 am on Jun 1, 2004 (gmt 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

jamesa




msg:1190725
 11:29 am on Jun 1, 2004 (gmt 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.

hafnius




msg:1190726
 1:30 am on Jun 2, 2004 (gmt 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

Wertigon




msg:1190727
 12:28 pm on Jun 2, 2004 (gmt 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. ;)

onesmalldaz




msg:1190728
 5:02 am on Jun 4, 2004 (gmt 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 />

Purple Martin




msg:1190729
 5:29 am on Jun 4, 2004 (gmt 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 :)

DrOliver




msg:1190730
 8:46 am on Jun 4, 2004 (gmt 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>

zonkd




msg:1190731
 3:49 pm on Jun 17, 2004 (gmt 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?

Wertigon




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

Go where?

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

Purple Martin




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

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

zonkd




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

Thanks, PurpleMartin, much obliged.

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

Wertigon




msg:1190735
 12:39 pm on Jun 24, 2004 (gmt 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...

eazyejensen




msg:1190736
 11:14 pm on Jul 22, 2004 (gmt 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]

eazyejensen




msg:1190737
 12:09 am on Jul 23, 2004 (gmt 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 =)

Stratus42




msg:1190738
 9:50 am on Jul 23, 2004 (gmt 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

CritterNYC




msg:1190739
 10:47 pm on Jul 23, 2004 (gmt 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

Wertigon




msg:1190740
 12:19 pm on Jul 24, 2004 (gmt 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! :)

CritterNYC




msg:1190741
 3:56 pm on Jul 26, 2004 (gmt 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.

zonkd




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

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

cssuser




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

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




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

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

Aberdeen




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

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

Cheers

vkaryl




msg:1190746
 5:14 pm on Sep 1, 2004 (gmt 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....

DrDoc




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

Welcome to WebmasterWorld [WebmasterWorld.com], cssuser!

You can accomplish what you're asking by using white-space: nowrap;.

CritterNYC




msg:1190748
 3:56 pm on Sep 2, 2004 (gmt 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 ( [1] 2 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved