1. Unit 5
Create Forms

2. Name: Date:10/19/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
Introduction to
Forms
Forms allow you to gather information from readers who visit your web pages.
You can create a form that lets readers send you questions or comments about your web pages.
You can also create a form that allows readers to purchase products and services on the Web.
Unit 5
Page 1
Summary:

3. Name: Date:10/19/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
Gathers Information ~ a reader can enter information and select options on a form. When a reader clicks the Submit button, the information transfers to a Web server.
Process Information ~ When a Web server receives information from a form, the server runs a program called a Common Gateway Interface (CGI) script that processes the information. The CGI script you use determines how the information is processed. For example, a CGI script can send the results of a form in an message, save the results in a document or add the results to a database stored on the Web server.
How Forms
Work
Unit 5
Page 1
Summary:

4. Type <form method=post Action=post> {“CGI Script”}
Name: Date:10/19/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
Set up a form
Form Method
Action
You must set up a form before you can add information to the form.
Type <form method=post Action=post> {“CGI Script”}
Type </form> to complete the form.
Unit 5
Page 1
Summary:

5. For a text form the input type = text.
Name: Date:10/19/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
You can create a text box that allows readers to enter a line of text. Text boxes area commonly used for names and addresses.
For a text form the input type = text.
You type name=“?” replacing the “?” with a word that describes the text box.
Using a Text
Box in a Form
Input type
name
Unit 5
Page 1
Summary:

6. Name: Date:10/19/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
Size
Maxlength
Size determines the width of a text box replacing the “?” with the width you want to use in characters.
Maxlength determines the maximum number of characters a reader can enter in a text box. You may want to create a text box with a size of 20 characters but only allow readers to be able to enter a maximum of 15 characters.
Unit 5
Page 1
Summary:

7. <form method=post action=post>
Name: Date:10/19/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
<form method=post action=post>
My favorite candy is: <input type=“text” name=“candy” size =”50” maxlength=“45”>
Complete practice work!
Example of writing tags
Unit 5
Page 1
Summary:

8. To protect the information you must use a secure Web server.
Name: Date:10/20/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
You can create a password box that allows readers to enter confidential information, such as a credit card number or password. <input type=“password” name=“credit” size=“30” maxlength=“16”>
When a reader types information in a password box, an asterick(*) or bullet (♦) appears for text.
To protect the information you must use a secure Web server.
Create a password box
Unit 5
Page 2
Summary:

9. Name: Date:10/21/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
You can create a large text box area that allows readers to enter several lines or paragraphs of text.
You should make sure a text area will fit on a computer screen and will be wide enough to clearly display the text readers type. A text area with a height of approximately 15 rows and a width of approximately 70 characters will fill a computer screen.
Create a large text box
Unit 5
Page 2
Summary:

10. Name: Date:10/21/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
As part of a form you would type a tag for <textarea>. This is to create a space for readers to write comments or suggestions.
To determine the number of rows you want available to a reader you will write rows=“?” replacing the ? With a number. Type cols=“?” replacing the ? With the number of characters you want to allow. Type Wrap if you want readers text to automatically wrap within the text area. EX.: <textarea name=“commentbox” rows=“5” cols=“65” wrap></textarea>
Textarea
Rows
Cols
Unit 5
Page 2
Summary:

11. Create Check Boxes CORNELL NOTES TITLE NOTES: TOPIC:
Name: Date:10/21/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
You can include check boxes on a form if you want readers to be able to select one or more options.
What information needs to be specified when creating check boxes?
You need to specify a word that describes the group of check boxes. This is done using the NAME attribute.
You need to specify a word that describes each check box. This is done using the VALUE attribute.
You need to specify the text you want to appear beside each check box on your Web page.
Create Check
Boxes
Unit 5
Page 4
Summary:

12. Name: Date:10/21/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
Between the <form> and </form> tags, type
<input type=“checkbox” and then press space, type name=“?” replacing ? With a word that describes the group of check boxes you want to create, then press the spacebar. To specify the information for one check box, type value=“?” replacing the ? With a word that describes the check box. If you want the check box to be selected automatically, press the spacebar and then type checked. Type > to complete the check box. Type the text you want to appear beside the check box on your web page.
<input type=“checkbox” name=“?” value=“?” checked>
Create Check
Boxes
Unit 5
Page 4
Summary:

13. Name: Date:10/22/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
You can include radio buttons on a form if you want readers to select only one of several options.
What information is needed to specify when creating radio buttons?
You need to specify a word that describes the group of radio buttons. This is done in the name attribute.
You need to specify a word that describes each radio button. This is done using the value attribute.
Create Radio
Buttons
Unit 5
Page 5
Summary:

14. Name: Date:10/22/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
You need to specify the text you want to appear beside each radio button on your Web page.
Between the <form> and </form> type
<input type=“radio” name=“?” value=”?” checked>
Create Radio
Buttons
Unit 5
Page 5
Summary:

15. Name: Date:10/26/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
You can create a menu that offers readers a list of options to choose from.
Menus are commonly used for displaying lists of age groups, states, and products.
What information is needed to be specified when creating a menu?
You need to specify a word that describes the menu. This is done using the name attribute.
Create a menu
Unit 5
Page 6
Summary:

16. Name: Date:10/26/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
You need to specify a word that describes each menu option. This is done using the value attribute.
You need to specify the text you want to appear for each menu option on your Web page.
Between the <form> and </form> tags, type
<select name=“?” replacing the ? With a word that describes the menu. Then press spacebar. Type size=“?” replacing the ? With the number of options you want readers to see in the menu without having to use the scroll bar.
Create a menu
Unit 5
Page 6
Summary:

17. Create a menu Type the information for one menu option, type
Name: Date:10/26/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
Type the information for one menu option, type
<option value=“?” replacing the ? With a word that describes the menu option.
Type the text you want to appear for the menu option on your Web page.
If you want a menu option to be selected automatically, type selected after the value attribute for the menu option.
Type </select> to complete the menu.
The web browser displays the menu.
Create a menu
Unit 5
Page 6
Summary:

18. Allow readers To send you files.
Name: Date:10/27/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
You can create an area on your form that allows readers to send your files.
When readers send you files, the files are stored on your Web server. To obtain the files readers send, contact your Web server administrator.
When would you allow readers to send you files?
Allowing readers to send you files is useful when you want to collect information from your readers. You can have readers send you files containing responses to a questionnaire or interesting information that relates to your web site.
Allow readers
To send you files.
Unit 5
Page 7
Summary:

19. Allow readers To send you files.
Name: Date:10/27/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
Some companies allow readers to send files containing information such as orders and resumes.
<input type=“file” enctype=“multipart/form-data” name=“?” size=“?”>
Allow readers
To send you files.
Unit 5
Page 7
Summary:

20. Create a submit button Create a Reset button
Name: Date:10/27/2009 Period:
CORNELL NOTES
TITLE
NOTES:
TOPIC:
You can create a Submit button that readers can click to send the information they entered in your form to your Web server.
<input type=“submit” value=“send”>
When a reader clicks the Submit button, the information they entered in your form will transfer to your Web server.
You can create a reset button that readers can click to clear the information they entered in your form.
<input type=“reset” value=“clear”>
When a readers clicks the Reset button, the form clears and once again displays its original settings.
Create a submit button
Create a
Reset button
Summary:
Unit 5
Page 7