homepage Welcome to WebmasterWorld Guest from 50.17.107.233
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

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

 

vkaryl




msg:1190749
 5:35 pm on Sep 2, 2004 (gmt 0)

I'm actually going to put together some examples and a tutorial on this method, including a few different display styles.

Please post when you get it up, hopefully the addy won't violate TOS! I'm always looking for good tutorials etc. I've been out of various loops for so long, I'm stale. And so are most of my sites, except the couple of REALLY active ones (which have been using all my available time lately until I quit working the other day....) Hopefully I can start catching up fast, because I KEEP BUYING domain names for which I have huge quantities of ideas, most of which I don't have a clue how to implement any more!

[Edit for typos *sigh*]

Wertigon




msg:1190750
 9:30 pm on Sep 4, 2004 (gmt 0)

Aye, and even if the addy violates the ToS, sticky me a link to it, it'd be handy to have. :)

The Overseer




msg:1190751
 8:49 am on Sep 7, 2004 (gmt 0)

It should be noted that that's not actually valid XHTML 1.1 unless it's being sent as MIME type 'application/xhtml+xml' rather than 'text/html'. That goes for both the meta tag and the actual Content-type header sent by the server. Unfortunately, Internet Explorer doesn't support this type (it tries to open it as a standalone file, the stupid thing), so you can either have botched XHTML 1.1 sent as text/html or XHTML 1.0 Strict sent as text/html, which is allowed. Or say 'to hell with IE!'

Of course, I'm just being pedantic. ;-)

vkaryl




msg:1190752
 2:58 pm on Sep 7, 2004 (gmt 0)

Welcome to Webmaster World, The Overseer!

Pedanticism has its place! And that's a good thing to note, because should one attempt this particular thing, one would have to work around it....

CritterNYC




msg:1190753
 8:45 pm on Sep 7, 2004 (gmt 0)

It should be noted that that's not actually valid XHTML 1.1 unless it's being sent as MIME type 'application/xhtml+xml' rather than 'text/html'. That goes for both the meta tag and the actual Content-type header sent by the server. Unfortunately, Internet Explorer doesn't support this type (it tries to open it as a standalone file, the stupid thing), so you can either have botched XHTML 1.1 sent as text/html or XHTML 1.0 Strict sent as text/html, which is allowed. Or say 'to hell with IE!'

Of course, I'm just being pedantic. ;-)

True, it is worth nothing. I actually send mine down the wire as XHTML 1.0 Transitional.

munchiez




msg:1190754
 11:05 am on Sep 22, 2004 (gmt 0)

Hi all,

First time posting here, although I've been lurking for a while.

Firstly, great job here! I've been banging my head against a brick wall for ages trying to create tableless forms, I guess I should have searched around earlier!

I'm having a bit of a problem trying to add a textarea to a form - when I add a textarea it's indented properly but doesn't force the height of the label to increase, so the textarea appears behind the other fields below it.

I've had a go at fixing it, but had no luck at all yet. Does anybody have any suggestions?

<!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, textarea { position : absolute; left : 110%; top : 2px; width : 10em; border:1px solid black;padding:2px;}
label input:focus,textarea: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="comments">Comments:<textarea name="comments" id="comments"></textarea></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>

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved