Web Design Tutorials and Lessons: Aligning Form Elements

Stay at Home and Learn

Web Design Tutorials

Computer Tutorials List

Aligning Form Elements

The centred form looks a little unprofessional as it is. You can align the elements on your form better by putting them into a table.

The best way to do this is by inserting a form with no form elements on it (In your HTML Editor, click Add > Add a Form, then just click OK when the dialogue box pops up.) This code will be appear in your editor:

<FORM Method = Post Name = frmOne Action = "">

</FORM>

Click in between the two Form tags, then click Add > Add a Table. Set how many rows and columns you want in your table, then click OK. In this example, we'll set the Rows to 1 and the columns to 4.

Next, add the Form elements individually with your Editor. We'll see how to do this now.

Assume the code for the Form and Table is this (with only the first row of tags showing):

</TABLE>
</FORM>

To insert a Text box individually, delete the text from the TD tag. In the code above, delete the number 2 (The text First Name is going where the 1 is.)
From the menu bar, click Add
From the drop down menu, click Add a Form Element
From the sub menu, click Text Box
A single Text Box form element tag appears in your code
The result will be this:

<TD>
<INPUT TYPE = "Text" SIZE = 20 NAME = "" VALUE = "">
</TD>

Add another text box where the number 4 is in our TD tags. Replace the number 1 with First Name and the number 3 with Surname. Your code for the first row will now be this:

<TR>
<TD>First Name: </TD>
<TD> <INPUT TYPE = "Text" SIZE = 20 NAME = "" VALUE = ""> </TD>
<TD> Surname: </TD>
<TD> <INPUT TYPE = "Text" SIZE = 20 NAME = "" VALUE = ""> </TD>
</TR>

</TABLE>
</FORM>

All the form elements you've learnt so far can be added to a table TD tag using the same method: Click Add > Add a Form Element, then click on a form element from the sub menu.

You will have noticed a few form elements in the sub menu that haven't been discussed yet. We'll go through them now.

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses