I am always looking for easy ways to use less tables in my markup. When designing a website I always aim for no tables but in a web application I may cheat from time to time.
Some time ago, thanks to an article on quirksmode, I began creating tableless forms. This trick was great for simple forms but I kept using tables for really complicated forms.
For example, if I needed a 2 or 3 column form I would just use a table because figured it was easier. Well, after playing with the orginal code from quirksmode I have found a simple way to create multi column forms with little to no extra effort. It just requires you to think about it ahead of time.
Let’s take a look at a simple example based on the original tableless form.
<!-- ----------
HTML
---------- -->
<form>
<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname"/><br/>
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" id="lastname"/><br/>
<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" id="emailaddress"/><br/>
</form>/* ----------
CSS
---------- */
label, input {
display: block;
float: left;
width: 150px;
margin-bottom: 10px;
}
label {
width: 110px;
text-align: right;
padding-right: 10px;
margin-top: 2px;
}
br {
clear: left;
}
That code would produce a form that looked like this:
But what if you want to do something a bit more advanced, say, like this:
We have made the form 2 columns and thrown in a select box and a textarea. Normally I would be preparing to use tables in a situation like this until a stopped and realized how easy it would be to do without tables.
The CSS hardly changes.
/* ----------
CSS
---------- */
label, input, select, textarea {
display: block;
float: left;
width: 150px;
margin-bottom: 10px;
}
label {
width: 110px;
text-align: right;
padding-right: 10px;
margin-top: 2px;
}
textarea {
height: 50px;
}
br {
clear: left;
}
All I’ve done is add the select and textarea selectors to the first definition. I also added a specific definition to make the textarea 50 pixels high.
Now the HTML doesn’t change too much either. There is just more of it, obviously.
<!-- ----------
HTML
---------- -->
<form>
<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" tabindex="1"/>
<label for="address">Address:</label>
<input type="text" name="address" id="address" tabindex="5"/><br/>
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" id="lastname" tabindex="2"/>
<label for="city">City:</label>
<input type="text" name="city" id="city" tabindex="6"/><br/>
<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" id="emailaddress" tabindex="3"/>
<label for="province">Province:</label>
<select name="province" id="province" tabindex="7">
<option value="0">--Select a Province--</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland</option>
<option value="NS">Nova Scotia</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="PQ">Quebec</option>
<option value="SK">Saskatchewan</option>
</select><br/>
<label for="comments">Comments:</label>
<textarea name="comments" id="comments" tabindex="4"></textarea>
<label for="postalcode">Postal Code:</label>
<input type="text" name="postalcode" id="postalcode" tabindex="8"/><br/>
</form>What you should notice is that the markup creates the fields from left to right. I have also added a tabindex to each field so that you can tab through them from top to bottom. So, the tabbing would start on the First Name field tab to the bottom on the left hand side fields then move tot he top of the right side fields and tab to the bottom of that column, exactly how it would if I had created the form with tables.
So in the end we have nice clean markup for our more advanced form with hardly any extra CSS and no messy tables. Enjoy!
Popularity: 19% [?]
Recent Comments