1 / 35

Creating a Form on a Web Page

Learn how to create a form on a web page using HTML tags such as <form>, <input>, <select>, and <fieldset>. Discover how to add various form controls like text boxes, check boxes, selection menus, radio buttons, and text area boxes.

rmagee
Download Presentation

Creating a Form on a Web Page

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Project 7 Creating a Formon a Web Page

  2. Project Objectives • Define terms related to forms • Describe the different form controls and their uses • Use the <form> tag • Use the <input> tag • Create a text box Project 7: Creating a Form on a Web Page

  3. Project Objectives • Create check boxes • Create a selection menu with multiple options • Use the <select> tag • Use the <option> tag • Create radio buttons Project 7: Creating a Form on a Web Page

  4. Project Objectives • Create a textarea box • Create a Submit button • Create a Reset button • Use the <fieldset> tag to group form information Project 7: Creating a Form on a Web Page

  5. Input Controls • An input control is any type of input mechanism on a form • A data input control is either a radio button, a check box, a Submit button, a Reset button, or a selection menu • A text input control is either a text box, a textarea box, or a password text box Project 7: Creating a Form on a Web Page

  6. Input Controls Project 7: Creating a Form on a Web Page

  7. HTML Tags Used to Create Forms Project 7: Creating a Form on a Web Page

  8. Starting Notepad and Opening an HTML File • Start Notepad and, if necessary, maximize the window • With a USB drive plugged into your computer, click File on the menu bar and then click Open on the File menu. If necessary, click USB Drive (G:) in the Look in list. Click the Project07 folder and then click the ProjectFiles folder in the list of available folders • If necessary, click the Files of type box arrow and then click All Files • Double-click orderform.htm in the list of files Project 7: Creating a Form on a Web Page

  9. Starting Notepad and Opening an HTML File Project 7: Creating a Form on a Web Page

  10. Creating a Form and Identifying the Form Process • Highlight the words <!--Put form method statement here --> on line 12 and then press the DELETE key • Type <form method="post" action="mailto:billthomas@isp.com"> as the new tag • Click just before the </body> tag on line 35 • Type </form> and then press the ENTER key Project 7: Creating a Form on a Web Page

  11. Creating a Form and Identifying the Form Process Project 7: Creating a Form on a Web Page

  12. Changing the Text Message • Select lines 15 through 31 and then press the DELETE key • With the insertion point on line 15, enter the HTML code shown below Project 7: Creating a Form on a Web Page

  13. Adding Text Boxes • Enter the following HTML beginning on line 19 Project 7: Creating a Form on a Web Page

  14. Adding Check Boxes • Enter the following HTML beginning on line 27 Project 7: Creating a Form on a Web Page

  15. Adding a Selection Menu • Enter the following HTML beginning on line 32 Project 7: Creating a Form on a Web Page

  16. Adding Additional Text Boxes • Enter the following HTML beginning on line 39 Project 7: Creating a Form on a Web Page

  17. Adding Radio Buttons • Enter the following HTML beginning on line 45 Project 7: Creating a Form on a Web Page

  18. Adding a Textarea • Enter the following HTML beginning on line 49 Project 7: Creating a Form on a Web Page

  19. Adding Submit and Reset Buttons • If necessary, click line 53 • Type <p><input type=“submit” value=“Submit”> and then press the ENTER key • Type <input type=“reset” value=“Reset”></p> as the tag Project 7: Creating a Form on a Web Page

  20. Adding Submit and Reset Buttons Project 7: Creating a Form on a Web Page

  21. Adding Fieldset Controls to Create Form Groupings • Click just after the </p> on line 17 and then press the ENTER key • Type <fieldset><legend align=“right">Personal Information</legend> as the tag • Click to the right of size=“25"> on line 25 and then press the ENTER key • Type </fieldset> and then press the ENTER key twice Project 7: Creating a Form on a Web Page

  22. Adding Fieldset Controls to Create Form Groupings • With the insertion point on line 28, type <p><fieldset><legend align="right">About Your Order</legend> as the tag • Click to the right of the </p> on line 45 and then press the ENTER key • Type </fieldset> and press the ENTER key twice Project 7: Creating a Form on a Web Page

  23. Adding Fieldset Controls to Create Form Groupings • Type <br /><fieldset><legend align="right">Additional Comments</legend> on line 48 • Click to the right of the </p> on line 55 and press the ENTER key • Type </fieldset> as the end tag Project 7: Creating a Form on a Web Page

  24. Adding Fieldset Controls to Create Form Groupings Project 7: Creating a Form on a Web Page

  25. Saving the HTML File • With a USB drive plugged into your computer, click File on the menu bar and then click Save As. Type orderform.htm in the File name text box • If necessary, click USB Drive (G:) in the Save in list. Click the Project07 folder and then click the ProjectFiles folder in the list of available folders. Click the Save button in the Save As dialog box Project 7: Creating a Form on a Web Page

  26. Viewing, Testing, and Printing the Web Page Using a Browser • Start your browser • Type G:\Project07\ProjectFiles\orderform.htm in the Address box and then press the ENTER key • Test all fields except the Reset button as described in the previous section • If you modified the HTML code to use your e-mail address as the action attribute value, click the Submit button • Click the Reset button Project 7: Creating a Form on a Web Page

  27. Viewing, Testing, and Printing the Web Page Using a Browser Project 7: Creating a Form on a Web Page

  28. Viewing, Testing, and Printing the Web Page Using a Browser • Click the Print button on the Standard Buttons toolbar Project 7: Creating a Form on a Web Page

  29. Printing the HTML File • Click the Notepad button on the taskbar • Click File on the menu bar and then click Print Project 7: Creating a Form on a Web Page

  30. Printing the HTML File Project 7: Creating a Form on a Web Page

  31. Quitting Notepad and a Browser • Click the Close button on the browser title bar • Click the Close button on the Notepad window title bar Project 7: Creating a Form on a Web Page

  32. Project Summary • Define terms related to forms • Describe the different form controls and their uses • Use the <form> tag • Use the <input> tag • Create a text box Project 7: Creating a Form on a Web Page

  33. Project Summary • Create check boxes • Create a selection menu with multiple options • Use the <select> tag • Use the <option> tag • Create radio buttons Project 7: Creating a Form on a Web Page

  34. Project Summary • Create a textarea box • Create a Submit button • Create a Reset button • Use the <fieldset> tag to group form information Project 7: Creating a Form on a Web Page

  35. Project 7 Complete Creating a Formon a Web Page

More Related