Form Processing Techniques - Mary Robinson CIS285 Instructor Page
Download
Report
Transcript Form Processing Techniques - Mary Robinson CIS285 Instructor Page
HTML FORMS
CIS 285 Winter_2005
Instructor: Mary Robinson
Robinson_CIS_285_2005
Agenda
Class #3
Forms
JavaScript
Robinson_CIS_285_2005
Objectives
Define terms related to forms
Describe the different form controls
and their uses
Use the <form> tag
Use the <input> tag
Create radio buttons
Create a text field
Create a textarea field
Robinson_CIS_285_2005
Objectives
Use the <select> tag
Use the <option> tag
Create a selection menu
Insert options into a selection menu
Create a Submit button
Create a Reset button
Robinson_CIS_285_2005
Introduction
Forms interact with Web page
visitors in a variety of ways:
Get feedback about the Web page
Find out who is visiting the Web
page
Sell products or services
Act as a guestbook
Robinson_CIS_285_2005
HTML Forms
HTML forms are enhanced HTML
documents that look like paper forms
When a user submits a form to the
Web server, the browser
Submits the value of each form element to
the Web server as a parameter
Submits the form element values in a
parameter list, containing the name of
every form element and its current value
A form can be created anywhere within
an HTML document using the form tag
Robinson_CIS_285_2005
Creating Web Page Forms
A Web page form has three
components
Input controls
FORM tag, which contains the
information necessary to process the
form
Command buttons, which a user
clicks to perform an action
Robinson_CIS_285_2005
Input Controls
An input control is a type of input
mechanism on a form
A data input control allows a user
to simply make a selection
A text input control allows the
user to enter text into the control
Robinson_CIS_285_2005
Forms – Text Input Controls
Text
Password
Text Areas
Robinson_CIS_285_2005
Text Control
Allows for a single line of input
Two attributes:
SIZE: determines the number of
characters that display on the form
MAXLENGTH: specifies the maximum
length of the input field
Robinson_CIS_285_2005
Text Code
Please give us your name:
<input name=“name1” type=“text”
size =“50” maxlength=“52” />
<br />
Robinson_CIS_285_2005
Password Control
Same as a regular text field, but
characters display as asterisks or
bullets
Holds the password entered by a visitor
Protects a visitor’s password from
being observed by others
Robinson_CIS_285_2005
Password Code
And your password:
<input name=“text1” type=“password”
size =“8” maxlength=“8” />
<br />
Robinson_CIS_285_2005
Textarea Control
Allows multiple lines of input
Two primary attributes
ROWS: specifies the number of rows in
the textarea field
COLS: specifies the number of columns
in the textarea field
Robinson_CIS_285_2005
Textarea Code
<p>Which golf accessories will you
need in the next year ?
<br />
<textarea name=“text1” rows=“6”
columns=“50” name=“accessories”>
</textarea>
<br />
</p>
Robinson_CIS_285_2005
Forms - Check Boxes
Define an element that can have
one of two opposite values, such
as true or false, or on or off
If the check box’s tag contains
the checked attribute, the check
box appears checked when the
form first appears
Robinson_CIS_285_2005
Checkbox Control
Allows users to select more than
once choice from a list of choices
Each choice in a checkbox list can
be either on or off
Checkboxes are deselected by default
Robinson_CIS_285_2005
Check Box Code
<p>Which course(s) do you like to play?
<ul> <br />
<input type= “checkbox” name=“course"
value=“kap“ />Kapalua <br />
< input type =checkbox name =“course "
value =“sta“ />St. Andrews < br />
<input type =“checkbox” name =“course "
value =“muir“ />Muirfield < br />
< input type =checkbox name =“course "
value =“lap1“ />La Paloma </ul >
Note: checked=“checked” would be in the
code if the check box was to be shown as
selected upon “retrieval” of the Web page
</ ul>
</p>
Robinson_CIS_285_2005
Check Box Syntax
type tells the browser to produce a
checkbox field
name specifies the variable where the
returned value will be stored
value stores what will be returned in the
variable when the box is checked. VALUE
can be anything you choose.
If you don't specify a VALUE, the value of
checked fields defaults to "on".
If a field is not checked, no value is
returned to the ACTION program (as
though the field did not even exist on the
form).
Robinson_CIS_285_2005
Forms - Radio Buttons
Radio Buttons allow the user to select
a single value from a group of related
values
Related radio buttons are defined as a
radio button group, which allows the
user to select only one button in the
group at a time
Each radio button in a radio button
group has the same name attribute
value
Robinson_CIS_285_2005
Radio Buttons
Limits the Web page visitor to only
one choice from a list of choices
Each choice is preceded by a radio
button, typically an open circle
Radio buttons are deselected by default
Robinson_CIS_285_2005
Radio Button Code
<p> Do you like to golf?
<input name=“golf” type=“radio”
value=”yes” />Yes
<input name=“golf” type=“radio”
value=”no” />No
Note: checked=“checked” would be in
the code if the radio button was to be
shown as selected upon “retrieval” of the
Web page
</p>
Robinson_CIS_285_2005
Forms - Selection Lists
Define a list from which the user
can select specified values
The Web developer can populate
the list using static values or from
a database
Robinson_CIS_285_2005
Creating a Form
with Selection Menus
The select control creates a
selection menu
This control only allows the
visitor to choose pre-defined
choices – user does not type
anything in the form
There are four types of selection
menus:
Robinson_CIS_285_2005
Selection Menu Types
Robinson_CIS_285_2005
Select Control – 1 Choice
Selection(s) Visible - One
<tr><td>1) Favorite color:</td> … </tr>
<tr><td> </td> <td> </td>
<td> </td> <td> </td></tr>
<tr><td><select name=“color” size=“1”>
<option
<option
<option
<option
value=“red”>Red</option>
value=“blue”>Blue</option>
value=“yellow”>Yellow</option>
value=“green”>Green</option>
</select></td></tr>
Robinson_CIS_285_2005
Select Control – 1 Choice
Selection(s) Visible - Three
<tr><td>1) Favorite color:</td> … </tr>
<tr><td> </td> <td> </td>
<td> </td> <td> </td></tr>
<tr><td><select name=“color” size=“3”>
<option
<option
<option
<option
value=“red”>Red</option>
value=“blue”>Blue</option>
value=“yellow”>Yellow</option>
value=“green”>Green</option>
</select></td></tr>
Robinson_CIS_285_2005
Select Control – Multiple Choices
Selection(s) Visible - Three
<tr><td>1) Favorite color:</td> … </tr>
<tr><td> </td> <td> </td>
<td> </td> <td> </td></tr>
<tr><td><select name=“color” size=“3”
multiple=“multiple” />
<option
<option
<option
<option
value=“red”>Red</option>
value=“blue”>Blue</option>
value=“yellow”>Yellow</option>
value=“green”>Green</option>
</select></td></tr>
Robinson_CIS_285_2005
Select Control – Multiple Choices
Selection(s) Visible - Four
<tr><td>1) Favorite color:</td> … </tr>
<tr><td> </td> <td> </td>
<td> </td> <td> </td></tr>
<tr><td><select name=“color” size=“4”
multiple=“multiple” >
<option
<option
<option
<option
value=“red”>Red</option>
value=“blue”>Blue</option>
value=“yellow”>Yellow</option>
value=“green”>Green</option>
</select></td></tr>
Robinson_CIS_285_2005
Command Buttons
A command button is a form element
that a user clicks to perform an action
A special kind of command button
called a submit button can be created
by setting the type attribute value to
submit
Robinson_CIS_285_2005
Command Buttons
When a user clicks a submit button,
the form submits the values of the
form elements as parameters to a form
processing program defined in the
form definition tag
A reset button can also be created in a
Web form
reset button: form clears all form
element values or resets them to their
initial values
To create a reset button, the input type
attribute value is set to reset
Robinson_CIS_285_2005
Reset and Submit Controls
The reset button clears any input
that was entered in the form
The submit button sends the
information to the appropriate
location for processing
Web page forms must include a
Submit button
Robinson_CIS_285_2005
Submit and Reset Code
<p><input type=“submit
value=“Submit the Form” />
<input type=“reset”
value=“Reset the Form” /></p>
Robinson_CIS_285_2005
Notes on Hidden Fields
A hidden form element is an
element that is not visible to the
user
Developers use hidden form
elements to submit data values to
the Web server that are not
currently visible on the form
Technically, hidden fields are not
meant for data input
Robinson_CIS_285_2005
Hidden Fields
General syntax:
<input type=“hidden” name=“Name
value=“value />
A use of hidden fields is to enable a
single general script to process data
from different forms – script needs to
know which form is sending the data,
and a hidden fields can provide this
info.
Drawback: Can be seen in the source
code
Robinson_CIS_285_2005
Input Controls Summary
Robinson_CIS_285_2005
Input Control Attributes:
Each input control has the
following one or two attributes
name: Identifies the specific
information that is being sent
All controls have a NAME
value: The data that is contained in
the named input control
All controls except “textarea" have a
value attribute
Robinson_CIS_285_2005
Form Attributes
name:
is required if you want form controls
processed on the client side;
otherwise, it is optional
action:
Specify the destination Web page
where the form is processed
method:
Specify how to send form to the Web
server, either “post” or “get”
Robinson_CIS_285_2005
The Form Process
<form> attributes
method: Specifies the manner in
which the form is sent to the server
The GET method sends the name-value
pairs to the end of the URL indicated in
the ACTION attribute
The POST method sends a separate
data file to the URL
This project will utilize the POST method
Robinson_CIS_285_2005
Identifying the Form Process
<form> attributes
action: specifies the action that will
be taken when the form is submitted
Information can be sent by e-mail to a
central e-mail address
Information can be sent to the Web
server for processing
Web sites can process information
from forms using Common Gateway
Interface (CGI) scripting
Robinson_CIS_285_2005
Identifying the Form Process
Determines
how data is
to be sent
Action to be
taken when
submitted
<form method=“post” action=“mailto:[email protected]”/>
Robinson_CIS_285_2005
What You Should Know
Identify the Form Process
Text Fields and Password Fields
Textarea Fields
Radio Buttons
Selection Menus
Create Submit and Reset Buttons
Robinson_CIS_285_2005