[Site map] You are here --- > Newbies Paradise > Tutorials > Unofficial > Website > XHTML / CSS > Reading a tutorial

Align your forms without tables !

	Author : Ishimaru Chiaki Creation : : on 03/10/2008 07:51:50 PM Last modification: : on 03/19/2008 09:17:26 PM Rate and comment this tutorial Print this tutorial

You are about to read a tutorial written by a member of this website. Although the author probably invested every effort to make this tutorial's content correct, we can not guarantee that the information on this page is 100% exact. Please keep this in mind when reading this tutorial. ;o)

This tutorial is a translation from Romain128's "Aligner ses formulaires sans tableaux" tutorial which is available on the French version of Newbies Paradise. I got his permission to translate it. If you find any translation or grammer error, please warn me, so I can correct them.

Hello,
Whoever wanted to create forms have faced this kind of problem at least once : The form elements get sticked to their texts while we want them to be aligned and separated from their corresponding texts. :pirate:

.
In this tutorial, we will solve this problem without using any table (these must be used only for classified data), and without using any <div> (because too many <div> kill <div>s).

Chapter Contents :

Preamble
The xHTML part
The CSS part

Preamble

If you tried to create a form, it surely looked like this :

The problem : the texts who are sticked to the form :pirate:

This effect is not very pleasant and our form looks quite destructured and botched. We'll try to get this following result with five CSS lines o_O

It's much more pleasant isn't it ?

The xHTML part

But if I don't use tables, which xHTML tags will I have to use ? o_O

In my opinion, the most appropriated xHTML tags are the famous <label> tags.

Our xHTML code will thus look like this :
Code: HTML

1
2
3

<label>Last name:</label><input type="text" /><br />
<label>First name:</label><input type="text" /><br />
<label>Age:</label><select><option>21</option></select>

But with this code, if a visitor clicks on "First name", the associated field won't be selected o_O

You're right

!
So we'll do some changes using the for attribute in the <label> tag to refer to the selected tag's ID to whom we'll add an ID attribute.
Code: HTML

1
2
3

<label for="lastname">Last name:</label><input type="text" id="lastname" /><br />
<label for="firstname">First name:</label><input type="text" id="firstname" /><br />
<label for="age">Age:</label><select id="age"><option>21</option></select>

The CSS part

Yes, there are those <label>, but this doesn't solve my problem !

That's right

, and it's for this reason that we'll use some CSS.
We'll modify our <label>'s width. For this, we'll use this code :
Code: CSS

1
2
3

label {
width:150px; /*This is just a sample width, you can modify it if you want*/
}

And here's the result :

But... there is no difference o_O

!
Yes, because our <label> are inline-type tags, we cannot modify their width

! So, we need to transform them into block tags with this code :
Code: CSS

label {
display:block; /*The tag becomes block-type*/
width:150px;
}

Now that our <label> are block-type, there is automatically a line break. By making them float on the left side, this will avoid this line break

. Here's the code :
Code: CSS

label {
display:block;
width:150px;
float:left;
}

And here's the result

Our form fields are now aligned, at last !

This method is simpler and more accessible than using tables, isn't it ? More, I kept my promise, the CSS code is only 5 lines long

. This method works for all form elements, look :

The power of CSS !

And the code which comes with

:
Code: HTML

<label for="lastname">Last name:</label><input type="text" id="lastname" /><br />
<label for="firstname">First name:</label><input type="text" id="firstname" /><br />
<label for="age">Age:</label><select id="age"><option>21</option></select><br />
<label for="gender">Gender:</label><input type="radio" name="gender" id="gender" />man<input type="radio" name="gender" />Woman<br />
<label for="ideas">Any idea for my site?</label><textarea id="ideas">Nothing, it's the most beautiful website of the world :D</textarea><br />
<label for="newsletter">Newsletter:</label><input type="radio" id="newsletter" />Receive <input type="radio" />Do not receive

When it comes to checkboxes and radio buttons, you can attribute the ID to only one of them (like in this code above), because an ID must be unique

I hope this tutorial helped you

For any translation/grammar error report => PM or comments.

Author : Ishimaru Chiaki
Rate and comment this tutorial
Print this tutorial

How-to

Community

User Menu

Search

Guestbook

Advertising

Align your forms without tables !

Preamble

The xHTML part

The CSS part