Hi everyone and welcome to my Dreamweaver Form Validation Tutorial, glad you could make it!!
I guess you’re here to learn so lets jump right on it.
1. Start by Creating a new HTML Document.
2. Go to the insert panel and select Form from the Drop down menu.
3. Click the Form button at the very top to insert a form tag in you Dreamweaver document. The Form tag is where you enter the settings for the whole form ex. where you want to send it and how to send the form.
4. Next lets insert a table inside the form to be able to organize the text boxes. In order to do this select “Common” from the Drop Down list in the insert panel and the click on “Table”. This opens up a Table Dialog Box.
5. Inside the Dialog enter the following and the press OK.
Rows: 4 Columns: 2 Table Width: 400 pixels Border Thickness: 0 pixels
6. In the left column on the first line enter “Name:”
7. In the right column insert a Spry Validation Text Field by going to the Forms drop down on the Insert panel and click on “Spry Validation Text Field”.
8. A Input Tag dialog will appear where you can give the tag some attributes. Enter name in the ID text field and press OK.
9. Repeat the steps 6-8 in the second row of the table. Instead of “name” use “email” this time.
10. In the first column on the 3 row write “Comment:” and in the second column insert a “Spry Validation Text Area” instead of Text Filed. Give the text area the ID “comment” and press OK.
11. In the last row of the table insert a Button in one of the columns and give it the ID send.
Now, all the objects are added to the form. Lets enter some Validation settings.
12. Select the first validation field by clicking on the blue outline around the text box. The go down to the Properties panel and enter “2” inside the “Min chars”.
This tells Dreamweaver that it needs to be at least 2 characters in that text field in order to send it.
13. Select the email validation field and change the “Type” Drop down, found in the properties panel, to “E-mail”. This tells Dreamweaver that the text inserted in this form needs to have the form of an email address.
To be able to send the form in some way you need to apply some settings to the form itself. The easiest way to send a form is by using the visitors own email program to send it via there own email address. To do this follow the next steps.
14. Select the form by clicking on the red outline around the table. 15. In the properties panel select method “POST” and enter this in the action text box: “mailto:your-email@address.com”
Of course you need to change it to your own email address.
So finally lets save the form by going in to File – Save. Dreamweaver then prompts you that it’s going to copy two files to your site folder, your only option is to click OK. These files are needed by your web browser in order to validate the form.
You can now test the form by clicking on globe right next to the Title text area in the top of your window.
The method of using “mailto:” to send the form is not the best and most secure one. On thing that is easily done to improve the safety is by encoding the mailto function or by using a PHP script to send your form. Dreamweaver Tutorials on how to do this can be found on many places on the web. Google is your Friend!