Forum Moderators: not2easy
I built a tableless form by using labels defined in CSS.
Now I want to put 2 TEXT FIELDS HORIZONTALLY NEXT TO EACH OTHER. How can I do it? In my case, the fields are next to each other, but the labels (words) are below each other.
Can you help me?
I built a tableless form
Q. Why?
(the way I read it, you're trying to implement a 'tabular' layout, for the form elements)
---
How can I do it?
I could make a CSS-only solution, with a whole bunch of floats and absolute positioning... but I suspect that it would be MUCH more hassle than its worth, esp when a <table> would be so easy...
However, there's a chance that a CSS guru will pop along any minute and blow my response to bits
Fingers crossed :)
Forms were the most difficult thing for me to pull off tableless. But it can be done. So let me get this right, you want to have
[label] [field] [label] field]
In one row, probably with the "left column" labels all lining up with the text-aligned right, is this correct?
The solution I've come up with is (as said! :-) ) a bit convoluted but works out perfectly. Everything lines up gracefully without fields jogging off to the right, which I used to hate about tabled forms (without styling on the text fields.)
I define a "label column" which is a div of a fixed percentage or pixel width for the leftmost labels, and let the text inputs or textareas fall in the natural flow. Each form "row" is contained by a div.
For the two-column "field rows," it gets a little more sticky. In the "form row" I put a right-floating div that contains the label and short field as a contained unit. This works out extremely well, with one caveat: you have to specify the tabindex properties so when tabbing through the form the floated fields accept focus when they are supposed to. This is really a pain in the neck to work with, but if you do your tabindexes in 100's every couple rows, it leaves you room to add updates without re-indexing all the fields. Example: rows 1-5 100, 101, 102 . . . rows 6-10, 200, 201, 202 . . . .
I've just sporked some code from one of my projects below, have a look and see if it helps you. This actual form is like . . .150 fields long. Yes I tried to convince the client to go multipage . . . .
My First Cruel Experiments in Tableless Forms [webmasterworld.com]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Tableless form</title>
<style type="text/css">
#orderform { margin: auto; width: 585px; padding: 6px; border: 1px solid #DFE5FF; }
.orderhead {
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; }
.right-field { float: right; text-align: right; margin-right: 2px; }
.long_field { width: 420px; }
.med_field { width: 145px; }
.short_field { width: 75px; }
</style>
</head>
<body>
<form id="orderform">
<!--
class formrow: holds each row.
class labelcol: defines a "left" column
class right-field: nested third "column" row
-->
<div class="orderhead">ENTER YOUR INFORMATION</div>
<div class="form-row"> <!-- a single row -->
<div class="labelcol"><label for="company">Company:</label></div>
<input type="text" class="long_field" tabindex="100"
name="company" id="company" size="55" maxlength="150" value="">
</div>
<div class="form-row"> <!-- now one with a right-floater -->
<div class="right-field">
<label for="lname">Last Name:</label>
<input type="text" tabindex="201" class="med_field"
name="lname" id="lname" size="35" maxlength="255" value="">
</div>
<div class="labelcol"><label for="fname">First Name:</label></div>
<input type="text" class="med_field" tabindex="200"
name="fname" id="fname" size="55" maxlength="100" value="">
</div>
</form>
</body>
</html>
No absolute positioning, but some absolute width assignments. :-)
