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