The most important attributes of the form tag are action and method.
The action attribute tells the form where to pass its data. You should substitute a real file name for "SomeFile.SomeFileExtension." This file will handle the data in your form - it will need to be in a scripting language, such as CGI, ColdFusion, PHP, or ASP. If the file is local (on the same server as your form) you can enter a relative path instead of an absolute URL.
The method attribute can either be "get" or "post." If you use the "get" method, the information the user enters into the form will be passed as plain text in a query string. This query string gets passed in the URL of the form action file. A query string is generally what comes after a question mark in a URL. So, if you use the "get" method, the information the user submits will be visible in the URL query string. When using the "get" method, you may lose form data, especially if you have a lot of data to pass to the server. Using the "post" method, the information is transmitted as plain text in the http header, which is not visible to the user. There is no query string in the URL using the "post" method. Most people prefer the "post" for this reason.
Text Boxes
The simplest type of form input is the text box. This field allows the easy input of a single word or line of text and defaults to a width of 20 characters.
The tag used to create a text box looks like this:
The code above would create a text box that looks like this:
The type attribute is where you denote that it is a text box by typing the word text in the quotation marks. The name attribute is whatever you want this text box to be named. Naming form fields is useful when you later use them as variables. The next three attributes -- value, size and maxlength -- are optional. The value attribute will initially display text in the text box before someone types in it. The size attribute controls how large the text box is. It defaults to a width of 20 characters. The maxlength attribute limits the number of characters that a person can type in a textbox. This is useful, for example, for entering usernames that must be no more than 8 characters.
Password Boxes
Password boxes are very similar to text boxes. The only difference is that the characters you enter show up as asterisks. Please note: this does not mean that the information is encrypted when it is sent to the server.
In order to create a password box, use the same tag as you used for the text box, and substitute the word "password" for "text" in the type attribute. Here is an example:
The name attribute is whatever you want this text area to be named. Naming form fields is useful when you later use them as variables. The rows attribute controls how long the text area is by giving it a specified number of rows. Similarly, the cols attribute controls the width of the textareas but giving it a specified number of columns. The row and cols attributes do not limit how many characters a person can type in the text area, only how large the text area appears on the screen. Finally, if you type wrap in your textarea tag, the text the user enters will wrap automatically.
The code above would create a textarea that looks like this:
There is no value attribute in a text area. If you wish a default value to appear in the text area, you can type that text before the closing textarea tag (</textarea>).
Radio Buttons
Radio buttons should be used when the user is offered multiple options but can only select one. Here is how the code is used:
The code above would create a group of radio buttons that looks like this:
Small
Medium
Large
The type attribute is where you denote that this is a group of radio buttons. The name attribute in each group of radio buttons should be the same. The value should change. In this case the value "S" stands for Small, the value "M" stands for Medium, etc. Because these are all radio buttons with the same name, the user is forced to choose only one of the three options - Small or Medium or Large. If you want one of the radio buttons to default as checked, type checked in that tag. An important note about radio buttons: no form data is passed if they are not checked.
Checkboxes
Checkboxes should be used when the user can select more than one option. The code works like this:
<input type="checkbox" name="blue"> Blue Shoes
<input type="checkbox" name="red" checked> Red Shoes
<input type="checkbox" name="green"> Green Shoes
The code above would create a group of checkboxes that looks like this:
Blue Shoes
Red Shoes
Green Shoes
The type attribute is where you denote that this is a checkbox. The text in the name attribute is the data that is passed when a box is checked. An important note about checkboxes: no form data is passed if they are not checked. For example, if the user checks "Red Shoes" and "Green Shoes," then 'red' and 'green' get passed. There won't be any mention of blue, because it was not checked. If you want an option to default as checked, type checked in that tag.
Menus
Menus allow for a large number of choices in a small space. The code looks like this:
The code above would create a menu that looks like this:
The select name is what identifies the menu. You can specify how many rows of text you want visible at one time with the size attribute. In this example, users can only see 2 rows of text at once, but they can scroll up or down to see the entire list. This is useful for saving space on a page. By adding the word multiple in the select tag, you allow users to select multiple rows in the menu by holding down the control key when they make selections.
Each option tag has a value attribute. The value attribute is typically the same as what follows it. The text that follows the option tag is what the user will see. The value text is what you will see when the form is submitted. An important note about menus: if the option value is missing, the text is passed instead.
Submit Button
The Submit button is what is used to send the form. The tag looks like this:
<input type="submit" value="Submit Comments">
The code above would create a submit button that looks like this:
The type attribute is where you denote that this is a submit button. The value attribute specifies what that buttons says.
Reset Button
The Reset button resets the form data back to the default values. The tag looks like this:
<input type="reset" value="Clear Form">
The code above would create a reset button that looks like this:
The type attribute is where you denote that this is a reset button. The value attribute specifies what that buttons says.
Disclaimer