Web Start Letter - Website Tips and Info by Email Your Email:
We will never sell or give away your email address.

Internet Basics
   About the Internet
   About Web Browsers
   Why Domain Names

Getting Started
   HTML vs XHTML
   Making Webpage Files
   Naming Webpage Files

HTML Basics
   About HTML Tags
   Basic HTML Page
   DTDs and Doctype Tags
   Spaces and New Lines
   Special Characters
   Bold, Italics, More
   Writing Headlines
   Adding Links
   Making Lists
   Comments in HTML

Images and Colors
   How to Add Images
   Sources of Images
   Image File Formats
   Optimizing Images
   Color in HTML & CSS
   "Web-safe" Color Chart

More Advanced HTML
   Making Tables
   Formatting with Tables
   Making Forms
   Using Imagemaps
   Using Frames
   Meta Tags

Cascading Style Sheets
   Intro to CSS
   Ways to include CSS
   Some Useful CSS
   CSS Hover for Links

More
   Promoting Your Site
   How-To's Homepage
   Links

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.

<form action="cginame" method="get">

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

Most of the form fields share the basic format;
     <input type="seebelow" name="name_of_this_variable" value="">

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>

<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>

<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>

Return to Top