Re-vision - Photography and Graphics by J. Boersma - Webwork HTML Tutorial

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):

Example, A Very Simple Form:

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

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:

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:

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:

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:

Checkbox

Radio Button

Checked

Reset

Submit

Value

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

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:

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):

Multiple

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

Textarea Attributes:

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

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:

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.