|
 WWW Forms |
|
|
|
|
|
WWW Forms |
|
|
Forms are a web feature that allows text and data to be sent from the viewer of the page to the page's author (or some other site specified by the author).
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 because I was receiving too many e-mails that just said, "asdf.")
|
Web Page: |
Source:
|
--> The exact structure of the address in the "FORM METHOD=POST ACTION=" tag depends on how CGI 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.
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 nested one within another.
In use, the FORM tag looks like this:
<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 you.
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:
action="/cgi-bin/formmail?username@bgu.edu+Very_Simple_Form"Responses to forms are e-mailed to the specified address. The e-mail subject line is determined by the text that follows the plus-sign.
The primary tags used within forms are:
INPUT
SELECT
TEXTAREAEach time one of these is used in a form it is assigned a NAME which will be used to identify the data returned to you. This NAME is not visible onscreen - it is used solely to label your data. If you are designing a long or complicated form, you need to select NAMEs carefully so the data you receive is not confusing or difficult to interpret.
INPUT, SELECT, and TEXTAREA also 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 nothing else is specified a text input box will be created:
Web Page:
Source:
size=32
value="You can type here.">PASSWORD - This creates a special-purpose text input box that replaces typed characters with asterisks as a security measure:
Web Page:
Source:
<input type="password" name="password">
CHECKBOX - Creates clickable on/off selection boxes any number of which can be selected:
Web Page:
Source:
<input type="checkbox" name="Art"> Art <br>
<input type="checkbox" name="Science"> ScienceRADIO - Creates clickable on/off switches that only allow one choice to be selected:
Web Page:
Source:
<input type="radio" name="gender" value="Female"> Female <BR>
<input type="radio" name="gender" value="Male"> MaleCHECKED - With CHECKBOXES or RADIO buttons, this selects a default button which will be selected when the form is loaded:
Web Page:
Source:
<input type="radio" name="gender" value="female" checked> Female <br>
<input type="radio" name="gender" value="male"> MaleRESET - Creates a pushbutton that resets all form elements to their default values:
Web Page:
Source:
SUBMIT - Sends all current form data to the URL specified at the beginning of the form.
Web Page:
Source:
VALUE - With RESET and SUBMIT buttons, VALUE determines what label will appear on the button:
Web Page:
Source:
<input type="submit" value="Send">
<input type="submit" value="Blast off">
<input type="submit" value="Do it!">
<input type="submit" value="OK, here it comes...">
SELECT Attributes:
SELECT and /SELECT tags are used to create lists from which the user can select one or more items.
Between SELECT and /SELECT, you can insert as many OPTION tags as you need (there may be some upper limit to this but you don't want the list to scroll off of the screen anyway). The following creates a pull-down list:
Web Page:
Pick a card:
Source:
<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>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):
Web Page:
Pick a card:
Source:
<P>
<select name="card" size=4>
<option selected> Seven
<option> Eight
<option> Nine
<option> Ten
<option> Jack
<option> Queen
<option> King
<option> Ace
</select>
MULTIPLE - If the word MULTIPLE was added to the SELECT tag in the above example:
<select name="card" size=4 multpiple>the user could 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.
Web Page:
Source:
<textarea name="lots-o-text" rows=3 cols=30>
You can type as much
as you want here:
</textarea>The ROWS and COLS (columns) attributes in the above example determine the size of the text window.
Responses from forms:Below is a typical reply from a respondent to the The Life Form.
formmail_version=1.4
http_user_agent=Mozilla/1.1N (Macintosh; I; 68K)
server_name=www.ecn.bgu.edu
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 %0D%0Ais...%0D%0A%0D%0AMore than it's cracked up to be.%0D%0AShorter than it ought to be.%0D%0A=== begin 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 particular server that The Life Form is installed on handles form responses. This varies from one service provider to another.
Not all browsers support all form features. As with all HTML code, it is a good idea to check your pages with more than one browser to be certain that they are displaying correctly.
