Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design...
-
Upload
jonathan-briggs -
Category
Documents
-
view
222 -
download
3
Transcript of Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design...
![Page 1: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/1.jpg)
Chapter 9
Working with Forms
![Page 2: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/2.jpg)
Principles of Web Design 2nd Ed. Chapter 9
2
Principles of Web Design Chapter 9
Objectives
• Understand how forms work
• Understand form syntax
• Build forms within tables
• Build and test a sample form
![Page 3: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/3.jpg)
Principles of Web Design 2nd Ed. Chapter 9
3
Principles of Web Design Chapter 9
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
![Page 4: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/4.jpg)
Principles of Web Design 2nd Ed. Chapter 9
4
Principles of Web Design Chapter 9
• Figure 9-1
![Page 5: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/5.jpg)
Principles of Web Design 2nd Ed. Chapter 9
5
Principles of Web Design Chapter 9
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
![Page 6: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/6.jpg)
Principles of Web Design 2nd Ed. Chapter 9
6
Principles of Web Design Chapter 9
• Figure 9-2
![Page 7: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/7.jpg)
Principles of Web Design 2nd Ed. Chapter 9
7
Principles of Web Design Chapter 9
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
![Page 8: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/8.jpg)
Principles of Web Design 2nd Ed. Chapter 9
8
Principles of Web Design Chapter 9
Forms Syntax
Five basic form elements are commonly
supported by the major browsers:• <form>• <input>• <select>• <option>• <textarea>
![Page 9: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/9.jpg)
Principles of Web Design 2nd Ed. Chapter 9
9
Principles of Web Design Chapter 9
Forms Syntax
HTML 4.01 introduced five new form elements:• <button>• <fieldset>• <label>• <legend>• <optgroup>
![Page 10: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/10.jpg)
Principles of Web Design 2nd Ed. Chapter 9
10
Principles of Web Design Chapter 9
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
![Page 11: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/11.jpg)
Principles of Web Design 2nd Ed. Chapter 9
11
Principles of Web Design Chapter 9
Using the <form> element
The following code shows a typical <form> element:
<form action=http://someserver/cgi_bin/script.cgi method=“post”>
![Page 12: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/12.jpg)
Principles of Web Design 2nd Ed. Chapter 9
12
Principles of Web Design Chapter 9
Creating Input Objects
• The <input> element defines many of the form input object types
• The type attribute specifies the type of input object
![Page 13: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/13.jpg)
Principles of Web Design 2nd Ed. Chapter 9
13
Principles of Web Design Chapter 9
Input Element Types
• Table 9-2
![Page 14: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/14.jpg)
Principles of Web Design 2nd Ed. Chapter 9
14
Principles of Web Design Chapter 9
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">
![Page 15: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/15.jpg)
Principles of Web Design 2nd Ed. Chapter 9
15
Principles of Web Design Chapter 9
Creating Text Boxes
• Figure 9-3
![Page 16: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/16.jpg)
Principles of Web Design 2nd Ed. Chapter 9
16
Principles of Web Design Chapter 9
Creating Checkboxes
Checkboxes are an on/off toggle that the user can select.
<input type="checkbox" name="species" value="smbass"> Smallmouth Bass
![Page 17: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/17.jpg)
Principles of Web Design 2nd Ed. Chapter 9
17
Principles of Web Design Chapter 9
Creating Checkboxes
• Figure 9-4
![Page 18: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/18.jpg)
Principles of Web Design 2nd Ed. Chapter 9
18
Principles of Web Design Chapter 9
Creating Radio Buttons
Radio buttons are like checkboxes, but only one selection is allowed.
<input type="radio" name="list" value="yes" checked> Yes
![Page 19: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/19.jpg)
Principles of Web Design 2nd Ed. Chapter 9
19
Principles of Web Design Chapter 9
Creating Radio Buttons
• Figure 9-5
![Page 20: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/20.jpg)
Principles of Web Design 2nd Ed. Chapter 9
20
Principles of Web Design Chapter 9
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">
![Page 21: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/21.jpg)
Principles of Web Design 2nd Ed. Chapter 9
21
Principles of Web Design Chapter 9
Creating Submit & Reset Buttons
• Figure 9-6
![Page 22: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/22.jpg)
Principles of Web Design 2nd Ed. Chapter 9
22
Principles of Web Design Chapter 9
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">
![Page 23: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/23.jpg)
Principles of Web Design 2nd Ed. Chapter 9
23
Principles of Web Design Chapter 9
Creating a Custom Event Button
• Figure 9-7
![Page 24: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/24.jpg)
Principles of Web Design 2nd Ed. Chapter 9
24
Principles of Web Design Chapter 9
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">
![Page 25: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/25.jpg)
Principles of Web Design 2nd Ed. Chapter 9
25
Principles of Web Design Chapter 9
Creating a Custom Submit Image
• Figure 9-8
![Page 26: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/26.jpg)
Principles of Web Design 2nd Ed. Chapter 9
26
Principles of Web Design Chapter 9
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">
![Page 27: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/27.jpg)
Principles of Web Design 2nd Ed. Chapter 9
27
Principles of Web Design Chapter 9
Letting the User Submit a File
• Figure 9-9
![Page 28: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/28.jpg)
Principles of Web Design 2nd Ed. Chapter 9
28
Principles of Web Design Chapter 9
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">
![Page 29: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/29.jpg)
Principles of Web Design 2nd Ed. Chapter 9
29
Principles of Web Design Chapter 9
Creating a Password Entry Field
• Figure 9-10
![Page 30: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/30.jpg)
Principles of Web Design 2nd Ed. Chapter 9
30
Principles of Web Design Chapter 9
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>
![Page 31: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/31.jpg)
Principles of Web Design 2nd Ed. Chapter 9
31
Principles of Web Design Chapter 9
Using the <select> Element
• Figure 9-11
![Page 32: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/32.jpg)
Principles of Web Design 2nd Ed. Chapter 9
32
Principles of Web Design Chapter 9
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>
![Page 33: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/33.jpg)
Principles of Web Design 2nd Ed. Chapter 9
33
Principles of Web Design Chapter 9
Using the <select> Element
• Figure 9-12
![Page 34: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/34.jpg)
Principles of Web Design 2nd Ed. Chapter 9
34
Principles of Web Design Chapter 9
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>
![Page 35: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/35.jpg)
Principles of Web Design 2nd Ed. Chapter 9
35
Principles of Web Design Chapter 9
Using the <select> Element
• Figure 9-13
![Page 36: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/36.jpg)
Principles of Web Design 2nd Ed. Chapter 9
36
Principles of Web Design Chapter 9
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>
![Page 37: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/37.jpg)
Principles of Web Design 2nd Ed. Chapter 9
37
Principles of Web Design Chapter 9
Using the <textarea> Element
• Figure 9-14
![Page 38: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/38.jpg)
Principles of Web Design 2nd Ed. Chapter 9
38
Principles of Web Design Chapter 9
Creating Input Groupings You can use the <fieldset> and <legend> elements to create groupings of different types of input elements.
![Page 39: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/39.jpg)
Principles of Web Design 2nd Ed. Chapter 9
39
Principles of Web Design Chapter 9
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>
![Page 40: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/40.jpg)
Principles of Web Design 2nd Ed. Chapter 9
40
Principles of Web Design Chapter 9
Using the <textarea> Element
• Figure 9-15
![Page 41: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/41.jpg)
Principles of Web Design 2nd Ed. Chapter 9
41
Principles of Web Design Chapter 9
Building Forms within Tables Placing forms within a table can enhance the layout and legibility of the form.
![Page 42: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/42.jpg)
Principles of Web Design 2nd Ed. Chapter 9
42
Principles of Web Design Chapter 9
Building Forms within Tables
• Figure 9-16• Figure 9-17
![Page 43: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/43.jpg)
Principles of Web Design 2nd Ed. Chapter 9
43
Principles of Web Design Chapter 9
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.
![Page 44: Chapter 9 Working with Forms. Principles of Web Design 2nd Ed. Chapter 9 2 Principles of Web Design Chapter 9 Objectives Understand how forms work Understand.](https://reader033.fdocuments.net/reader033/viewer/2022042702/56649dcf5503460f94ac38e8/html5/thumbnails/44.jpg)
Principles of Web Design 2nd Ed. Chapter 9
44
Principles of Web Design Chapter 9
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