Menu
Community /Pin to ProfileBookmark
@NogDogDec 17.2004 — #I am not claiming this is [i]the[/i] way to do it, but I was playing around with how to line up form elements without using tables and came up with this:
use table for forms?
Hi guys,
Seeing now that I’ve pretty much transitioned to doing complete layouts with css, I was wondering about the use of tables for displaying forms.
Are form elements and their labels considered tabular data that can be displayed using a table?
Thoughts, anyone?
Thanks!
Sign in
to post a comment8 Comments(s) ↴
0
@NogDogDec 17.2004 — #I am not claiming this is [i]the[/i] way to do it, but I was playing around with how to line up form elements without using tables and came up with this:<i>
</i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Form</title>
<style type="text/css">
label {
display: block;
float: left;
clear: left;
width: 8em;
}
p.form {
margin: 2px;
padding: 2px;
}
div.form {
margin: 1em auto;
clear: both;
background-color: silver;
border: solid navy 2px;
padding: 1em;
width: 35em;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>A Form</h1>
<div class=form>
<form id="form" action="?" method="post">
<p class=form>
<label for="field1">This is a test:</label>
<input id="field1" type="text" size=20 maxlength=40>
</p>
<p class=form>
<label for="field2">Test2:</label>
<input id="field2" type="text" size=20 maxlength=40>
</p>
<p class=form>
<label for"select">My Select List:</label>
<select id="select">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</p>
<p class=form>
<label for="area">Text Area:</label>
<textarea id="area" cols=40 rows=10>This is a test.</textarea>
</p>
</form>
</div>
</body>
</html>