working with forms. how forms work forms let you build interactive web pages that collect...
TRANSCRIPT
![Page 1: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/1.jpg)
Working with Forms
![Page 2: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/2.jpg)
How Forms Work
![Page 3: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/3.jpg)
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 4: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/4.jpg)
![Page 5: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/5.jpg)
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 6: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/6.jpg)
![Page 7: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/7.jpg)
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 8: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/8.jpg)
Understanding Form Syntax
![Page 9: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/9.jpg)
Forms Syntax• The following basic form elements are
commonly supported by the major browsers:– <form>
– <input>
– <select>
– <option>
– <textarea>
– <button>
– <hidden>
– <password>
– <submit>
– <reset>
• Other newly defined elements exist, but to begin, we’ll concentrate on the above main elements.
![Page 10: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/10.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 handled
![Page 11: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/11.jpg)
![Page 12: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/12.jpg)
Using the <form> element (continued)
• The following code shows a typical <form> element:
<form action=“http://www.website.com/
order-form.html”
method=”get”
enctype=“plain/text”>
![Page 13: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/13.jpg)
Using the mailto Action
• The mailto action accesses the user’s own e-mail program and uses it to mail form information to a specified e-mail address.– Bypasses the need for server-based programs.
• The syntax is as follows:<form action=“mailto:e-mail address” method=“post” enctype=“text/plain”>
… </form>
• Where e-mail_address is the e-mail address of the recipient in the form.
![Page 14: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/14.jpg)
Creating Input Objects
![Page 15: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/15.jpg)
Creating Input Objects
• The <input> element defines many of the form input object types
• The type attribute specifies the type of input object
![Page 16: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/16.jpg)
Input object types
![Page 17: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/17.jpg)
Creating Text Boxes
• The text box is the most commonly used form element
<input type="text" name="firstname" id="firstname" size="20" maxlength="35" value="First Name">
![Page 18: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/18.jpg)
![Page 19: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/19.jpg)
Creating Check Boxes
• Check boxes are an on/off toggle that the user can select
<input type="checkbox" name="species" id="species" value="smbass"> Smallmouth Bass
![Page 20: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/20.jpg)
![Page 21: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/21.jpg)
Creating Radio Buttons
• Radio buttons are like check boxes, but only one selection is allowed
<input type="radio" name="list" id="list" value="yes" checked> Yes
![Page 22: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/22.jpg)
![Page 23: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/23.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">
![Page 24: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/24.jpg)
![Page 25: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/25.jpg)
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 26: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/26.jpg)
![Page 27: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/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">
![Page 28: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/28.jpg)
![Page 29: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/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
Use the browse button to select your file:<br>
<input type="file" size="30">
![Page 30: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/30.jpg)
![Page 31: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/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
password: <input type="password" size="30">
![Page 32: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/32.jpg)
![Page 33: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/33.jpg)
Using the <select> Element • The <select> element lets you create a list
box or scrollable list of selectable options
<select name="boats“ id="boats"><option>Canoe</option><option>Jon Boat</option><option>Kayak</option><option>Bass Boat</option><option>Family Boat</option></select>
![Page 34: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/34.jpg)
![Page 35: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/35.jpg)
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" id="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 36: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/36.jpg)
![Page 37: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/37.jpg)
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 38: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/38.jpg)
![Page 39: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/39.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“ id="fishstory" rows="5" cols="30">Enter your story here...</textarea></p>
![Page 40: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/40.jpg)
![Page 41: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/41.jpg)
Creating Input Groupings
• You can use the <fieldset> and <legend> elements to create groupings of different types of input elements
![Page 42: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/42.jpg)
Creating Input Groupings (continued)
<fieldset><legend><b>Select the species you prefer to fish:</b></legend><input type="checkbox" name="species“ id="species" value="smbass"> Smallmouth Bass<input type="checkbox" name="species“ id="species" value="lgbass"> Largemouth Bass <br><input type="checkbox" name="species" id="species" value="pike"> Pike</fieldset>
![Page 43: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/43.jpg)
![Page 44: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/44.jpg)
Building Forms within Tables
![Page 45: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/45.jpg)
Building Forms within Tables
• Placing forms within a table can enhance the layout and legibility of the form
![Page 46: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/46.jpg)
![Page 47: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/47.jpg)
![Page 48: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/48.jpg)
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 49: Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The](https://reader036.vdocuments.site/reader036/viewer/2022062422/56649ebd5503460f94bc66db/html5/thumbnails/49.jpg)
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