Forum Moderators: not2easy
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
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*]
Of course, I'm just being pedantic. ;-)
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....
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.
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…</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>
