Creating an Email form with JavaScriptFocus & 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: mailto:
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:
<BODY BACKGROUND="images/background3.gif" onLoad="giveFocus()">
Add the giveFocus JavaScript Function right after the </head> tag.
<script LANGUAGE="JavaScript">
function giveFocus()
{
document.petform.name.focus();
}
</script>
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:
<form action="mailto:"" method="post" enctype="text/plain" name="petform" id="Petform"
Add onsubmit="return Form_Validator(this)" inside the form tag (this is the call to the Form_Validator JavaScript function)
Should look similar to:
<form action="mailto:"" method="post" enctype="text/plain" name="petform" id="Petform" onsubmit="return Form_Validator(this)">
Add the Form_Validator JavaScript Function after the </script> tag of the giveFocus function.
function Form_Validator(Validate)
{
if (Validate.name.value == "")
{
alert("Please enter a value in the \"Name\" field.");
Validate.name.focus();
return (false);
}
if (Validate.email.value == "")
{
alert("Please enter a value in the \"Email Address\" field.");
Validate.email.focus();
return (false);
}
else {
return true
}
}
</SCRIPT>
Save the Page
Test the page:
On loading the page the cursor should be in the Name text field
Without entering anything into the form, click the Submit button
Should receive an alert to enter a value in the Name field
After clicking the alerts OK box the cursor should return to the name field
Enter your name in the name field
Without entering anything into the Email text field, click the Submit button
Should receive an alert to enter a value in the Email field
After clicking the alerts OK box the cursor should return to the Email field
Enter your Email in the Email field
Enter 5 lines of text in the Comments box, should give you a scroll bar