Transcript Principles of Web Design Chapter 9

Chapter 9
Working with Forms
Chapter 9
Principles of Web Design
Objectives
•
•
•
•
Understand how forms work
Understand form syntax
Build forms within tables
Build and test a sample form
Principles of Web Design 2nd Ed.
Chapter 9
2
Chapter 9
Principles of Web Design
How Forms Work
• Forms let you build interactive Web
pages that collect information from a
user and process it on the Web server
• The HTML form is the interface for the
user to enter data
• The data is processed by applications
that reside on the Web server
Principles of Web Design 2nd Ed.
Chapter 9
3
Chapter 9
Principles of Web Design
• Figure 9-1
Principles of Web Design 2nd Ed.
Chapter 9
4
Chapter 9
Principles of Web Design
Using CGI Scripts
• The Common Gateway Interface (CGI) is the
communications “bridge” between the
Internet and the server
• Using programs called scripts, CGI can
collect data sent by a user via the Hypertext
Transfer Protocol (HTTP) and transfer it to a
variety of data processing programs including
spreadsheets, databases, or other software
running on the server
Principles of Web Design 2nd Ed.
Chapter 9
5
Chapter 9
Principles of Web Design
• Figure 9-2
Principles of Web Design 2nd Ed.
Chapter 9
6
Chapter 9
Principles of Web Design
Using CGI Scripts
• The data processing software can then work
with the data and send a response back to
CGI, and then onto the user
• The user enters data via an HTML form
Principles of Web Design 2nd Ed.
Chapter 9
7
Chapter 9
Principles of Web Design
Forms Syntax
Five basic form elements are commonly
supported by the major browsers:
• <form>
• <input>
• <select>
• <option>
• <textarea>
Principles of Web Design 2nd Ed.
Chapter 9
8
Chapter 9
Principles of Web Design
Forms Syntax
HTML 4.01 introduced five new form elements:
• <button>
• <fieldset>
• <label>
• <legend>
• <optgroup>
Principles of Web Design 2nd Ed.
Chapter 9
9
Chapter 9
Principles of Web Design
Using the <form> element
The <form> element is the container for creating a
form. A variety of attributes describe how the form data
will be handled.
• Table 9-1
Principles of Web Design 2nd Ed.
Chapter 9
10
Chapter 9
Principles of Web Design
Using the <form> element
The following code shows a typical <form>
element:
<form
action=http://someserver/cgi_bin/
script.cgi method=“post”>
Principles of Web Design 2nd Ed.
Chapter 9
11
Chapter 9
Principles of Web Design
Creating Input Objects
• The <input> element defines many of the form
input object types
• The type attribute specifies the type of input
object
Principles of Web Design 2nd Ed.
Chapter 9
12
Chapter 9
Principles of Web Design
Input Element Types
• Table 9-2
Principles of Web Design 2nd Ed.
Chapter 9
13
Chapter 9
Principles of Web Design
Creating Text Boxes
The text box is the most commonly used form
element.
<input type="text" name="firstname"
size="20" maxlength="35"
value="First Name">
Principles of Web Design 2nd Ed.
Chapter 9
14
Chapter 9
Principles of Web Design
Creating Text Boxes
• Figure 9-3
Principles of Web Design 2nd Ed.
Chapter 9
15
Chapter 9
Principles of Web Design
Creating Checkboxes
Checkboxes are an on/off toggle that the user
can select.
<input type="checkbox"
name="species" value="smbass">
Smallmouth Bass
Principles of Web Design 2nd Ed.
Chapter 9
16
Chapter 9
Principles of Web Design
Creating Checkboxes
• Figure 9-4
Principles of Web Design 2nd Ed.
Chapter 9
17
Chapter 9
Principles of Web Design
Creating Radio Buttons
Radio buttons are like checkboxes, but only one
selection is allowed.
<input type="radio" name="list"
value="yes" checked> Yes
Principles of Web Design 2nd Ed.
Chapter 9
18
Chapter 9
Principles of Web Design
Creating Radio Buttons
• Figure 9-5
Principles of Web Design 2nd Ed.
Chapter 9
19
Chapter 9
Principles of Web Design
Creating Submit & Reset Buttons
The submit and reset buttons let the user
choose whether to send the form data or start
over.
<input type="submit" value="Submit
your answers">
<input type="reset" value="Clear
the form">
Principles of Web Design 2nd Ed.
Chapter 9
20
Chapter 9
Principles of Web Design
Creating Submit & Reset Buttons
• Figure 9-6
Principles of Web Design 2nd Ed.
Chapter 9
21
Chapter 9
Principles of Web Design
Creating a Custom Event Button
Custom event buttons activate a function in
some associated program or script.
Click the calculate button to total
your order:
<input type="button"
value="Calculate">
Principles of Web Design 2nd Ed.
Chapter 9
22
Chapter 9
Principles of Web Design
Creating a Custom Event Button
• Figure 9-7
Principles of Web Design 2nd Ed.
Chapter 9
23
Chapter 9
Principles of Web Design
Creating a Custom Submit Image
You can choose an image file and use it instead
of the default submit button.
<input type="image"
src="submit.gif" alt="submit
button">
Principles of Web Design 2nd Ed.
Chapter 9
24
Chapter 9
Principles of Web Design
Creating a Custom Submit Image
• Figure 9-8
Principles of Web Design 2nd Ed.
Chapter 9
25
Chapter 9
Principles of Web Design
Letting the User Submit a File
Users can select a file on their own computer
and send it to the server.
Use the browse button to select
your file:<br>
<input type="file" size="30">
Principles of Web Design 2nd Ed.
Chapter 9
26
Chapter 9
Principles of Web Design
Letting the User Submit a File
• Figure 9-9
Principles of Web Design 2nd Ed.
Chapter 9
27
Chapter 9
Principles of Web Design
Creating a Password Entry Field
The password input box works like the text
input, but the entered text is hidden by
asterisks.
password: <input type="password"
size="30">
Principles of Web Design 2nd Ed.
Chapter 9
28
Chapter 9
Principles of Web Design
Creating a Password Entry Field
• Figure 9-10
Principles of Web Design 2nd Ed.
Chapter 9
29
Chapter 9
Principles of Web Design
Using the <select> Element
The <select> element lets you create a list box
or scrollable list of selectable options.
<select name="boats">
<option>Canoe</option>
<option>Jon Boat</option>
<option>Kayak</option>
<option>Bass Boat</option>
<option>Family Boat</option>
</select>
Principles of Web Design 2nd Ed.
Chapter 9
30
Chapter 9
Principles of Web Design
Using the <select> Element
• Figure 9-11
Principles of Web Design 2nd Ed.
Chapter 9
31
Chapter 9
Principles of Web Design
Using the <select> Element
You can choose to let the user pick multiple
values from the list by adding the multiple
attribute.
<select name="snacks" multiple size="6">
<option>Potato Chips</option>
<option>Popcorn</option>
<option>Peanuts</option>
<option>Pretzels</option>
<option>Nachos</option>
<option>Pizza</option>
<option>Fries</option>
</select>
Principles of Web Design 2nd Ed.
Chapter 9
32
Chapter 9
Principles of Web Design
Using the <select> Element
• Figure 9-12
Principles of Web Design 2nd Ed.
Chapter 9
33
Chapter 9
Principles of Web Design
Using the <select> Element
You group and label sets of list options with the
<optgroup> element and label attribute.
<optgroup label="Salty Snacks">
<option>Potato Chips</option>
<option>Popcorn</option>
<option>Peanuts</option>
<option>Pretzels</option>
</optgroup>
Principles of Web Design 2nd Ed.
Chapter 9
34
Chapter 9
Principles of Web Design
Using the <select> Element
• Figure 9-13
Principles of Web Design 2nd Ed.
Chapter 9
35
Chapter 9
Principles of Web Design
Using the <textarea> Element
The <textarea> element lets you create a larger
text area for user input.
<p><b>Briefly tell us your favorite fish
story:</b><br>
<textarea name="fishstory" rows="5"
cols="30">
Enter your story here...
</textarea>
</p>
Principles of Web Design 2nd Ed.
Chapter 9
36
Chapter 9
Principles of Web Design
Using the <textarea> Element
• Figure 9-14
Principles of Web Design 2nd Ed.
Chapter 9
37
Chapter 9
Principles of Web Design
Creating Input Groupings
You can use the <fieldset> and <legend>
elements to create groupings of different types
of input elements.
Principles of Web Design 2nd Ed.
Chapter 9
38
Chapter 9
Principles of Web Design
Creating Input Groupings
<fieldset>
<legend><b>Select the species you prefer
to fish:</b></legend>
<input type="checkbox" name="species"
value="smbass"> Smallmouth Bass
<input type="checkbox" name="species"
value="lgbass"> Largemouth Bass <br>
<input type="checkbox" name="species"
value="pike"> Pike
</fieldset>
Principles of Web Design 2nd Ed.
Chapter 9
39
Chapter 9
Principles of Web Design
Using the <textarea> Element
• Figure 9-15
Principles of Web Design 2nd Ed.
Chapter 9
40
Chapter 9
Principles of Web Design
Building Forms within Tables
Placing forms within a table can enhance the
layout and legibility of the form.
Principles of Web Design 2nd Ed.
Chapter 9
41
Chapter 9
Principles of Web Design
Building Forms within Tables
• Figure 9-16
• Figure 9-17
Principles of Web Design 2nd Ed.
Chapter 9
42
Chapter 9
Principles of Web Design
Summary
• You will need to work with some type of
server-based software program to process
the data from your form
• You have a variety of form elements to
choose from when building a form. Use the
correct type of form element for the type of
data you are gathering. For example, use
checkboxes for multiple-choice questions.
For a long list of choices, use a select list.
Principles of Web Design 2nd Ed.
Chapter 9
43
Chapter 9
Principles of Web Design
Summary
• The <fieldset> and <legend> elements let
you create more visually appealing forms
that have logical groupings of input elements
with a title
• You can control the ragged look of forms by
placing them within tables to control the
alignment of input elements
Principles of Web Design 2nd Ed.
Chapter 9
44