Webwork
/
HTML Forms

Forms are a web feature that allows text and data to be sent from the viewer of the page to the page's server.

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

Text boxes:

Password boxes:

Scrolling text windows:

Checkboxes:

You can check
as many of
these as
you want.

Radio buttons:

You can only
select one
of these.

Scrolling input menus:

"Pull-down" input menus:

In addition, forms usually have a button to reset all inputs
(in case an error is made filling out the form):

And a button to send the data to the selected address:

Example, A Very Simple Form:

This simple form has only one text-input box and a send button. (The send button is disabled.)

Source:
<form method=post action=
"/cgi-bin/formmail?someone@ somewhere.com>

<p>Write a comment here:</p>
<p><input name="comment"</p>
<p><input type="submit" 
value="send"</p>
</form>

Web page:

Write a comment here:

The exact structure of the address in the "FORM METHOD=POST ACTION=" tag depends on how scripts are configured on your server. Check with your service provider to determine what format to use to have the form response sent to the right place.

The HTML Form Element:

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 nested one within another.

In use, the <form> tag looks like this:

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

method= tells your browser which protocol to use to transfer the data from the form to the server.

action= is where the URL/address to which the form responses will be sent is specified. This will vary depending on your service provider. On the system where this web page originates, the URL would look like this:

Source:
action="/cgi-bin/formmail?someone@somewhere.com+Form_Name"

Responses to forms are handled according to server scripts. They can be e-mailed to you or someone else, added to databases, etc.

The primary tags used within forms are:

Each occurrence of one of these in a form is assigned a name= which will be used to identify the data returned. This name is not visible onscreen—it is used to label the data. If you are designing a long or complicated form, select names carefully so the resulting data is not confusing or difficult to interpret.

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

Input Attributes:

Text

This the default option—if an input type is not specified a text input box will be created:

Source:
<input
type="text"
name="viewer_name"
size="32"
value="Type your name here.">
Web page:

In above, size= specifies the size of the input box in number of characters and value= indicates what text will appear pre-loaded in the text box.

Password

This creates a special-purpose text input box that replaces typed characters with asterisks as a security measure:

Source:
<input
type="password"
name="password">
Web page:

Checkbox

Creates clickable on/off selection boxes any number of which can be selected:

Source:
<input
type="checkbox"
name="Art"> Art <br>
<input type="checkbox"
name="Science"> Science
Web page:
Art
Science

Radio Button

Creates clickable on/off switches that only allow one choice to be selected:

Source:
<input
type="radio"
name="time"
value="Day"> Day <br>
<input type="radio" name="time" value="Night"> Night
Web page:
Day
Night

Checked

With checkboxes or radio buttons, this selects a default button which will be pre-selected when the form is loaded:
Source:
<input
type="radio" name="time"
value="day" checked> Day <br>
<input type="radio" name="time" value="night"> Night
Web page:
Day
Night

Reset

Creates a button that resets all form elements to their original values:

Source:
<input type="reset" value="Reset">
Web page:

Submit

Sends all current form data to the URL specified at the beginning of the form.

Source:
<input type="submit" value="Send">
Web page:

Value

With RESET and SUBMIT buttons, VALUE determines what text will appear on the button:

Source:
<input type="submit" value="Submit">
<input type="submit" value="Send">
<input type="submit" value="Blast off">
<input type="submit" value="Do it!">
<input type="submit" value="Sign me up">
Web page:





Select Attributes:

<select></select> tags are used to create lists from which the user can select one or more options.

Between <select> and </select>, you can insert as many option tags as you need. The following creates a pull-down list:

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

Pick a card:

 
Size

In the above example, if the first line was changed to SIZE=4, the selection options would change from a pull-down to a scrolling list (with four of the list items visible):

Source:
<p>Pick a card:</p>
<select name="card" size="4">
<option selected> Seven
<option> Eight
<option> Nine
<option> Ten
<option> Jack
<option> Queen
<option> King
<option> Ace
</select>
Web page:

Pick a card:

Multiple

If the attribute multiple is added to the select tag, the user can make multiple selections from the scrolling list of options.:

Source:
<p>Control-click (Windows) or command-click (Mac) to pick as many cards as you want:</p>
<select name="card" size="4" multiple="multiple">
<option selected> Seven
<option> Eight
<option> Nine
<option> Ten
<option> Jack
<option> Queen
<option> King
<option> Ace
</select>
Web page:

Control-click (Windows) or command-click (Mac) to pick as many cards as you want:

Textarea Attributes:

<textarea> and </textarea> tags establish text input windows with scrollbars that will accept an unlimited amount of text.

Source:
<textarea name="lots-o-text" rows="7" cols="30">
You can type as much
as you want here:
</textarea>
Web page:

The rows attribute in the above example determines the height of the textarea box in number of vertical rows of text.

The cols (columns) attribute determines the width of the textarea box in number of horizontal characters.

If the user continues typing beyond the capacity of the textarea, scrollbars will appear so more text can be input.

Example of a completed form that uses most of the above attributes and has a bit of style applied

Source:
<form style="background: #def url('bg_gradient.jpg') repeat-x top right;
padding: 20px;" method="post" action="http://re-vision.com/webwork/p34forms/webformmailer.php">
<input type="hidden" name="subject" value="The Life Form" />
<input type="hidden" name="redirect" value="/webwork/p34forms/thankyou.html" />

<div style="border-top: #567 solid 1px; border-bottom: #567 solid 1px; padding: 5px 0 5px 0; margin: 0 0 20px 0; font: normal 14px/14px 'trebuchet ms', sans-serif; color: #fff; ">The Life Form</div>

<p>Life is:
<select name="life_is" style="background: #579; border: #fff solid 1px; ; color: #fff">
<option selected>short.
<option>hard.
<option>precious.
<option>sweet.
<option>a beach.
</select></p>

<p>Life also:</p>
<dl>
<dd><input type="radio" name="life_also" value="go_around_once" checked>
is something you only go around once in.<br />
<dd><input type="radio" name="life_also" value="better_alternative"> is
better than the alternative.<br />
<dd><input type="radio" name="life_also" value="is_bitch_die"> is a bitch
and then you die.<br />
<dd><input type="radio" name="life_also" value="is_cherries"> is just a
bowl of cherries.<br />
<dd><input type="radio" name="life_also" value="has_been_good"> has been
good to me so far.<br />
</dl></input><p>

<p>Life is not:</p>
<dl>
<dd><input type="checkbox" name="life_is_not" value="splendored_thing"> a
many splendored thing.<br />
<dd><input type="checkbox" name="life_is_not" value="four-letter_word"> a
four-letter word.<br />
<dd><input type="checkbox" name="life_is_not" value="useful_construct"> a
useful construct.<br />
<dd><input type="checkbox" name="life_is_not" value="nice_place"> a nice
place to visit.<br />
<dd><input type="checkbox" name="life_is_not" value="death"> death.<br />
</dl></input><p>

<p>Add additional comments here:</p>
<textarea style="background: #9ab; border: #fff solid 1px; color: #fff; " name="Additional thoughts about life:" rows=3 cols=30>Life is...
</textarea><p>

<p>To send your response, click this button: <input style="background: #9ab; color: #fff; border: #fff solid 1px; " type="submit" value="Send"></p>

<p>If you made a mistake, click this button to start over: <input style="background: #fff; border: #567 solid 1px; " type="reset" value="Reset"></p>

<input type="hidden" name="form_order" value="default"/>
<input type="hidden" name="form_delivery" value="hourly_digest"/>
<input type="hidden" name="form_format" value="text"/>

</form>
Web page:

Responses from Forms:

Below is a typical e-mail reply from a respondent to The Life Form:

life_is: sweet.
life_also: has_been_good
life_is_not: death
Additional_thoughts_about_life:: Life is rich and full and brief.

This is how the particular server that The Life Form is installed on handles form responses. This varies from one service provider and one configuration to another.

Some Form Scripts to try on your server:

Simple Form

Download:
zip-icon

Info: http://www.html-form-guide.com/email-form/php-form-to-email.html

Formmail

Download:
zip-icon

Info: http://www.html-form-guide.com/email-form/php-form-to-email.html

Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma