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 form syntax Build forms within tables Build and test a sample form

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

Principles of Web Design 2nd Ed. Chapter 9 4 Principles of Web Design Chapter 9 Figure 9-1

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

Principles of Web Design 2nd Ed. Chapter 9 6 Principles of Web Design Chapter 9 Figure 9-2

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

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:

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:

Principles of Web Design 2nd Ed. Chapter 9 10 Principles of Web Design Chapter 9 Using the element The 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 11 Principles of Web Design Chapter 9 Using the element The following code shows a typical element:

Principles of Web Design 2nd Ed. Chapter 9 12 Principles of Web Design Chapter 9 Creating Input Objects The 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 13 Principles of Web Design Chapter 9 Input Element Types Table 9-2

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.

Principles of Web Design 2nd Ed. Chapter 9 15 Principles of Web Design Chapter 9 Creating Text Boxes Figure 9-3

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. Smallmouth Bass

Principles of Web Design 2nd Ed. Chapter 9 17 Principles of Web Design Chapter 9 Creating Checkboxes Figure 9-4

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. Yes

Principles of Web Design 2nd Ed. Chapter 9 19 Principles of Web Design Chapter 9 Creating Radio Buttons Figure 9-5

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.

Principles of Web Design 2nd Ed. Chapter 9 21 Principles of Web Design Chapter 9 Creating Submit & Reset Buttons Figure 9-6

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:

Principles of Web Design 2nd Ed. Chapter 9 23 Principles of Web Design Chapter 9 Creating a Custom Event Button Figure 9-7

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.

Principles of Web Design 2nd Ed. Chapter 9 25 Principles of Web Design Chapter 9 Creating a Custom Submit Image Figure 9-8

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:

Principles of Web Design 2nd Ed. Chapter 9 27 Principles of Web Design Chapter 9 Letting the User Submit a File Figure 9-9

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:

Principles of Web Design 2nd Ed. Chapter 9 29 Principles of Web Design Chapter 9 Creating a Password Entry Field Figure 9-10

Principles of Web Design 2nd Ed. Chapter 9 30 Principles of Web Design Chapter 9 Using the Element The element lets you create a list box or scrollable list of selectable options. Canoe Jon Boat Kayak Bass Boat Family Boat

Principles of Web Design 2nd Ed. Chapter 9 31 Principles of Web Design Chapter 9 Using the Element Figure 9-11

Principles of Web Design 2nd Ed. Chapter 9 32 Principles of Web Design Chapter 9 Using the Element You can choose to let the user pick multiple values from the list by adding the multiple attribute. Potato Chips Popcorn Peanuts Pretzels Nachos Pizza Fries

Principles of Web Design 2nd Ed. Chapter 9 33 Principles of Web Design Chapter 9 Using the Element Figure 9-12

Principles of Web Design 2nd Ed. Chapter 9 34 Principles of Web Design Chapter 9 Using the Element You group and label sets of list options with the element and label attribute. Potato Chips Popcorn Peanuts Pretzels

Principles of Web Design 2nd Ed. Chapter 9 35 Principles of Web Design Chapter 9 Using the Element Figure 9-13

Principles of Web Design 2nd Ed. Chapter 9 36 Principles of Web Design Chapter 9 Using the Element The element lets you create a larger text area for user input. Briefly tell us your favorite fish story: Enter your story here...

Principles of Web Design 2nd Ed. Chapter 9 37 Principles of Web Design Chapter 9 Using the Element Figure 9-14

Principles of Web Design 2nd Ed. Chapter 9 38 Principles of Web Design Chapter 9 Creating Input Groupings You can use the and elements to create groupings of different types of input elements.

Principles of Web Design 2nd Ed. Chapter 9 39 Principles of Web Design Chapter 9 Creating Input Groupings Select the species you prefer to fish: Smallmouth Bass Largemouth Bass Pike

Principles of Web Design 2nd Ed. Chapter 9 40 Principles of Web Design Chapter 9 Using the Element Figure 9-15

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.

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

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.

Principles of Web Design 2nd Ed. Chapter 9 44 Principles of Web Design Chapter 9 Summary The and 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