Unit 5 Create Forms

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:

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

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:

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:

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:

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

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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