chapter 9 working with forms. principles of web design 2nd ed. chapter 9 2 principles of web design...

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


3


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


4


• Figure 9-1


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


6


• Figure 9-2


7


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


8


Forms Syntax

Five basic form elements are commonly

supported by the major browsers:• <form>• <input>• <select>• <option>• <textarea>


9


Forms Syntax

HTML 4.01 introduced five new form elements:• <button>• <fieldset>• <label>• <legend>• <optgroup>


10


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


11


Using the <form> element

The following code shows a typical <form> element:

<form action=http://someserver/cgi_bin/script.cgi method=“post”>


12


Creating Input Objects

• The <input> element defines many of the form input object types

• The type attribute specifies the type of input object


13


Input Element Types

• Table 9-2


14


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">


15


Creating Text Boxes

• Figure 9-3


16


Creating Checkboxes

Checkboxes are an on/off toggle that the user can select.

<input type="checkbox" name="species" value="smbass"> Smallmouth Bass


17


Creating Checkboxes

• Figure 9-4


18


Creating Radio Buttons

Radio buttons are like checkboxes, but only one selection is allowed.

<input type="radio" name="list" value="yes" checked> Yes


19


Creating Radio Buttons

• Figure 9-5


20


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">


21


Creating Submit & Reset Buttons

• Figure 9-6


22


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">


23


Creating a Custom Event Button

• Figure 9-7


24


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">


25


Creating a Custom Submit Image

• Figure 9-8


26


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">


27


Letting the User Submit a File

• Figure 9-9


28


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">


29


Creating a Password Entry Field

• Figure 9-10


30


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>


31


Using the <select> Element

• Figure 9-11


32


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>


33



• Figure 9-12


34


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>


35



• Figure 9-13


36


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>


37


Using the <textarea> Element

• Figure 9-14


38


Creating Input Groupings You can use the <fieldset> and <legend> elements to create groupings of different types of input elements.


39


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>


40


Using the <textarea> Element

• Figure 9-15


41


Building Forms within Tables Placing forms within a table can enhance the layout and legibility of the form.


42


Building Forms within Tables

• Figure 9-16• Figure 9-17


43


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.


44


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

chapter 9 working with forms. principles of web design 2nd ed. chapter 9 2 principles of web design...

Documents

web server slide

interactive web pages

forms slide

html form slide

sample form slide

form data

smallmouth bass slide

used form element