Parts of Forms

Now you are ready to put your form together. Forms can have several different kinds of elements, or fields. The fields I put in the example are:

text boxes

text areas

check boxes

radio buttons

pop up menus and menus, and

submit and reset buttons

The following are examples of how to put each type of form field on your page. (By the way, the form elements on this page are fully functional, so you can test them out.) 

Note: The lines you copy here to put on your form page need to be pasted into your document just before the tag that looks like this:

</form>

This tag denotes the end of the form.

Text Boxes

A text box is any small line you want a visitor to fill in, such as their name or the the name of their organization. The code for a text box looks like this:

<input 

TYPE="text"
NAME="" 
VALUE="" 
SIZE=30 
MAXLENGTH=70>

You can copy the text above to create a field that looks like this:

Here's what each line of the code does and how you may modify it:

<input

This tells the browser that some information is going to be inserted.

TYPE="text"

This tells the browser what kind of field to make.

NAME="" 

This is where you specify what you want to call the information you are asking for. For example, if I want a visitor's first name, I might call this field "First Name." I named the example field above "Text Box One." The name of the field you enter must go between the quotes. Each field on your form page should have a unique name. When you get feedback sent to your email, the information you gathered will be listed according to the names you set in the NAME="" lines on your form. 

If you look back at the previous discussion on required fields, this is where the names for required fields come from.

VALUE=""

Generally, this is left blank. It is used to put information in the blank for the visitor. For example, if you want a visitor's address and you think that most of the visitors to your site will be from Tennessee, you could set VALUE to "Tennessee." The field would look like this:

It would be up to the visitor to change the information if they are from another state or country.

SIZE=30 

This specifies how many characters long a field should be. A visitor may fill in fewer or more characters, but the size of the field will remain set. The limit to the number of characters allowed in a text box is set with the next line of code.

MAXLENGTH=70>

This is where you limit the amount of text you will allow in a field. I usually allow more information than the size of the field itself. The text automatically scrolls as you enter it when you exceed the limit set by the SIZE= line.

Back to the Top

Text Areas

Another type of text box allows a visitor to enter several lines of text. For example, if you want comments or remarks sent to you from your site, you should include a text area. Here's the code:

<textarea 

NAME=""
ROWS=5 
COLS=35 
wrap=VIRTUAL>

</textarea>

You can copy the text above to create a field that looks like this:

The code is pretty straightforward. Here's what each line does:

<textarea

This is the beginning tag that specifies that what follows is a text area.

NAME=""

This is where you name the field. I named the field above "Text Area One."

ROWS=12 

Specifies the number of lines you want to show on the form. Your visitor can exceed the number set here, and the box will scroll as they type.

COLS=45 

This sets how many characters each line of the text box will show. Normally, the text box will scroll if someone types more than what is specified here; however, I discovered the next line, which I really like to add.

wrap=VIRTUAL>

This makes the text being typed into a text box wrap when the number of characters exceeds what is specified in the COLS= line above. In other words, the text will automatically start a new line when the text being entered goes outside the limit of its box.

</textarea>

This is the ending tag for the text area.

You can include lines of text in the text area if you want, by inserting what you want above the ending tag. For example, the following code will produce the following text area:

<textarea 

NAME=""
ROWS=5 
COLS=45 
wrap=VIRTUAL>

Please write your comments here:

</textarea>

<font face="Arial,Helvetica">Please write your comments here:</font>

Back to the Top

Check Boxes

Check boxes allow you to offer choices to a visitor. For example, suppose you want to know what days a volunteer using your sign up form is available. A check box has the following form:

<input 

TYPE="checkbox"
checked
NAME="" 
VALUE="">

Here's what each line does:

<input

This tells the browser that some information is going to be inserted.

TYPE="checkbox"

This tells the browser what type of field to make.

checked

This is optional, and I didn't use it here. If you include this line, the check box will be checked when a visitor opens your form page. If you don't want to have the check box already checked, leave out this line.

NAME=""

Set the name you want displayed when you get the information in your email.

VALUE="">

When a visitor checks a box, this value will be inserted next to the name of the check box when you get the information in your email.

The following code produces check boxes for each day of the week (Note: the <p> tag starts a new paragraph, and the <br> tag inserts a break):

What days are you available each week?

<p><input 

TYPE="checkbox"
NAME="sunday" 
VALUE="I am available on Sundays.">
Sunday

<br><input 

TYPE="checkbox"
NAME="monday" 
VALUE="I am available on Mondays.">
Monday

<br><input 

TYPE="checkbox"
NAME="tuesday" 
VALUE="I am available on Tuesdays.">
Tuesday

<br><input 

TYPE="checkbox"
NAME="wednesday"
VALUE="I am available on Wednesdays.">
Wednesday

<br><input 

TYPE="checkbox"
NAME="thursday" 
VALUE="I am available on Thursdays">
Thursday

<br><input 

TYPE="checkbox" 
NAME="friday" 
VALUE="I am available on Fridays">
Friday

<br><input 

TYPE="checkbox"
NAME="saturday"
VALUE="I am available on Saturdays">
Saturday

Here's what the form looks like:

What days are you available each week? 

Sunday 
Monday 
Tuesday 
Wednesday 
Thursday 
Friday 
Saturday 

I want to point out that you don't need to insert all the extra tags, such as <p> and <br> just now. Simply put in the form tags. After you save your form in your word processor, you can open the file in Composer to format what you see. I usually end up switching between the browser, Composer, and my word processor to make changes as I go and see how things look. I'll give you some more tips on formatting forms below.

Back to the Top

Radio Buttons

Radio buttons are like check boxes except that you are limited to one choice in a list of several choice. The general code for a radio button looks like this:

<input 

TYPE="radio"
checked
NAME="" 
VALUE="">

Here's is what each line of code does:

<input

This tells the browser that some information is going to be inserted.

TYPE="radio"

This tells the browser what type of field to make.

checked

This is optional, and I didn't use it here. If you include this line, the check box will be checked when a visitor opens your form page. If you don't want to have the check box already checked, leave out this line.

NAME=""

Set the name you want displayed when you get the information in your email. For a set of radio buttons, each button will have the same name.

VALUE="">

When a visitor checks a radio button, this value will be inserted next to the name of the set of radio buttons when you get the information in your email.

The following example allows a visitor check either "yes," "no," or "maybe."

  yes   no   maybe

The code for this set of radio buttons looks like this:

<input 

TYPE="radio"
NAME="choice" 
VALUE="yes">&nbsp;
yes

<input 

TYPE="radio" 
NAME="choice"
VALUE="no">&nbsp;
no

<input 

TYPE="radio" 
NAME="choice"
VALUE="maybe">&nbsp;
maybe

Notice that all the buttons have the same NAME= line. This is what keeps a visitor from choosing more that one option. 

The code "&nbsp;" means "insert a non breaking space." Again, you don't need to put those codes in just now. Composer will do it for you. I'll show you how below.

Back to the Top

Pop Up Menus and Menus

Pop up menus really are much like radio buttons in that they allow only one choice to be made from a given set of options. One difference is that you can also set a pop up menu so that a visitor can choose more that one option. The general form looks like this:

<SELECT

NAME=""
MULTIPLE
SIZE="">

<OPTION SELECTED>
Statement 1
<OPTION>
Statement 2
<OPTION>
Statement 3

</SELECT>

Here's each line explained:

<SELECT

This tells the browser to make a pop up menu.

NAME=""

Set the name you want displayed when you get the information in your email. As always, the name goes between the quotes.

MULTIPLE

This is optional. If you don't include it, visitors to your page will only be allowed one of the options on your list. If you include it, visitors can select more than one option by holding down the shift or control key while they choose with the mouse. You should make a note telling your visitors what to do if you use this on your page.

SIZE="">

This is optional. It is used to limit the number of choices visible. See the example below.

<option SELECTED>
Statement 1

For each choice that you want your visitor to see, you need to make a new option. The SELECTED part of the line is optional. What this does is select whatever option it is with. This way, if a visitor makes no choice, this option is already chosen.

The Statement part of the line should be replaced by whatever you want to include as a choice.

<option>
Statement 2

This is where you insert another option or choice.

</select>

This is the ending tag for the pop up menu.

Here's an example of a pop up menu where the first option is selected and only one choice is allowed:

Which statement best describes your computer access?

I have my own computer. I have access to a computer. I do not have access to a computer. 

Here's the code for the above menu:

Which statement best describes your computer access?<p>

<select 

name="pop up menu 1">

<option SELECTED>
I have my own computer.

<option>
I have access to a computer.

<option>
I do not have access to a computer.

</select>

Here is another menu with more options and multiple choices available:

If I had millions of dollars I'd buy (Note: hold down the control key to make more than one selection):

a new house.another car.Rhode Island.a new computer.lots of toys for my cat.

Here's the code for the above menu:

If I had millions of dollars I'd buy (Note: hold down the control
key to make more than one selection):<p>

<select 

name="pop up menu 2" 
multiple>

<option SELECTED>
a new house.

<option>another
car.

<option>Rhode Island.

<option>a new computer.

<option>lots of toys for my cat.

</select>

Here is the same menu with the options and limited to only three shown at a time:

If I had millions of dollars I'd buy (Note: hold down the control key to make more than one selection):

a new house.another car.Rhode Island.a new computer.lots of toys for my cat.

Here's the code for the above menu:
 

If I had millions of dollars I'd buy (Note: hold down the control
key to make more than one selection):<p>

<select 

name="pop up menu 3" 
multiple 
size="3">

<option SELECTED>
a new house.

<option>
another car.

<option>
Rhode Island.

<option>
a new computer.

<option>
lots of toys for my cat.

</select>

In looking at this last bit of code, I should point out that capital letters are optional when writing tags for forms and HTML in general. The only place where capitals are really important is when you are referring to a file name or an address.

Back to the Top

Submit and Reset Buttons

You're almost done! Now that you have your form the way you like it (I'll show you how to format everything on the next page), you need to put in a button so that visitors to your site can submit what they have filled in.

Here's the code for a submit button:

<input 

TYPE="submit"
NAME="Submit" 
VALUE="">

Here's each line explained:

<input

This tells the browser that some information is going to be inserted.

TYPE="submit"

This tells the browser what type of button to make.

NAME=""

Set the name you want displayed when you get the information in your email. 

VALUE="">

This displays a title on the button, and this value will be inserted next to the name when you get the information in your email.

Here is the submit button for this page:

Here's the code for it:

<input 

TYPE="submit"
NAME="Submit" 
VALUE="Here's the Survey!">

To allow a visitor to start over, a reset button may be added to a page with the following code:

<input 

TYPE="reset"
VALUE="">

And, here's each line explained:

<input

This tells the browser that some information is going to be inserted.

TYPE="reset"

This tells the browser what type of button to make.

VALUE="">

This displays a title on the button.

Here's the reset button for this page:

Here's the code for it:

<input 

TYPE="reset"
VALUE="Reset - Start Over">

Back to the Top

Formatting Your Form

Go on to the next page to see how to use Composer to format your form.

Please go on to the next topic