299: CPT Web Page Design
Forms
Forms
Used to collect information from user Use CGI (Common Gateway Interface) scripts to process form data
CGI scripts
Programs that run the Web server and process data collected from the Web browser allow for web pages to be more interactive can be written using many programming languages including:
Perl C/C++ Visual Basic
Form Elements
Input boxes - used for text and numerical entries Radio buttons - used to select a single option from a list Selection lists - used for long lists of options Check boxes - used to specify an item as either being present or absent Text areas - used for extended entries that might include several lines Submit & Reset buttons - used to either submit the form or clear it
The <form> tag
Identifies the beginning and end of a form can not be nested Properties include:
NAME - used if there will be multiple forms on a page ACTION - tells the form what CGI script to use to process the form METHOD - controls how your web browser sends data to the server ENCTYPE - specifies the format of the data when it is transferred from the web page to the CGI script
The <form> tag
<form NAME=form_name ACTION=URL METHOD=type ENCTYPE=data_format> Form element and layout tags </form> mailto ACTION will mail the data from the form to the specified email address ACTION=mailto:[e-mail]
Input boxes
<input TYPE=type NAME=text VALUE=value SIZE=value MAXLENGTH=value> TYPE - the type of input you want box to handle or present itself as - BUTTON, CHECKBOX, HIDDEN,
PASSWORD, RADIO, RESET, SUBMIT, TEXT, or TEXTAREA (TEXT is the default)
NAME - the field name VALUE - the default value that will appear in the field SIZE - the size of the box in characters MAXLENGTH - maximum number of characters that the user can enter into the field
Input boxes
<input TYPE=text NAME=country VALUE=USA SIZE=20 MAXLENGTH=20> Creates an input box with the name country, a default value of USA, a size of 20 characters a and maximum length of 20 characters If you set TYPE=password, the characters displayed in the input box will appear as asterisks(****). They are not encrypted or secure, however.
Selection Lists
Should be used when there is a fixed set of possible responses Can be used to select one or more choices
<select NAME=name SIZE=size MULTIPLE> <option>Option 1 <option>Option 2 </select>
Selection Lists
SIZE property is used to specify the number of options that will be displayed
Selection Lists
MULTIPLE property allows users to make multiple selections Has no value avoid using MULTIPLE property, many users do not know how to select more than one item from a list
Radio Buttons
Display a list of choices from which the user makes a selection Only one option can be selected <input TYPE=radio NAME=degree VALUE=AS> A.S.<br> <input TYPE=radio NAME=degree VALUE=BS> B.S.<br> The <input> tag does not creat any text for the button, so the text must be added after it
Check boxes
Used most often for on/off input questions <input TYPE=checkbox NAME=system VALUE=Win95 CHECKED>Win95<br> <input TYPE=checkbox NAME=system VALUE=Win3.1>Win3...