Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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