Forms

An Introduction To Forms
Introduced in HTML 2.0, forms are one of the easiest ways to input information. The information collected from a form can be emailed, displayed, posted, or even analyzed. Adding forms to your web page is the first step in making a truly interactive site.

But you should know that HTML elements can only define the presentation of the form, it takes scripts to activate the form. In order for the information in the form to be processed, you need to know about Perl and CGI, and/or PHP, which is beyond the realm of these tutorials.

Form Elements
Forms are made up of several elements. To begin a form, you would use the <form> tag, and you would close the form with the </form> tag.

The most common elements found within a form tag are:
<input> : A basic input field.
<select> : Gives the user a selection of alternatives to choose from.
<option> : Specifies each individual alternative found within the select tag.
<textarea> : An input field with multiple lines.

Each element should have a name attribute to identify it. The name attribute will be used when sending the data.

Here is an example of a basic form:

<form method="post" action="http://www.domain.com/cgi-bin/mycgi.cgi">
Name: <input name="name" size="25"><br>
E-mail: <input name="email" size="25"><br>
I like:
<select name="choice">
<option>pie</option>
<option>chap stick</option>
<option selected>Super Hero Man action figure with the kung fu grip</option>
<option>my mom</option>
<option>rain</option>
<option>nothing. I'm hateful.</option>
<option>soy milk</option>
</select><br>
Comments:<br>
<textarea name="comments" rows="8" cols="20"></textarea>
<br>
<input type="submit"><br><input type="reset">
</form>

<form...> This begins the form
method="post" This is the most common method. The other is "get".
action="http://www.domain.com/cgi-bin/mycgi.cgi" You set the action attribute to whatever the address of your form activating script is. You can also set the action to "mailto:you@email.com"
<input...> The input tag will make a single line, basic input field. Input does not need to have a closing tag.
name="name" You use the name attribute to identify the piece of information.
size="25" You can set the size of the input field to be whatever you like.
<select...> This will give your viewer multiple choices to choose from.
<option> This identifies an individual option in the select field. You don't have to close it with a </option>, but you should. In this example I have not.
<option selected> When you set the "selected" attribute in an option field, that option will be the one automatically selected.
</select> Select must have a closing tag.
<textarea...> This tag is an input field with multiple lines.
rows="8" cols="20" You can specify how big and wide you want the textarea to be. Cols = columns.
</textarea> Textarea must have a closing tag.
<input type="submit"> This will make a button that the user can press to process the form.
<input type="reset"> This will make a button that the user can press to reset the form.
</form> With this you will close the form.

That above code would make this:

The <form> Tag
All form tags must have a closing tag. Common attributes for the form tag are:
action: Specifies where the form will be processed. You can set the action to the URL of a cgi script by typing something like action="http://www.domain.com/myscript.cgi", or you could have the data be sent to an email address by typeing action="mailto:you@email.com"
method: This can be get, or post. You will usually always use post. You might use get to submit the results to a URL header instead. Unless told otherwise, you should stick with post.
name: You can use this attribute for scripting purposes.

Form Tag Example:

<form method="post" action="mailto:jenni@jaydemail.com">
[the rest of your form would go here]
</form>

The <input> Tag
Unlike the &lt;form&gt; tag, you won't need to close the input tag.

The basic input tag makes this:
(The code for this was simply <input>)

But, you will rarely just type <input> to make an input field. There are many attributes that go along with it.

Additional attributes include:
name=".....": This gives the information a name. This attribute is usually required. Example: name="email"
size=".....": With this attribute you can specify how long you want the box to be. Example: size="24"
type=".....": This defines what type of input it is, we will get to the different types here in a moment. Example: type="checkbox"
maxlength=".....": For standard input areas, you can specify a maximum amount of characters that can be inputted. Example: maxlength="30" (means that no more then 30 letters, spaces, and other characters may be typed.)
checked: Used with radio buttons and checkboxes. If you want your checkbox or radio button to be checked, you type: checked="checked", or simply "checked" in the input tag.
disabled: By placing this value in the input tag, you will completely disable the box, and the user cannot alter the information inside. Example: <input value="name here" name="name" disabled> Which will make this:
readonly: Much like disabled, the user can only read the information contained on the box. Not alter it. Example: <input value="can't alter me" readonly>, which will make:
value=".....": with this attribute, you can specify what is said inside the input area. Example: <input value="place name here"> which will make:

Different Types Of Input
The input tag usually always has an attribute called type. The different types are:

text

HTML: <input type="text" value="text here" name="textsection"> (This is just a standard text input field. It requires the name and value attributes.)

checkbox
Check me!
HTML: <input type="checkbox" checked>Check me! (Note: this tag requires a value and name attribute)

radio
Click Me.
HTML: <input type="radio" value="clickme" name="click">Click Me. (Note: this tag requires a value and name attribute. Make sure that each individual set of radio buttons have the same name.)

password

HTML: <input type="password">

button

HTML: <input type="button" value="this is a button type">

reset

HTML: <input type="reset"> (This will make a button that will reset the form when clicked.)

submit

HTML: <input type="submit"> (This will make a button that will submit the form. You can change what the submit button says using the value attribute, example: <input type="submit" value="click here"> which will make this:
Note that you can do this on the reset type also.)

hidden
HTML: <input type="hidden"> The user cannot see this field, but the information will still be sent. Usually, you use the value attribute along with it to specify what the information is.

image
Join Newsletter

HTML: Join Newsletter<br> <input value="you@email.com"> <input type="image" src="parts/submit.gif" border="0" align="top"> ( You can use this to change the standard submit button to your own personal graphic. )

The <select> and <option> Tag

<select name="rateme">
<option>5 (best)</option>
<option>4</option>
<option>3</option>
<option>2</option>
<option>1 (worst)</option>
</select>

<select...> This will start the pick menu
name="rateme" This will give the entire query a name
<option> This will specify one of the options in the select tag.
</option> Closes the option. </select> The required closing tag.

The above code will make a drop down menu like so:
5 (best) 4 3 2 1 (worst)

You could also assign attributes to alter the menu.
multiple assigning this attribute to the <select> tag will allow the user to chose multiple possibilities when they hold down the shift key or drag the mouse, example: <select MULTIPLE>
size="......" This attribute in the select tag will specify the height, example: <select size="3" MULTIPLE>

Doing this to the above menu would make it look like this:
5 (best) 4 3 2 1 (worst)

disabled placing this attribute in the <select> tag will disable it.
name="......" This attribute should be used the <select> tag, to identify the information being sent.
selected Placing this attribute in the <option> tag will determine which item is selected by default.
value Using this attribute in the option tag will determine the value that will be returned if that option is selected.

The <textarea> Tag
The textarea is used for longer lines of text and information.

The basic <textarea> tag will make this:

It requires an ending </textarea> tag.

Unlike the input and option tags, you can't simply place a value attribute in the textarea tag to make default information appear in the box. You must do this instead:

<textarea>Default text here</textarea>

Which will make this:
Default text here

Textarea attributes include:
cols="....." use this attribute to specify the size going across.
rows="....." use this attribute to specify the size going down.
wrap="....." this specifies the type of text wrap. It can be: off, virtual, or physical. off is the default setting, lines are sent exactly as typed. virtual displays word wraps, but long lines are sent as one line without new-lines. physical displays word-wraps, text is transmitted at all wrap points. name="....." This attribute should always be used. It will specify the name of information.
disabled / readonly These attributes will disable the textarea.

Putting It All Together

<form method="post" action="mailto:jenni@jaydemail.com">
<b>Send me Comments?</b><br><br>
<input type="text" name="name" value="name?"><br>
<input type="text" name="email" value="you@email.com?"><br>
<input type="text" name="url" value="http://?"><br>
Favorite Fruit <small>( check all that apply )</small><br>
<input type="checkbox" name="fruit" value="ap" checked>apples<br>
<input type="checkbox" name="fruit" value="ba">bananas<br>
<input type="checkbox" name="fruit" value="ch" checked>cherry<br>
<input type="checkbox" name="fruit" value="ot">other<br>
Please rate me <small>( 5=best, 1=worst)</small><br>
<input type="radio" name="rate" value="5" checked>5<br>
<input type="radio" name="rate" value="4">4<br>
<input type="radio" name="rate" value="3">3<br>
<input type="radio" name="rate" value="2">2<br>
<input type="radio" name="rate" value="1">1<br>
Please rate this form <small>( 5=best, 1=worst)</small><br>
<input type="radio" name="formrate" value="5" checked>5<br>
<input type="radio" name="formrate" value="4">4<br>
<input type="radio" name="formrate" value="3">3<br>
<input type="radio" name="formrate" value="2">2<br>
<input type="radio" name="formrate" value="1">1<br>
Please select mood:<br>
<select size="4" name="mood">
<option value="happy">Happy</option>
<option value="sad">Sad</option>
<option value="tired">Tired</option>
<option value="lazy">Lazy</option>
<option value="excited">Excited</option>
<option value="evil">Evil</option>
</select>
<br>
More to say?<br>
<textarea name="comments">Please type additional comments here.</textarea><br>
<input type="submit" value="ready?"> <input type="reset" value="not really...">
</form>

action="mailto:jenni@jaydemail.com" I've set this form to be emailed to me.
<h3>Send me Comments</h3> You're not limited to form related tags within a form area.
name="fruit" notice that I gave the same name to each checkbox.
name="rate" / name="formrate" In the radio button sections I gave them the same names.
<select size="4"> I set the pick list to be a size of 4, so it will display 4 options at the same time.

The code above will make this:

Mailto Forms
It's not entirely reliable, but there is a way to make a form that doesn't require any CGI/Perl related scripts. It doesn't work in all browsers, and if you ever want to make a commercial site, you should avoid this.

<form action="mailto:jenni@jaydemail.com" method="post" enctype="text/plain">
</form>

In between the <form> and </form> tags you should put your input fields, etc.
For example, this:

<form action="mailto:jenni@jaydemail.com" method="post" enctype="text/plain">
<input type="text" name="name" value="name?"><br>
<input type="text" name="email" value="you@email.com?"><br>
<input type="text" name="url" value="http://?"><br>
More to say?<br>
<textarea name="comments">Please type additional comments here.</textarea><br>
<input type="submit" value="ready?"> <input type="reset" value="not really...">
</form>

Will make this:

Main?