chapter 12 working with forms principles of web design, 4 th edition

50
Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Upload: nasir-flasher

Post on 01-Apr-2015

219 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Chapter 12

Working with Forms

Principles of Web Design, 4th Edition

Page 2: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-2

Objectives

• Understand how forms work

• Understand form syntax

• Create input objects

• Build forms within tables

• Build and test a sample form

Page 3: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-3

Understanding How Forms Work

Page 4: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-4

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

Page 5: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-5

Page 6: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-6

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 7: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-7

Page 8: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-8

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

Page 9: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-9

Understanding Form Syntax

Page 10: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-10

Forms Syntax

• Five basic form elements are commonly

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

Page 11: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-11

Forms Syntax (continued)

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

Page 12: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-12

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

Page 13: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-13

Page 14: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-14

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

Page 15: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-15

Creating Input Objects

Page 16: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-16

Creating Input Objects

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

• The type attribute specifies the type of input object

Page 17: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-17

Page 18: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-18

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 19: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-19

Page 20: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-20

Creating Check Boxes

• Check boxes are an on/off toggle that the user can select

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

Page 21: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-21

Page 22: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-22

Creating Radio Buttons

• Radio buttons are like check boxes, but only one selection is allowed

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

Page 23: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-23

Page 24: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-24

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 25: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-25

Page 26: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-26

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 27: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-27

Page 28: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-28

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

Page 29: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-29

Page 30: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-30

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 31: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-31

Page 32: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-32

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 33: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-33

Page 34: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-34

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 35: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-35

Page 36: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-36

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>

Page 37: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-37

Page 38: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-38

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>

Page 39: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-39

Page 40: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-40

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 41: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-41

Page 42: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-42

Creating Input Groupings

• You can use the <fieldset> and <legend> elements to create groupings of different types of input elements

Page 43: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-43

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>

Page 44: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-44

Page 45: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-45

Building Forms within Tables

Page 46: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-46

Building Forms within Tables

• Placing forms within a table can enhance the layout and legibility of the form

Page 47: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-47

Page 48: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-48

Page 49: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-49

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

Page 50: Chapter 12 Working with Forms Principles of Web Design, 4 th Edition

Principles of Web Design, 4th Edition 12-50

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