Forms

TOC

Forms are a web feature that allows interactive data collection on web pages. The collected data is submitted to the web server where it is stored or otherwise acted upon by scripts or programs. Data may be filed in a database or simply sent back to the browser and the results displayed in a subsequent web page.

Forms can several standard data input methods (try these out as you look at them:)

Example, A Very Simple Form:

This simple form has only one text-input box and a send button. Its "action" attribute directs the server to supply the data to a PERL script in the site's /cgi-bin/ directory. This form specifies a common "safe" script called formmail.pl used to send a specified address the contents of the form data. (The send button is disabled to prevent me from getting many emails that just say "asdf".)

<form method="post" 
action="/cgi-bin/formmail.pl?someone@somewhere.com">
<p>Write a comment here:</p>
<input type="text" name="comment" />
<input type="submit" value="Send" />
</form>

The address in the "action=" attribute depends on how CGI scripts are configured on your server and what script you will use to process the form data. This information is usually available from your hosting provider.

HTML Tags For Forms:

The main tag that encloses the entire form is "<form>" and everything that comes between it and the closing </form> tag is considered part of the form. Though more than one form can exist in the same document, forms cannot be nessted one within another.

In use, the form tag looks like this:

< action="URL" form method="post">
(All the stuff that you put in the form goes here.) </form>

action specifies the CGI script or server page that the form data is to be transmitted to when the form's "Send" or "Submit" button is clicked. It is usually a relative URL such as "/cgi-bin/formhandler.pl" or "formhandler.php".

method tells your browser how to package the form data for transmission to the server. The options are "get" and "post".
Get allows the data to be attached to the action url after a question mark, such as "formhandler.pl?input1=data&input2=data&input3=data... etc."
Post sends the data invisibly, is more secure, and is capable of handling more data from larger forms.

The primary tags used within forms are:

• input
• select
• textarea

Each time one of the above are used in a form, it includes a unique "name" attribute will be used to identify the data associated with this input. This name is not visible, it is used soley to label the data. Choose names carefully to ensure each is unique or results will be unpredictable.

Input, select and textarea also each have their own additional attributes that allow you to customize their appearance and action within the form.

Input:

type="text"

This is the default type. If nothing else is specified a text input box will be created under HTML. Under XHTML, however, the type attribute is required, so it is best to get into the habit of including it in your markup. For text input, use type="text"

<input type="text" name="type_here"
size="32" value="You can type here." />

type="password"

Causes the text that you type in to be hidden by only displaying an asterisk "*" for each letter/number you type.

<input type="password" name="password"
value="password" />

type="checkbox"

Creates a clickable on/off selection box. In a group of checkboxes (each with a different name!) any combination of them can be selected. Note the "<br />" to stack the checkboxes vertically -- otherwise they will appear in-line. The "checked" attribute causes the input containing it to be pre-selected.

<input type="checkbox" name="art" 
value="Art" /> Art <br />
<input type="checkbox" name="science" 
value="Science" checked="checked" /> Science

type="radio"

Creates clickable on/off switches that act like old-time mechanical radio station selectors -- only one can be selected at a time. Clicking one un-clicks any other that was previously clicked. Note that for this grouping of inputs, the "name" attributes are the same. The data label will be the name text, the data will be the value text of the checked "radio" button. Again, the "checked" attribute causes the input containing it to be pre-selected.

<input type="radio" name="gender" 
value="Male" /> Male <br />
<input type="checkbox" name="gender" 
value="Female" checked="checked" /> Female

type="reset"

The reset button makes the form revert to its initial state. Not used much anymore, since most folks usually just close the window or hit the "Back" button.

<input type="reset" 
value="Reset" />

type="Submit"

Tells the browser to send the array of variables collected in the form to the processing handler specified in the "action" attribute.

<input  type="submit" 
value="Submit" />

value="..."

The value attribute of an input sets the initial contents of the data with the label specified by the input's "name" label. If the value is allowed to be changed, it is set according to the type of input. In the case of the "text" or "textarea" input types, the visitor can type in a new value. In the case of a "checkbox" or "radio", the value is set by which input is clicked. In the case of a "select" input the values are pre-programmed, but selected by which "option" in the list is chosen. The value attribute of buttons is used to label the button.

Select and Option Tags

Between <select> and </select> you can list as many <option>...</option> tags as you need. There may be some upper limit, but you don't want the list to be tediously long in any case. This creates a pull-down list:

<p>Pick a card:</p>
<select name="card">
  <option name="7" 
  selected="selected">Seven</option>
  <option name="8">Eight</option>
  <option name="9">Nine</option>
  <option name="10">Ten</option>
  <option name="jack">Jack</option>
  <option name="queen">Queen</option>
  <option name="king">King</option>
  <option name="ace">Ace</option>
</select>

size

If the size attribute is set to say, 4 for example, the list of selection options changes from a pulldown "menu" to a scrolling list, in this case with 4 of the list items visible:

<p>Pick a card:</p>
<select name="card" size="4">
  <option name="7" 
  selected="selected">Seven</option>
  <option name="8">Eight</option>
  <option name="9">Nine</option>
  <option name="10">Ten</option>
  <option name="jack">Jack</option>
  <option name="queen">Queen</option>
  <option name="king">King</option>
  <option name="ace">Ace</option>
</select>

multiple

If the multiple attribute was added to the select tag in the above example:

	<select name="card" size="4" multiple>

the user could select as many items as desired in the scrolling list of options.

Textareas

Textareas differ from text-type inputs in that they provide large scrolling areas to type in, and generally allow much more text to be collected.

<textarea name="lots_o_text" 
rows="3" cols="30">
Type a lot of text here and you 
will see the scrollbars appear 
indicating there is more room to type.
</textarea>

The rows a cols (columns) attributes determine the width and height of the texarea window, respectively.

The Life Form

Notice the embedded table in the markup to "pretty-up" the form (make all the left sides of the inputs line up for easy reading:)

<form name="life" method="post"
action="/cgi-bin/formmail.pl">
<table>
<tr>
<td>Life is:</td>
<td><input type="text" 
name="life_is" /></td>
</tr>
<tr>
<td>Life also:</td>
<td>
<input name="life_also" type="radio" /> 
is something you only go 
around once in.<br />
<input name="life_also" type="radio" /> 
is better than the alternative.<br />
<input name="life_also" type="radio" /> 
is a bitch and then you die.<br />
<input name="life_also" type="radio" /> 
is just a bowl of cherries.<br />
<input name="life_also" type="radio" /> 
been good to me so far.<br />
<input name="life_also" type="radio" /> 
is like that sometimes.<br />
</td>
</tr>
<tr>
<td>Life is not:</td>
<td>
<select name="life_is_not">
<option value="a many splendored thing">
a many splendored thing</option>
<option value="a four-letter word">
a four-letter word</option>
<option value="a useful construct">
a useful construct</option>
<option value="a nice place to visit">
a nice place to visit</option>
<option value="death">
death</option>
</select>
</td>
</tr>
<tr>
<td>Additional comments here:</td>
<td><textarea 
name="additional_thoughts_about_life" 
rows="3" cols="30">Life is...
</textarea>
</td>
</tr>
<tr>
<td>To send your responses, 
click "Send":</td>
<td><input type="submit" 
value="Send" /></td>
</tr>
<tr>
<td>If you made a mistake, 
press this button to start over:</td>
<td><input type="reset" 
value="Reset" /></td>
</tr>
</table>
</form>

Response from the Life form:

formmail_version=1.4
http_user_agent=Mozilla/1.1N(Macintosh;I;68K)
server_name=www.watersgulchdigital.com
remote_addr=143.43.128.200
remote_host=143.43.128.200

life_is=precious
life_also=like_that
life_is_not=death
additional_thoughts_about_life=Life is... 
%0D%0Amore than it's cracked up to be.%0D%0A
Shorter than it ought to be.%0D%0A

===bigin additional thoughts about life ===
Life is...
More than it's cracked up to be.
Shorter than it ought to be.
=== end additional thoughts about life ===

This is how the response would look from one server configured to handle the Life Form responses. Output varies from one server to another depending on the host configuration.

Not all browsers support all form features. As with all HTML code, you should verify look and function on all browsers you expect your site visitors to use.

<< Tables | Index | Overview of XHTML and CSS >>