4 replies [Last post]
gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 4 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

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.

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 4 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

&lt;dl&gt; 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>

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 4 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

&lt;dl&gt; 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

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Spectralizer
Spectralizer's picture
Offline
Enthusiast
Toronto, ON. Canada
Last seen: 15 years 10 weeks ago
Toronto, ON. Canada
Timezone: GMT-5
Joined: 2005-03-30
Posts: 53
Points: 0

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

This is my .sig... there are many like it, but this one is mine.
My .sig is my best friend... It is my life.
I must master it as I must master my life.
My .sig, without me, is useless... Without my .sig, I am useless.

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 12 years 4 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

&lt;dl&gt; 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.