Creating a Form on a Web Page 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 Use the <select> tag Use the <option> tag Create radio buttons

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

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

Input Controls

HTML Tags Used to Create Forms

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

Starting Notepad and Opening an HTML File

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

Creating a Form and Identifying the Form Process

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

Adding Text Boxes Enter the following HTML beginning on line 19

Adding Check Boxes Enter the following HTML beginning on line 24

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

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

Adding Radio Buttons Enter the following HTML beginning on line 43

Adding a Textarea Enter the following HTML beginning on line 47

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>

Adding Submit and Reset Buttons

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

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

Adding Fieldset Controls to Create Form Groupings

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

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

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

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

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

Printing the HTML File

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 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 Summary Create check boxes Create a selection menu with multiple options Use the <select> tag Use the <option> tag Create radio buttons

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

Project 7 Complete