Forum Moderators: not2easy
The layout is being done, though with various cross-browser niggles, and I can redo the menus to unordered lists.
But so far, doing table-less forms has got me beat.
From googling and reading, there seems to be two main ways to do this:
-either defining numerous tags just for the form elements, or
-giving every form element its own margins/padding
So far, my results have been very messy, and seem to take up much more space than tables ever did.
And I am struggling to line up columns of elements.
Is there an easier way, or is this one thing that tables should still be used for?
<html>
<head>
<style>
.field { display:block; text-align:left; margin-bottom:10px;}
#contact {width:300px; float:left; text-align:left; padding-bottom:20px; }
</style>
</head>
<body>
<div id="contact">
<label for="Naam">Naam:</label>
<div class="field">
<input name="Naam" type="text" />
</div>
<label for="Voornaam">Voornaam:</label>
<div class="field">
<input name="Voornaam" type="text" />
</div>
<label for="Adres">Adres:</label>
<div class="field">
<input name="Adres" type="text" />
</div>
</div>
</body>
</html>
The cells on the left correspond to the cells on the right :D There's no reason why you couldn't have it in a table, but also using labels?
...
<tr>
<td><label for="name">Name</label></td>
<td><input type="text" id="name" /></td>
</tr>
...To me that sounds like the easiest and perfectly acceptable way to do it :)
I myself (if you want to fiddle with it to find what best suits your reckoning) use fieldsets (only when necessary - without more than one fieldset present I feel it's a waste of time/space/effort) with definition lists with labels.
<dl>
<dt><label for="name">Name</label></dt>
<dd><input type="text" id="name" /></dd>
</dl>... which I also like semantics-wise.
[edited by: Setek at 4:06 am (utc) on Mar. 9, 2007]
setek: interesting take. I am already using ul's for menus (both hor and vert).
But the _big_ problem is with lining up 3 or more columns of fields and label tags.
For this, CritterNYC's code seems to work well.
[edited by: DamianS at 4:15 am (utc) on Mar. 9, 2007]
Hmm... an argument semantics-wise, I don't see why they shouldn't be tables... It's tabular data, no?
I can't believe I'm going to argue this (recovering table junkie here.)
Tables are for intersecting data, columns of conditions that intersect with rows of other conditions. With a form, the labels and fields don't represent intersecting data, they represent a list of form fields with labels. :-) So semantically, a list would be more appropriate. No? :-)
IMO there's nothing that makes a form more easy to keep locked into position than a table, but that's only 'cause I'm excellent at tables. With that in mind, I submit my most recent successful attempt at a tableless form* (you will note that I did not, but should, make it work using a list!)
Some of the code may seem excessive, but I had to do what I did to get the label alignment the way I wanted - look at how the labels align right, but still perfectly aligned vertically and horizontally (from the fields.) Sorta like a column. :-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Tableless Form</title>
<style type="text/css">
/*stored externally of course*/
* { margin:0; padding:0; }
body, html {
margin:0;
padding:0;
font-family: Georgia, Book Antiqua, Palatino, Palatia, Times New Roman, Times, Serif;
}
.emph { color: #ff0000; font-weight: 700; }
/* This form is normally limited in width by another container - assigning
a width here only for this example */
#orderform {
width: 60%;
margin: auto;
padding: 6px;
border: 1px solid #DFE5FF;
}
.order-head {
background-color: #2421A6;
color: #ffffff;
font-weight: 700;
padding: 3px;
margin: 0 0 6px 0;
}
.form-row { margin: 0 0 2px 0; }
#orderform .labelcol {
width: 25%;
float: left;
text-align: right;
font-weight: 700;
white-space: nowrap;
margin-right: 12px;
}
#orderform label { font-weight: 700; }
#submit-row { text-align: center; }
#submit-row input { margin: 12px; }
</style>
<script type="text/javascript">
// ALSO stored externally
function checkForm(form) {
var requireds = new Array('fname','lname','phone','email');
var english = new Array('first name','last name','primary phone','email address');
var obj,checkThis,ind,found,msg,emailString;
msg = ''; found = false;
if (document.getElementById) {
for (i=0; i<requireds.length; i++) {
checkThis = document.getElementById(requireds[i]).value;
if (checkThis == '') {
msg = 'Please provide your ' + english[i] + ' before submitting this form.';
break;
}
}
if (msg!= '') { alert(msg); }
else { form.submit(); }
return false;
}
}
</script>
</head>
<body>
<form id="orderform" name="orderform" action="some-action.cgi">
<div class="order-head">BILLING INFORMATION</div>
<div class="form-row">
<div class="labelcol"><label for="company">Company:</label></div>
<input type="text" name="company" id="company" size="55" maxlength="150" value="">
</div>
<div class="form-row">
<div class="labelcol"><label for="fname">First Name:</label><span class="emph">*</span></div>
<input type="text" name="fname" id="fname" size="55" maxlength="100" value="">
</div>
<div class="form-row">
<div class="labelcol"><label for="lname">Last Name:</label><span class="emph">*</span></div>
<input type="text" name="lname" id="lname" size="55" maxlength="150" value="">
</div>
<div class="form-row">
<div class="labelcol"><label for="phone">Contact Phone:</label><span class="emph">*</span></div>
<input type="text" name="phone" id="phone" size="55" maxlength="150" value="">
</div>
<div id="submit-row">
<hr width="100%">
<input type="submit" onClick="return checkForm(this.form);" id="submitButton" value="Submit">
<hr width="100%">
</div>
</form>
</body>
</html>
* Shortened a bit for brevity, it's actually MUCH larger and involved select lists, price calculator, etc.
