Upload
marybeth-harrington
View
219
Download
0
Tags:
Embed Size (px)
Citation preview
Robinson_CIS_285_2005
HTML FORMS
CIS 285 Winter_2005Instructor: 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 value=“red”>Red</option> <option value=“blue”>Blue</option> <option value=“yellow”>Yellow</option> <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 value=“red”>Red</option> <option value=“blue”>Blue</option> <option value=“yellow”>Yellow</option> <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 value=“red”>Red</option> <option value=“blue”>Blue</option> <option value=“yellow”>Yellow</option> <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 value=“red”>Red</option> <option value=“blue”>Blue</option> <option value=“yellow”>Yellow</option> <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
<form method=“post” action=“mailto:[email protected]”/>
Determines how data is to be sent
Action to be taken when submitted
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