Principles of Web Design 6 th Edition Chapter 11 – Web Forms.
-
Upload
daniela-george -
Category
Documents
-
view
220 -
download
2
Transcript of Principles of Web Design 6 th Edition Chapter 11 – Web Forms.
![Page 1: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/1.jpg)
Principles of Web Design6th Edition
Chapter 11 – Web Forms
![Page 2: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/2.jpg)
ObjectivesWhen you complete this chapter, you will be
able to:• Understand how forms work• Use the <form> element• Create input objects• Style forms with Cascading Style Sheets (CSS)
2
![Page 3: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/3.jpg)
3
Understanding How Forms Work
![Page 4: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/4.jpg)
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
4
![Page 5: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/5.jpg)
Understanding How Forms Work
• The data-processing software can then work with the data and send a response back to the user
• The user enters data via an HTML form
5
![Page 6: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/6.jpg)
6
![Page 7: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/7.jpg)
7
Using the <form> Element
![Page 8: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/8.jpg)
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 processed
8
![Page 9: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/9.jpg)
9
![Page 10: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/10.jpg)
Using the <form> element
• The following code shows a typical <form> element:
<form method="post"action="https://signup.website.com/register.asp">
10
![Page 11: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/11.jpg)
Using get or post
• The difference between get and post is the way the data is sent to the server
• method=“get”: this method sends the form information by including it in the URL
• method=“post”: this method sends the form information securely to the server within the message body
11
![Page 12: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/12.jpg)
Using the mailto Action
• Lets you collect data from a form and send it to any e-mail address
<form action="mailto:[email protected]"method="post" enctype="text/plain">
12
![Page 13: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/13.jpg)
Creating Input Objects
13
![Page 14: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/14.jpg)
Creating Input Objects
• The <input> element defines many of the form input object types• The type attribute specifies the type of input
object
14
![Page 15: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/15.jpg)
15
![Page 16: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/16.jpg)
16
![Page 17: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/17.jpg)
Labeling Form Elements
• The <label> element lets you create a caption for an input element
• Lets you extend the clickable area of a form element
<p><label class="username" >First Name:</label><input type="text" name="firstname"size="35" maxlength="35" /></p>
17
![Page 18: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/18.jpg)
Labeling Form Elements
• To make the text clickable, you associate the <label> element with the <input> element by using the for and id attributes
<p><label class="username" for="First Name">First Name:</label><input type="text" name="fi rstname" id="First Name"size="35" maxlength="35" /></p>
18
![Page 19: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/19.jpg)
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">
19
![Page 20: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/20.jpg)
20
![Page 21: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/21.jpg)
Creating Check Boxes
• Check boxes are an on/off toggle that the user can select
<input type="checkbox" name="species" value="smbass"> Smallmouth Bass
21
![Page 22: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/22.jpg)
22
![Page 23: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/23.jpg)
Creating Radio Buttons
• Radio buttons are like check boxes, but only one selection is allowed
<p>Would you like to be on our mailing list?</p><p><input type="radio" name="list" value="yes"id="Yes" /><label for="Yes">Yes</label><input type="radio" name="list" value="no"id="No" /><label for="No">No</label>• </p>
23
![Page 24: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/24.jpg)
24
![Page 25: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/25.jpg)
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">
25
![Page 26: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/26.jpg)
26
![Page 27: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/27.jpg)
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">
27
![Page 28: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/28.jpg)
28
![Page 29: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/29.jpg)
Letting the User Submit a File
• Users can select a file on their own computer and send it to the server
<p>Use the browse button to select your file:</p><p><input type="file" size="30“></p>
29
![Page 30: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/30.jpg)
30
![Page 31: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/31.jpg)
Creating a Password Entry Field
• The password input box works like the text input, but the entered text is hidden by asterisks
<p>Enter your user name and password:</p><p>User Name: <input type="text" size="30" />Password: <input type="password" size="30" /></p>
31
![Page 32: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/32.jpg)
32
![Page 33: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/33.jpg)
Creating a Password Entry Field
• The password input box works like the text input, but the entered text is hidden by asterisks
<p>Enter your user name and password:</p><p>User Name: <input type="text" size="30" />Password: <input type="password" size="30" /></p>
33
![Page 34: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/34.jpg)
34
![Page 35: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/35.jpg)
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>
35
![Page 36: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/36.jpg)
36
![Page 37: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/37.jpg)
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>
37
![Page 38: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/38.jpg)
38
![Page 39: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/39.jpg)
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>
39
![Page 40: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/40.jpg)
40
![Page 41: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/41.jpg)
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>
41
![Page 42: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/42.jpg)
42
![Page 43: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/43.jpg)
Creating Input Groupings
• You can use the <fieldset> and <legend> elements to create groupings of different types of input elements
43
![Page 44: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/44.jpg)
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>
44
![Page 45: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/45.jpg)
45
![Page 46: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/46.jpg)
Styling Forms with CSS
46
![Page 47: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/47.jpg)
47
![Page 48: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/48.jpg)
48
![Page 49: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/49.jpg)
49
![Page 50: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/50.jpg)
50
![Page 51: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/51.jpg)
51
![Page 52: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/52.jpg)
52
![Page 53: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/53.jpg)
53
![Page 54: Principles of Web Design 6 th Edition Chapter 11 – Web Forms.](https://reader035.fdocuments.us/reader035/viewer/2022062314/56649dcf5503460f94ac38f2/html5/thumbnails/54.jpg)
54
Summary
• Choose the right form elements based on the data you want to collect
• A form element has attributes that describe how the form data is processed
• You need a server application to process your form data
• The <fieldset> and <legend> elements let you create more visually appealing forms
• Forms should be formatted to improve their legibility