ŠĻą”±į > ž’ W Y ž’’’ V ’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’ģ„Į ` ųæ bjbjĖsĖs .B © © ’’ ’’ ’’ ¤ Ü Ü Ü Ü Ü Ü Ü š x+ x+ x+ x+ D ¼+ L š 2 ö , *, *, *, *, - - - 1 1 1 1 1 1 1 $ ų2 h `5 Š §1 Ü - - - - - §1 Ü Ü *, *, Ū ¼1 1 1 1 - . Ü *, Ü *, 1 1 - 1 1 1 Ü Ü 1 *, , ĄųŠ“RQĘ x+ 3- 1 1 Ņ1 0 2 1 06 M/ ¢ 06 1 06 Ü 1 | - - 1 - - - - - §1 §1 ļ0 - - - 2 - - - - š š š ō š š š ō š š š Ü Ü Ü Ü Ü Ü ’’’’ Creating an Email form with JavaScript Focus & Validation LAB - TEC236 Open Dreamweaver 8 Check I Want to Try Macromedia Dreamweaver Create New > HTML Set Preference Edit > Preferences > Accessibility > Uncheck - Form Objects Open up your Pet Store template Clear out the center of the page if needed Save as signup.html Enter the Text - Sign Up for a Pet Store Logon - *required Set you cursor below the text Add a form Insert > Form > Form Set form Properties: Form Name: petform Action: HYPERLINK "mailto:account22201@yahoo.com" mailto:account22201@yahoo.com Method: Post Target: leave Blank Class: None Enctype: text/plain Add Form Object 1 - name Inside the dotted form outline add the text * Your Name: After the Text Insert a Form Object - Text Field Insert > Form > Text Field Set Text Field properties TextField: name Char width: 25 (this sets how wide the text field box will be) Max Chars: 40 (this sets the maximum number of characters the box can hold) Type: Single line Int Value: Leave Blank (any text you would enter here would show up in the box) Class: none After the above text box, hit enter to add the next Form Objects. Add Form Object 2 - email Inside the dotted form outline add the text * Your Email: After the Text Insert a Form Object - Text Field Insert > Form > Text Field Set Text Field properties TextField: email Char width: 25 (this sets how wide the text field box will be) Max Chars: 40 (this sets the maximum number of characters the box can hold) Type: Single line Int Value: Leave Blank (any text you would enter here would show up in the box) Class: none Save Page View page File > Preview in Browser > Internet Explorer IE After the above text box, hit enter to add the next Form Objects. Add Form Object 3 - comments Inside the dotted form outline add the text Comments: ( no asterisk , this box will not be required) Below the Text Insert a Form Object - Text Area Insert > Form > Text Area Set Text Field properties TextField: comments Char width: 45 (this sets how wide the text Area box will be) Num Lines: 4 (this sets the maximum number of characters the box can hold) Wrap: Default Type: Multi line Int Value: Leave Blank (any text you would enter here would show up in the box) Class: none Save Page View page File > Preview in Browser > Internet Explorer IE Add Form Object 3 submit button Below the Text Insert a Form Object - Button Insert > Form > Button Set Text Field properties Button Name: Submit Value: Submit Action: Submit Form Class: none Save Page Add Form Object 4 reset button Below the Text Insert a Form Object - Button Insert > Form > Button Set Text Field properties Button Name: Reset Value: Reset Form Action: Reset Form Class: none Save Page View page File > Preview in Browser > Internet Explorer IE Fill in form Test Reset Form button Adding Onload (giveFocus) JavaScript and Onsubmit JavaScript Validation ( will check that name and email fields have text before submitting the form). OnLoad (Give focus to the forms name text field) In Dreamweaver view the code View > Code Find the Body tag Add onLoad="giveFocus()" inside the body tag (this is the call to the giveFocus JavaScript function) Should look similar to:
Add the giveFocus JavaScript Function right after the tag. Save Page Test that when the page loads the cursor is in the name text field box. Onsubmit JavaScript Validation In the page code find the form tag Should look similar to: