Fri, 2005-05-06 07:28
heya,
I have just completed a fairly successful (so far) attempt at a form without tables using a definition list:
I would love some critic and testing on it so I can see if it really does work. Tested in PC IE 6 and Firefox so far. Any advice is appreciated!
some problems I have noticed:
The <dt> and <dl> are defined widths so the float: left works properly. although I noticed that if I replace the bottom checkboxes text with say smaller phrases each ("test word", "this text here") then <dd> seems to collapse around the content and screw up the <dd> width.
will post code below.
Fri, 2005-05-06 07:28
#1
<dl> list form experiment - try number 2!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Forms - definition list layout</title>
<style type="text/css">
* { margin: 0; padding: 0; }
#formWrap { width: 790px; }
/* general form styles */
#myForm dt {
width: 270px;
float: left;
margin-right: 20px;
margin-bottom: 10px;
text-align: right;
}
#myForm dd {
margin-bottom: 10px;
width: 450px;
float: left;
}
.i { display: none; }
/* text field styles */
#textEnter { height: 100px; }
#textEnter, #firstname, #lastname, #email { width: 300px; }
#birth, #postcode { width: 150px; }
/* submit button */
.submitMe {
background: #d4d0c8;
color : #000;
font: bold 11px verdana, san-serif;
border : 1px ridge #b5c1ce;
cursor:hand;
width: 54px;
height: 18px;
padding-bottom: 1px;
}
</style>
</head>
<body>
<!-- problems -->
<!-- not validating! -->
<!-- the text below (checkboxes).. if there is not lots of text it breaks the float: left;, looks as if the widths of dd's are *beep*ing up. -->
<form id="formWrap" name="name" method="post" action="#">
<dl id="myForm">
<dt><label for="textEnter"><strong>Blurb here that keeps going on and on... just a few words that's all.</strong></label></dt>
<dd><textarea name="textarea" id="textEnter" rows="10" cols="20" tabindex="1"></textarea></dd>
<dt><label for="firstname">First name:</label></dt>
<dd><input type="text" name="firstname" id="firstname" tabindex="2" /></dd>
<dt><label for="lastname">Last name:</label></dt>
<dd><input type="text" name="lastname" id="lastname" tabindex="3" /></dd>
<dt><label for="email">Email address:</label></dt>
<dd><input type="text" name="email" id="email" tabindex="4"/></dd>
<dt><label>Gender:</label></dt>
<dd><label for="genderMale">
<input value="male" name="gendermale" id="genderMale" type="radio" tabindex="5" />
Male
</label>
<label for="genderFemale">
<input value="female" name="genderFemale" id="genderFemale" type="radio" tabindex="6" />
Female
</label>
</dd>
<dt><label for="birth">Date of birth (mm/yyyy):</label></dt>
<dd><input type="text" name="birth" id="birth" value=" mm / yyyy" tabindex="7" /></dd>
<dt><label for="postcode">Postcode:</label></dt>
<dd><input type="text" name="postcode" id="postcode" tabindex="8" /></dd>
<dt><input type="checkbox" name="sendinfo_1" id="sendinfo_1" value="yes" tabindex="9" /></dt>
<dd><label for="sendinfo_1">Please send me information about fox movies and dvd products and promotions.</label></dd>
<dt><input type="checkbox" name="sendinfo_2" id="sendinfo_2" value="yes" tabindex="10" /></dt>
<dd><label for="sendinfo_2">Please send me information about fox movies and dvd products and promotions.</label></dd>
<dt><input type="checkbox" name="sendinfo_3" id="sendinfo_3" value="yes" tabindex="11" /></dt>
<dd><label for="sendinfo_3">Please send me information about fox movies and dvd products and promotions.</label></dd>
<dt>
<input type="hidden" name="redirecturl" value="#" />
<input type="hidden" name="sectionid" value="#" />
<input type="hidden" name="sitename" value="#" />
</dt>
<dd><input class="submitMe" type="submit" value="submit" onmouseover="this.style.background='#cbc8c1'" onmouseout="this.style.background='#d4d0c8'" /></dd>
</dl>
</form>
</body>
</html>
Fri, 2005-05-06 15:53
#2
<dl> list form experiment - try number 2!
An interesting take on making forms. It degrades well for downlevel browsers.
Need to have a bounding div for the form - validation wise.
FF will handle the long floating text issue with something like Tony's float clearing trick with a:
#myForm dd:after {
content: "."; . . . trick but it won't work for IE although a clearing break would but that adds extra vertical space.
Full code to try:
#myForm dd:after {
content: ".";
display: block;
height: 0;
margin-bottom:10px;/*if you use this, take the margins off the dd and dt*/
clear: both;
visibility:hidden;
}
#myForm dd {
display: inline-block;
}
/* Mark Hadley's fix for IE Mac */
/* Hides from IE Mac \*/
* html #myForm dd {
height: 1%;
}
#myForm dd {
display:block;
}
/* End Hack */
Its worth working on a bit more, I think.
DE
Sat, 2005-05-07 03:51
#3
interesting!
This deserves some more of my attention, but I can't spare any right now (getting married in a week!) but it's very interesting.
My forms are the last place that I'm still using tables (the site I'm currently working on is GentleTeachers.Org) and I'd love to finally break the habit cold-turkey!
Thanks again for the info.
^Curtis
Sat, 2005-05-07 10:22
#4
<dl> list form experiment - try number 2!
yeah, I am still using tables for my forms but am interested in making this solution workable if possible...
I still find the <table>, <th>,<td> combo the most stable for my commercial sites, but really like how the definition list solution breaks down.