Download Chapter 12

Chapter 12
Working with Forms
Principles of Web Design, 4th Edition
Objectives
•
•
•
•
•
Understand how forms work
Understand form syntax
Create input objects
Build forms within tables
Build and test a sample form
Principles of Web Design, 4th Edition
12-2
Understanding How Forms
Work
Principles of Web Design, 4th Edition
12-3
Understanding 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, 4th Edition
12-4
Principles of Web Design, 4th Edition
12-5
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, 4th Edition
12-6
Principles of Web Design, 4th Edition
12-7
Using CGI Scripts (continued)
• 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, 4th Edition
12-8
Understanding Form Syntax
Principles of Web Design, 4th Edition
12-9
Forms Syntax
• Five basic form elements are commonly
supported by the major browsers:
–
–
–
–
–
<form>
<input>
<select>
<option>
<textarea>
Principles of Web Design, 4th Edition
12-10
Forms Syntax (continued)
• HTML 4.01 introduced five new form
elements:
–
–
–
–
–
<button>
<fieldset>
<label>
<legend>
<optgroup>
Principles of Web Design, 4th Edition
12-11
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
Principles of Web Design, 4th Edition
12-12
Principles of Web Design, 4th Edition
12-13
Using the <form> element
(continued)
• The following code shows a typical <form>
element:
<form action=http://www.website.com/
cgi_bin/script.cgi method=”post”>
Principles of Web Design, 4th Edition
12-14
Creating Input Objects
Principles of Web Design, 4th Edition
12-15
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, 4th Edition
12-16
Principles of Web Design, 4th Edition
12-17
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, 4th Edition
12-18
Principles of Web Design, 4th Edition
12-19
Creating Check Boxes
• Check boxes are an on/off toggle that the
user can select
<input type="checkbox" name="species"
value="smbass"> Smallmouth Bass
Principles of Web Design, 4th Edition
12-20
Principles of Web Design, 4th Edition
12-21
Creating Radio Buttons
• Radio buttons are like check boxes, but only
one selection is allowed
<input type="radio" name="list"
value="yes" checked> Yes
Principles of Web Design, 4th Edition
12-22
Principles of Web Design, 4th Edition
12-23
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, 4th Edition
12-24
Principles of Web Design, 4th Edition
12-25
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, 4th Edition
12-26
Principles of Web Design, 4th Edition
12-27
Creating an Image for the
Submit Button
• 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, 4th Edition
12-28
Principles of Web Design, 4th Edition
12-29
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, 4th Edition
12-30
Principles of Web Design, 4th Edition
12-31
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, 4th Edition
12-32
Principles of Web Design, 4th Edition
12-33
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, 4th Edition
12-34
Principles of Web Design, 4th Edition
12-35
Using the <select> Element
(continued)
• 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, 4th Edition
12-36
Principles of Web Design, 4th Edition
12-37
Using the <select> Element
(continued)
• 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, 4th Edition
12-38
Principles of Web Design, 4th Edition
12-39
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, 4th Edition
12-40
Principles of Web Design, 4th Edition
12-41
Creating Input Groupings
• You can use the <fieldset> and <legend>
elements to create groupings of different
types of input elements
Principles of Web Design, 4th Edition
12-42
Creating Input Groupings
(continued)
<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, 4th Edition
12-43
Principles of Web Design, 4th Edition
12-44
Building Forms within Tables
Principles of Web Design, 4th Edition
12-45
Building Forms within Tables
• Placing forms within a table can enhance the
layout and legibility of the form
Principles of Web Design, 4th Edition
12-46
Principles of Web Design, 4th Edition
12-47
Principles of Web Design, 4th Edition
12-48
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 check boxes for multiple-choice
questions; for a long list of choices, use a select
list
Principles of Web Design, 4th Edition
12-49
Summary (continued)
• 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, 4th Edition
12-50