HTML Form Elements

There are quite a few different form elements you can add to a form:

We'll explain them in more detail as we go along. But let's do some practical work. We'll start designing the Survey Form using the HTML Editor.

So, open your editor and create a new HTML page, any colour background you like. Click in between the two BODY tags and then do this:

Click here to see the Form Dialogue Box

The Build a Form dialogue box lets you add 5 basic form elements, and allows you to add a URL for the ACTION attribute of the FORM tag (The editor will automatically add the METHOD attribute).

If you want to add an ACTION attribute, un-tick the box "Leave it Blank", and then type in your URL (this can be an email address or a website address). Let's start by adding a couple of Text Box.

Adding a Text Box to your Form

The dialogue box is obviously asking how many text boxes do you want on your form. Our form had two of them, so enter a 2 in the text box.

If you were to click OK now, this is the code you'd get for a single text box:

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

For most form elements, the word INPUT is used to set up the element. Next, you type a space followed by the word TYPE. This tells the browser what type of form elements to draw on your page. If you want a text box, the TYPE to use is "Text". (With or without the quotes.)

Next, you add the attributes you want. The HTML Editor will add a size attribute. This is set to 20 pixels long. But you can change this value, if you want a longer text box. (Width and Height don't work for form elements.) The Editor will also add a name for your text box. The default names are "text1", "text2", "text3", etc. But you can change the names to anything you like. The name of the form elements can then be used in scripts to manipulate data from the text box.

Notice that there is no end tag for INPUT. You can add some default text to your text box by typing the text you want after the VALUE attribute.

Value = "Default Text Here"

Adding a TextArea to your Form

With your text boxes set to 2, click inside the box next to "Text Area". You'll see this:

The Height and Width values are set to 20 and 30 in the editor, but this is a bit too big for an address box. (Although Height and Width are used in the Editor, these are not added to the code.) If you were to click the OK button with just a text area added, the code would be this:

<TEXTAREA Rows =7 Cols = 30 NAME = "TextArea1">
Your Address Here
</TEXTAREA>

TextArea (all one word) doesn't use the INPUT tag. And you need an end TextArea tag as well </TEXTAREA>. After typing a space, you specify how big your Rows and Columns are going to be. These are the Height and Width from the Dialogue Box. The Height equates to Rows, and Width to Cols (not Columns). 7 Rows and 30 Cols is a nice size to use for an address text area.

Again, the Editor gives your element a default Name, which you can change.

After typing a right angle bracket ( > ) you can then type in some text to be used as a default. You don't have to add any text, if you don't want to. In which case, it would be just this:

<TEXTAREA Rows =7 Cols = 30 NAME = "TextArea1">
</TEXTAREA>

The text area above would then look like this:

In the next part we'll continue our exploration of form elements.

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

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses