Welcome to WebmasterWorld Guest from 54.226.62.26

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

vkaryl

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

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member



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

The Overseer

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member



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

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

10+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month