Transcript PPT - WebStarts

HTML
Creating Forms on a Web Page
Objectives
Discuss the process of creating a form
Distinguish between data input controls
and text input controls
Describe the different types of input –
controls
2
Identify HTML code necessary to create a
form
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
3
4
5
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
6
Input Controls
Input 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
7
Input Controls
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
8
• All controls except TEXTAREA have a VALUE
attribute
Examples of Data Input Controls
Radio button
Check box
Submit button
Reset button
Selection or drop-down menu
9
Examples of Text Input Controls
Text field
Text area
Password text field
10
Radio Control
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
11
Adding Radio Buttons
control type
field name
Field name –
must be the same
for radio buttons
12
value of field if
“Yes” is selected
value of field if
“No” is selected
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
13
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
14
Adding the
Submit and Reset Buttons
<INPUT TYPE=“submit”
VALUE=“Submit the
Form”>
<INPUT TYPE=“reset”
VALUE=“Reset the Form”>
15
Submit and Reset Buttons
control type
control type
16
text to
display on
Submit button
text to
display on
Reset button
Select Control
Creates a selection menu
Visitors select one or more choices
Visitors don’t have to type in any
information
17
Creating a Form
with Selection Menus
The SELECT control creates a selection
menu
This control only allows the visitor to
choose pre-defined choices
There are four types of selection menus
18
simple
selection menu
19
SIZE
set to 3
multiple
choice – two
choices selected
one choice
selected as
default
20
Creating Selection Controls
field
start select
name
menu
21
start
option
end
option
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
22
Adding a Text Field
field name
23
control type
Number of
characters that
display on Web page
maximum number
of characters that
can be input
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
24
Adding Textareas
start textarea
25
field name
number
of rows
number
of columns
end
textarea
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
26
Summary
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
27
Summary
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
28