Tidying Up our HTML Form

If you have been following along building the form, your work should now look like this in the browser:

The form at the moment is not much good to anybody. The default values need to be changed and some captions added, so that people will know what the heck it is they're supposed to do.

But you should have a form on your page, and see how it easy it is to add one with your Editor. We'll tidy it up a bit. It's not difficult.

You can add some captions to the text boxes, in order to identify them. But there are no special tags needed. You just type out what you want to use as a caption before the code for the element. Like this:

First Name: <INPUT TYPE = "Text" Size = 20 Value = "" Name = text1>

Surname: <INPUT TYPE = "Text" Size = 20 Value = "" Name = text2>

To get these two text boxes on the same line, just delete the paragraph tag <P> inserted by default between the two. The text boxes on your form will then look like this:

First Name: Surname:

For the Text Area, we can change that default text. Simply delete the text "Add Comments Here" and type some text in its place, something like "Type your Address here".

The code for the Radio and Option buttons needs some work, though: Yours will be like this for the Radio buttons:

<INPUT TYPE =Radio Name =RadioOne Value ="Radio1" Checked>Value 1
<INPUT TYPE = Radio Name = RadioOne Value = "Radio2">Value 2
<INPUT TYPE = Radio Name = RadioOne Value = "Radio3">Value 3
<INPUT TYPE = Radio Name = RadioOne Value = "Radio4">Value 4
<INPUT TYPE = Radio Name = RadioOne Value = "Radio5">Value 5

You can add some text to serve as a caption in the same way you did for the text boxes - just type something before the first radio INPUT tag. You then need to change the text that people will see, those Value 1, Value 2, etc, parts. Change the Value attributes (Value = Radio1, Value = Radio2, Value = Radio3, etc) to match your new text. So your new code would be this:

Please select your Operating system:<P>
<INPUT TYPE =Radio Name =RadioOne Value =" Windows 95" Checked>Windows 95

<INPUT TYPE = Radio Name = RadioOne Value = " Windows 98"> Windows 98

<INPUT TYPE = Radio Name = RadioOne Value = " Windows ME "> Windows ME

<INPUT TYPE = Radio Name = RadioOne Value = " Windows XP "> Windows XP

<INPUT TYPE = Radio Name = RadioOne Value = " Other "> Other

For the Check boxes, make changes in the same manner as the changes you've just made to the Radio Buttons.

The Submit and Reset buttons can have their text changed, if you want.

You can make any text (like First Name or Surname) bold, or change the FONT style and colour, or centre your form in the normal manner. When you're finished, your form in a browser should look something like the one you saw in the last section. (Except your Submit button won't cause a pop up message box to appear.)

In the next part, you'll see how to align form elements by using a table.

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

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses