ŠĻą”±į > ž’ 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: