1 / 34

Project 7

Project 7. Creating a Form on a Web Page. 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 Objectives. Create check boxes Create a selection menu with multiple options

tahir
Download Presentation

Project 7

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

  3. Project Objectives • Create check boxes • Create a selection menu with multiple options • Use the <select> tag • Use the <option> tag • Create radio buttons

  4. Project Objectives • Create a textarea box • Create a Submit button • Create a Reset button • Use the <fieldset> tag to group form information

  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

  6. Input Controls

  7. HTML Tags Used to Create Forms

  8. Starting Notepad and Opening an HTML File • Start Notepad and, if necessary, maximize the window • With the HTML Data Disk in drive A, click File on the menu bar and then click Open on the File menu. If necessary, click 31⁄2 Floppy (A:) 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

  9. Starting Notepad and Opening an HTML File

  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

  11. Creating a Form and Identifying the Form Process

  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

  13. Adding Text Boxes • Enter the following HTML beginning on line 19

  14. Adding Check Boxes • Enter the following HTML beginning on line 24

  15. Adding a Selection Menu • Enter the following HTML beginning on line 31

  16. Adding Additional Text Boxes • Enter the following HTML beginning on line 38

  17. Adding Radio Buttons • Enter the following HTML beginning on line 43

  18. Adding a Textarea • Enter the following HTML beginning on line 47

  19. Adding Submit and Reset Buttons • If necessary, click line 51 • Type <p><input type=“submit” value=“Submit”> and then press the ENTER key • Type <input type=“reset” value=“Reset”></p>

  20. Adding Submit and Reset Buttons

  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="left">Required Information</legend> as the tag • Click to the right of maxlength="4"> on line 42 and then press the ENTER key • Type </fieldset> and then press the ENTER key twice

  22. Adding Fieldset Controls to Create Form Groupings • With the insertion point on line 45, type <br /><fieldset><legend align="right">Additional Comments</legend> as the tag • Click to the right of the </p> on line 53 and then press the ENTER key • Type </fieldset> as the tag

  23. Adding Fieldset Controls to Create Form Groupings

  24. Saving the HTML File • With the HTML Data Disk in drive A, click File on the menu bar and then click Save As. Type orderform.htm in the File name text box • If necessary, click 31⁄2 Floppy (A:) 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

  25. Viewing, Testing, and Printing the Web Page Using a Browser • Start your browser • Type a:\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

  26. Viewing, Testing, and Printing the Web Page Using a Browser

  27. Viewing, Testing, and Printing the Web Page Using a Browser • Click the Print button on the Standard Buttons toolbar

  28. Printing the HTML File • Click the Notepad button on the taskbar • Click File on the menu bar and then click Print

  29. Printing the HTML File

  30. Quitting Notepad and a Browser • Click the Close button on the browser title bar • Click the Close button on the Notepad window title bar

  31. 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

  32. Project Summary • Create check boxes • Create a selection menu with multiple options • Use the <select> tag • Use the <option> tag • Create radio buttons

  33. Project Summary • Create a textarea box • Create a Submit button • Create a Reset button • Use the <fieldset> tag to group form information

  34. Project 7 Complete

More Related