--- Forms ---
[ Previous Section | Home | Index | Test Your HTML | Related links | Next Section ]



Forms add a great amount of functionality to your webpage. They let you take information from your visitors. Among other things, forms allow your visitor to respond to your page, to send you feedback. Though the actual handling of forms falls within the realm of CGI, you still need to use HTML to put the form "elements" on your page.



Adding a Form


<FORM ACTION="http://a.web.address/script.cgi METHOD=get | post> ... </FORM>

- This is the tag for putting a form on your page. Within this tag all your form elements will go The ACTION option defines the location of the script. If you go looking out on the Web, you can find many scripts. When you get a copy of one and place it with your site, the ACTION option tells the browser where it is. The METHOD option is set depending on the function of the form. A form which gets information for you, like a search engine, uses METHOD=get, while a form which takes information from you and posts it to something like a guestbook or forum uses METHOD=post. When you go searching for scripts to use for yourself, you may find that the author of the script will tell you how to use it, METHOD and all.


Example:

<form action="http://www.http.com/HTML/scripts/forum.cgi> ... </form>



Input


<INPUT TYPE="**see explanation**" NAME="input name" SIZE=xx MAXLENTH=xx VALUE="value of input" CHECKED>

- This is the tag for putting some kind of form input "element" on your page. There are many types of input "elements" that this tag can create; all are defined by the TYPE option. One type is TYPE="CHECKBOX". This is simply a checkbox that can be clicked on to select it (checked) and clicked on again to deselect the option (unchecked). Another, but similar kind of input, is the TYPE="RADIO". This is a radio button, a circle that can be clicked on to select the option, but cannot be deselected. Typically, radio buttons come in groups of two or more, all with the same NAME, but different VALUEs. Yet another type, and one of the most common, is the text line or TYPE="TEXT". This places a rectangular area in which you can type in text. SIZE and MAXLENGTH can be used with TEXT to change the length of the box. Much like TEXT is TYPE="PASSWORD" which provides a line to type in information, but puts asterisks in instead of letters or numbers, to hide the information as in the case of a password. TYPE="TEXTAREA" also does the same thing as TEXT, but provides more than one line, more like a paragraph. It also has its own tag and options which are explained below. TYPE="BUTTON" places a button on your form. The VALUE option sets the label of the button. The last two input types of importance are TYPE="SUBMIT" and TYPE="RESET". These are the two buttons on a form that submit the information in the form and reset (clear) the form. With all elements, the NAME option provides the script with a variable name that is useful in organizing the information. NAMEs like "Name", "E- Mail" and "Comments" are very common NAMEs to use on a feedback form. SIZE and MAXLENGTH are used mainly with TEXT and PASSWORD to set the size of the box and set the limit on what someone can put in the box. The VALUE option defines what value is sent with the name of an element. It also puts some text in a text box and a label on a button. Lastly, CHECKED makes a checkbox or radio button checked by default.


Examples:

<INPUT TYPE="CHECKBOX" NAME="YesNo" VALUE="Yes?" CHECKED>
<INPUT TYPE="CHECKBOX" NAME="YesNo" VALUE="No?">
<INPUT TYPE="RADIO" NAME="YesNo" VALUE="Yes?" CHECKED>
<INPUT TYPE="RADIO" NAME="YesNo" VALUE="No?">
<INPUT TYPE="TEXT" NAME="YesNo" VALUE="Yes" SIZE=10 MAXLENGTH=25>
<INPUT TYPE="PASSWORD" NAME="YesNo" VALUE="Yes" SIZE=10>
<INPUT TYPE="BUTTON" NAME="YesNo" VALUE="Yes">




Select


<SELECT NAME="name">... </SELECT>

- This put a pull-down menu on your form. A pull down menu has many different option from which your visitor may select. All the options are defined by <OPTION> tags put between the <SELECT> tag.


<OPTION SELECTED>

- This option puts an option on your SELECT list. It needs no closing tag. The SELECTED option defines what option is selected by default.


Example:

<SELECT NAME="fruit">
<OPTION SELECTED>None, thanks!
<OPTION>Apples
<OPTION>Oranges
<OPTION>Lemons
</SELECT>




Textarea


<TEXTAREA NAME="name" ROWS=xx COLS=xx> default text </TEXTAREA>

- This puts a large paragraph-sized text box in your form. The ROWS option sets the number of rows the area has, while the COLS sets the number of columns it has.


Example:

<TEXTAREA NAME="comments" ROWS=10 COLS=30>
default text
</TEXTAREA>




[ Previous Section | Home | Index | Test Your HTML| Related links | Next Section ]