Inserting the Form Elements

In the following movie, you will add the form elements into each column and create the necessary CSS rules to style the elements. As in Part 1, you will also add Access Key and Tab Index navigation to enhance your users' experience when using your form.

You can begin by opening your TwoColFormLayout.html file in Code view.

• View the movie: Adding the Form Elements

Alternatively, you can complete the following steps:

1. Open your HTML file in Design view.
2. Delete the placeholder text in your Col1 div.
3. Select the Text Field button from the Form tab/menu of the Insert bar. This opens the Input Tag Accessibility features.
4. Type First into the Label box.
5. For the Style option, select the Attach Label Using "for" Attribute option.
6. For the Position option, select the Before Form Item option.
7. Type a in the Access Key box and type 1 in the Tab Index box. Click OK.
8. Press Shift+F11 to open the CSS panel.
9. Click the New CSS Rule button to open the New CSS Rule dialog box.
10. For the Selector Type, select the Tag radio button option.
11. Select Label from the Tag pop-up menu and click OK. The Label Rule Definition dialog box opens.
12. Select the Block category and select Block from the Display pop-up menu.
13. Click OK. Note how the input is now forced down to the next line.
14. Delete the placeholder text in your Col2 div.
15. Select the Text Field button from the Insert bar. The Input Tag Accessibility features opens.
16. Type Second into the Label field.
17. For the Style option, select the Attach Label Using "for" Attribute option.
18. For the Position option, select the Before Form Item option.
19. Type b in the Access Key field and type 2 in the Tab Index field. Click OK.
20. Place your cursor behind the input in Col1.
21. Select the Text Field button from the Insert bar. The Input Tag Accessibility features opens.
22. Type Third into the Label field.
23. For the Style option, select the Attach Label Using "for" Attribute option.
24. For the Position option, select the Before Form Item option.
25. Type c in the Access Key field and type 3 in the Tab Index field. Click OK.
26. Place your cursor behind the input in Col2.
27. Select the Text Field button from the Insert bar. The Input Tag Accessibility features opens.
28. Type Fourth into the Label field.
29. For the Style option, select the Attach Label Using "for" Attribute radio button.
30. For the Position option, select the Before Form Item radio button.
31. Type d into the Access Key field and type 4 in the Tab Index field. Click OK.
32. Place your cursor behind the second input in Col2.
33. Select the Button button from the Insert bar. The Input Tag Accessibility features opens.
34. Leave the Label box empty.
35. For the Style option, select the Attach Label Using "for" Attribute option.
36. For the Position option, select the Before Form Item option.
37. Type e in the Access Key field and type 5 in the Tab Index field. Click OK.
38. Press Shift+F11 to open the CSS panel.
39. Select the #formContainer rule.
40. Select the 100 pop-up menu and change the 100 value to 65.
41. Save your CSS file.

See how the form's width is reduced?

Page 3 of 4

Previous Page

Next Page