Step by step exercise . Unit 9 Inserting elements in an interactive form


Objective

 

To Practice certain operations used to insert and configure some form elements.

1 You need to open Dreamweaver in order to perform the exercise.

2 If the Files panel doesn't show up, open it through Window menu and then the Files option.

3 Select the Animals site in the Files panel.

4 Double-click on the consults.htm file in the Files panel.

The document will be opened in Dreamweaver.

5 If the properties inspector doesn't show up, open it through Window menu and then Properties option.

6 If the properties inspector is not completely shown, click on the button to unfold its advanced properties.

7 It's not necessary to insert the form since it is already created. Inside there is a table. Place the mouse inside the first row's last cell.

9 Select the Form option.

10 Select the Text Field option.

11 Click on it to select.

12 In the Text Field of the properties inspector - write name.

13 In Max Chars - write 15.

14 In Type - select Single line .

15 Place the mouse inside the second row last cell.

16 Repeat steps from 8 to 14 but with the following differences:

In Text field - write email.

In Max Chars - write 25.

17 Place the mouse in the last cell of the third row.

18 Click on the Insert menu.

19 Select the Form option.

20 Select the List /Menu option.

21 Click on the List/Menu object to select it.

22 In the List/menu of the properties inspector, write animals.

23 In Type - select Menu.

24 Click on List Values button.

25 Write ---Choose an option--- in Item label.

26 Click on the button to insert new elements into the list. Add Dog, Cat and Others labels.

27 Click on the OK button.

28 Select---Choose a option--- on Initially selected.

29 Place the mouse on the fourth row of the last row.

30 Click on the Insert menu.

31 Select the Form option.

32 Select the Text area option.

33 Click on the text area to select it.

34 Write consult in the Text field of the properties inspector

35 In Type - select Multi line .

36 In Char width - write 50.

37 In Num Lines - write 10.

38 In Init val type Write your consult here.

39 Place the mouse in the blank line under the table, inside the form.

40 Click on the Insert menu.

41 Select the Form option.

42 Select the Button option.

43 Click on the button to select it.

44 In the label option of the properties inspector, write Clear.

45 In Action select Reset form.

46 Place the mouse at the right of the button.

47 Repeat steps from 40 to 45, but with the following differences:

In Label - write Send.

In Action - select Submit form .

48 Click on the Save button of the tool bar.

49 Now you can try the form elements, open the file in your browser and fill the fields. If you click send, nothing happens because we don't have any code associated to the send button.

  Índice del curso