|
|
|
|
Create a simple Dreamweaver form
In this lesson we will create a simple form where visitors can enter the name, e-mail address and send it to a specific address.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1.
|
|
|
Open Dreamweaver and create new document.
|
|
|
4.
|
|
|
The red box shows up. This is a field for entering data.
|
|
|
5.
|
|
|
Now we will add a box for entering an user name.
Click Text Field icon.
|
|
|
6.
|
|
|
In Label enter Username and click OK.
If Dreamweaver asks you "Add tag from?" then you are not staying in the box with the red line, so you have to repeat the process.
|
|
|
7.
|
|
|
First input field is created.
Now press ENTER to move to the next line.
|
|
|
8.
|
|
|
Click on the Text Field icon again. In Label field enter E-mail and click OK.
|
|
|
9.
|
|
|
We have created the second input field.
Press ENTER to move to the next line.
|
|
|
10.
|
|
|
Click Button icon. This time you don’t enter anything in the Label field.
Click OK.
|
|
|
11.
|
|
|
The button is created.
Click on the button.
|
|
|
12.
|
|
|
In the Value field enter “Send”.
|
|
|
13.
|
|
|
Button has been renamed.
Now select first input field (Username).
|
|
|
14.
|
|
|
In TextField field enter “user".
Now repeat the procedure for the second input field, only this time in the TextField filed enter “e-mail”.
|
|
|
15.
|
|
|
Click View and select Code.
|
|
|
16.
|
|
|
HTML code opens.
Find a sentence where it says method = "post" action = "" and move between the quotes at the action command.
|
|
|
17.
|
|
|
Now enter between the quotes mailto:brodjan.brotta@gmail.com. Use your E-mail account.
|
|
|
18.
|
|
|
Click View and select Design.
|
|
|
19.
|
|
|
You are in the design mode again.
Now click File and select Save to save your work. Shorcut is Ctrl + S.
|
|
|
20.
|
|
|
Press F12 to see your result in a browser.
Of course you can redesign the form as you wish.
|
|
|
|
|
|
|
|
|
|