Download 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>&nbsp</td> <td>&nbsp</td>
<td>&nbsp</td> <td>&nbsp</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>&nbsp</td> <td>&nbsp</td>
<td>&nbsp</td> <td>&nbsp</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>&nbsp</td> <td>&nbsp</td>
<td>&nbsp</td> <td>&nbsp</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>&nbsp</td> <td>&nbsp</td>
<td>&nbsp</td> <td>&nbsp</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