Post on 06-Jan-2018
description
transcript
2
ObjectivesDiscuss the process of creating a form
Distinguish between data input controls and text input controls
Describe the different types of input –controls
Identify HTML code necessary to create a form
3
Creating Web Page Forms
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
4
5
6
Creating Web Page Forms
A Web page form has three components
1. Input controls
2. <FORM> tag, which contains the information necessary to process the form
3. Submit button, which sends the data to be processed
7
Input ControlsInput Control -- a type of input
mechanism on a form
Data Input Control—allows user to simply make a selection
Text Input Control -- allows user to enter text into the control
8
Input ControlsEach 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
9
Examples of Data Input ControlsRadio button
Check box
Submit button
Reset button
Selection or drop-down menu
10
Examples of Text Input ControlsText field
Text area
Password text field
11
Radio ControlLimits 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
12
Adding Radio Buttons
field name
control typevalue of field if
“Yes” is selected
Field name –must be the samefor radio buttons
value of field if“No” is selected
13
Checkbox ControlAllows 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
14
Reset and Submit Controls
Reset button--clears any input that was entered in the form
Submit button--sends the information to the appropriate location for processing
– Web page forms must include a Submit button
15
Adding the Submit and Reset Buttons
<INPUT TYPE=“submit” VALUE=“Submit the Form”>
<INPUT TYPE=“reset” VALUE=“Reset the Form”>
16
Submit and Reset Buttons
control type
text todisplay on
Submit button
control type text todisplay on
Reset button
17
Select ControlCreates a selection menu
Visitors select one or more choices
Visitors don’t have to type in any information
18
Creating a Form with Selection MenusThe SELECT control creates a selection
menu
This control only allows the visitor to choose pre-defined choices
There are four types of selection menus
19
simpleselection menu SIZE
set to 3 multiplechoice – two
choices selectedone choiceselected as
default
20
21
Creating Selection Controls
start selectmenu
fieldname
startoption
endoption
22
Text ControlAllows 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
23
Adding a Text Field
control typefield name
Number ofcharacters that
display on Web pagemaximum numberof characters that
can be input
24
Textarea ControlAllows 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
25
Adding Textareas
start textarea field namenumberof rows
numberof columns
endtextarea
26
Password ControlSame 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
27
SummaryDefine terms related to formsDescribe the different form controls
and their usesUse the <FORM> tagUse the <INPUT> tagCreate radio buttonsCreate a text fieldCreate a textarea field
28
SummaryUse the <SELECT> tagUse the <OPTION> tagCreate a selection menuInsert options into a selection menuCreate a Submit buttonCreate a Reset button