Michael B Allen wrote:
Secondarily, would you expect a professional library of this type to use
tableless forms? Personally I have never been able to create tableless
forms and have things line up into columns. So for now I'm going to use
tables but I would be very interested in hearing someone make a case
for tableless forms.
Mike
Tableless forms are all about the fieldsets and labels.
<html>
<head>
<title>Form</title>
<style type="text/css">
.myapp fieldset {
border: 0;
}
.myapp legend {
color: #000080;
border-bottom: 2px #808080 solid;
margin-bottom: 0px;
}
.myapp label {
float:left;
width: 70px;
clear: left;
text-align: right;
white-space: nowrap;
margin: 5px;
}
.myapp input, select, textarea {
float: left;
}
.myapp textarea {
width: 300px;
height: 100px;
}
.myapp fieldset.checkboxes legend {
color: #000;
border: 0;
margin: 0;
}
.myapp fieldset.checkboxes label{
text-align: left;
margin-left: 75px;
}
</style>
</head>
<body>
<form class="myapp">
<fieldset>
<legend>Account Information</legend>
<label for="field_username">Username:</label>
<input type="text" name="username" id="field_username"
value="" />
<label for="field_password">Password:</label>
<input type="password" name="password"
id="field_password" value="" />
<label for="field_state">State:</label>
<select name="state" id="field_state">
<option>Choose One</option>
<option>CT</option>
<option>NJ</option>
<option>NY</option>
</select>
<label for="field_comments">Comments:</label>
<textarea name="comments" id="field_comments"></textarea>
</fieldset>
<fieldset class="checkboxes">
<legend>Favorite Color:</legend>
<label for="color_red"><input type="radio" name="color"
id="color_red" value="red" /> Red</label>
<label for="color_green"><input type="radio"
name="color" id="color_green" value="green" /> Green</label>
<label for="color_blue"><input type="radio" name="color"
id="color_blue" value="blue" /> Blue</label>
</fieldset>
</form>
</body>
</html>
One sidebar - make sure your id's and field names are different as IE
tends to confuse the two and reacts strangely.
Google for "css forms" (sans quotes) and you'll find quite a few
helpful examples.
As for making a case for css forms, I think the above example speaks for
itself. Very easy to see what's going on here without even testing in a
browser. Even though I'd coded in tables for years (around 1997 -
2001), trying to read around table tags these days makes me feel
completely illiterate when it comes to figuring out what a page is
supposed to look like.
Good Luck!
Mark
_______________________________________________
New York PHP Community Talk Mailing List
http://lists.nyphp.org/mailman/listinfo/talk
NYPHPCon 2006 Presentations Online
http://www.nyphpcon.com
Show Your Participation in New York PHP
http://www.nyphp.org/show_participation.php
