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 the Dreamweaver program in order to perform the exercise .

2 If the File 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, clic on the button to unfold its advanced properties.

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

9 Select the Form option.

10 Select the Text Field option.

11 Clic 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 selected to the send button.



  Índice del curso  
Legal warning: Authorised on-line use only. It is not allowed the use of these courses in companies or private teaching centres.
© aulaClic. All rights reserved. Reproduction in any form whatsoever is prohibited.
November-2005.