Forms

<form>

The <form> tag is required to let the browser know that this is a form. Netscape may not even show any of your form elements if this is missing. While IE may show them, the form will be useless without it.

action

where to send the form when it's done

This is usually either the URL of a cgi or asp program or else the name of javascript function that does something with the form data.

method

"get" or "post".

If you are using a program written by someone else. they will specify which one to use. It does matter.

"get"

Will send your form data in querystring format. It will append it to the action url in the format ?name1=value1&name2=value2&name3=value3 . This is commonly used by search engines.

"post"

Will send your form data as a separate message to the program or function specified in action. It will not show what the names and values were in a querystring. Hangman uses a post request because otherwise the word would have appeared in the URL, could spoil the guessing.

Of course you need to remember to close your form with a </form> tag.

Types of form fields you can use

Types of input (possible values for type):

type="text"

Set the name to something unique & descriptive, eg: name="LastName". the user won't see what name you used, so you will also have to put a name or other instructions next to the input tag.
Usually you will leave the value blank for the user to fill in. If you put something in the value field, it will be filled in.
You can optionally change the size that the input box appears on the page with size=number_of_chars. To set a maximum size for what people can enter set maxlength=most_chars_you_allow

Examples:
<input type="text" name="firstN" value="Dorothy"> first name
first name
What's your email address? <input type="text" name="email" value="" size="8" maxlength="4">
What's your email address?

type="hidden"

this one, you will need to set both the name and value for. the user doesn't see it in the browser and has no direct way to change it. Use this if the program you are calling needs information that you know and the user doesn't. If your form is being processed by a program on someone else's server, they will likely tell you to set certain hidden variables for them.

Example:
<input type="hidden" name="secretcode" value="You'll have to view source to even know I'm here!">

type="radio"

Use this when you only want them to be able to pick one choice.

• Make a separate input tag for each choice,
• give each one the same name, but a different value.
• If you want a certain answer to be marked by default, put 'checked' inside the tag.

Note: as in all these tags, the value in the tag and the text next to the choice can match but do not have to match. It is wise to make it something that you will not be confused by when you read the results. Examples:
<input type="radio" name="sample" value="a">armadillos
<input type="radio" name="sample" value="b">badgers
<input type="radio" name="sample" value="c">coyote
<input type="radio" name="sample" value="d" checked>dogs

armadillos
badgers
coyote
dogs

type="checkbox"

Use this when you want people to check all that apply. Otherwise it is just like radio.

Examples:
avocado<input type="checkbox" name="sample" value="avocado">
bacon&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="sample" value="bacon">
cream&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="sample" value="cream">
eggs&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="sample" value="eggs" >
avocado

bacon    
cream    
eggs      

type="submit"

You will usually need one of these to use a form with a cgi program.

If you set the value equal to something, that is what the face of the button will say. If value is not set it will say "Submit Query".

Name may be needed if the form has more than one submit button. Otherwise it probably isn't.

Examples:
<input type="submit" value="funny name">  
<input type="submit" name="basic">  

type="reset"

Like with a submit button, if you set a value it will show up on the button. If no value is set it defaults to "Reset".

Using a reset button clears all data that the user entered in the form and discards it.

Examples:
<input type="reset">
<input type="reset" name="evil one" value="Submit">

type="password"

this is just like a text input field, except that the user only sees *s not whatever they typed. It is hidden so that someone looking over their shoulder won't learn the password. It does not encrypt the password or make it really secure.

Examples:
<input type="password" maxlength="6" size="6" name="pin" >

<input type="password" name="userpass" >

Types of form input fields that don't use the input tag!

Textarea

To make a large scrolling box for text use textarea.

Name works just like in all the other tags.

Set size by setting the number of rows and cols.

this one needs a closing tag!! To set a default value, type it inbetween the opening and closing tags.

Examples:
<textarea name="name of text area" rows="3" cols="45" > </textarea>

<textarea name="comments" rows="8" cols="60" >Tell us about yourself: </textarea>
Tell us about yourself:

<textarea name="tiny" > </textarea>

Select

Use select to make a drop down or scrolling selection list.

• this one needs a closing </select> tag.
• Set size to the number of choices you want visible.
  • If the size is > 1 and the number of choices is > size, it will scroll
  • If the size is 1 or is not specified, you will get a dropdown box.
• Use the keyword multiple if you want them to be able to pick more than one choice. Otherwise leave it out.
• You must specify a name in the select tag in order to get your results
• If you specify a value in the option, that is the value your program will get. If you don't it will get whatever the text between the <option> tag and the </option> tag.

Examples:
<select name="choices" size="4" multiple>
<option>One of my choices</option>
<option>Choose one</option>
<option>Or choose many</option>
<option>Another choice</option>
<option>Yet another</option>
<option>still another!</option>
<option>as you like</option>
</select>

One of my choices Choose one Or choose many Another choice Yet another still another! as you like

<select name="state" size=1>
<option>Pick a state</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="ID">Idaho</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="UT">Utah</option>
<option value="WA">Washington</option>
</select>

Pick a state
Alaska
Arizona
California
Idaho
Nevada
Oregon
Utah
Washington

Return to Top