Accessibility

Table of Contents

  1. Introduction
  2. Building the Containers
  3. Inserting the Form Elements
  4. Styling the Inputs

Styling Forms with CSS – Part 3: Two-Column Form Layout

Building the Containers

For Part 3, you will start from scratch with a new HTML file and a new CSS file. It is important that you get the structure for the columns set correctly. I don't want to cloud the issues involved by asking you to make modifications to your existing files. Within the sample files you download at the beginning of this article, you will find the completed documents for Part 3. You can either create your own documents as you work through this tutorial or read through the code as you build it in the finished documents.

In this section of the tutorial, you will create the containing elements for your form and include the opening and closing form tags. Once you do this, you will be in a position to start adding the form elements to the appropriate containers. The first Captivate demo lays out the structure and includes the form container, the form tags, and the two columns you will need for your layout.

Your first steps are to create an HTML document and save it as TwoColFormLayout.html and then create a new CSS file and save it as TwoCol.css. You can create these documents in the same way you created the original documents in Part 1. Don't forget to create your ie.css file and save that as well. At the end of this tutorial, you will see how you can filter out styles that Internet Explorer does not render properly.

You will also need to structure your site in the same way. Save the HTML file in the root of your site and create a folder called CssFiles, also in the root, to hold your CSS documents. Once again, Part 1 contains all the relevant step-by-step information to complete these part and, of course, the structure is as it should be in the completed download files.

Once it's correctly set, the head of your TwoColFormLayout.html document should look like the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="CSSFiles/TwoCol.css" rel="stylesheet" type="text/css" media="screen" />
<!--[if LTE IE 6]>
<link href="CssFiles/ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
</head>

The following demo shows you how to build the content structure.

Alternatively, you can complete the following steps:

  1. Open your TwoColFormLayout.html file in Design view.
  2. Press Shift+F11 to open the CSS panel.
  3. Click the New CSS Style button. The New CSS Rule dialog box opens.
  4. Select the Advanced radio button.
  5. Type #formContainer into the Selector box and click OK.
  6. Select the Box category, select the Width pop-up menu, and type 100. (See Note.)
  7. Select % from the Value pop-up menu and click OK.
  8. Select the Layout tab on the Insert bar.
  9. Click the Insert Div Tag button to open the Insert Div Tag dialog box.
  10. In the Insert pop-up menu, select At Insertion Point.
  11. In the ID text box, type FormContainer. Click OK. The div is inserted into your page.
  12. Select the placeholder text that was inserted in the div and press the Delete key.
  13. Select the forms tab or menu in the Insert bar.
  14. Click the form button on the Insert bar.
  15. Press Shift+F11 to open the CSS panel and click the New CSS Rule button. The New CSS Rule dialog box opens.
  16. You will now create a grouped selector. Select the Advanced radio button and type #Col1, #Col2 into the Selector pop-up menu. Click OK.
  17. Select the Box category and type 49 in the Width pop-up menu.
  18. Select % from the Value pop-up menu. Click OK.
  19. Open your CSS file to see how elements can be grouped.
  20. Save your CSS file.
  21. Switch back to your HTML file.
  22. Select the Layout tab or menu from the Insert bar.
  23. Click the Insert Div Tag button to open the Insert Div Tag dialog box.
  24. Select At Insertion Point from the Insert pop-up menu.
  25. Select Col2 from the ID pop-up menu and click OK.
  26. Click the Insert Div Tag button to open the Insert Div Tag dialog box.
  27. From the Insert pop-up menu, select After Tag. The tag box to the right becomes active.
  28. Select the <div id="Col2"> option.
  29. Select Col1 from the ID pop-up menu and click OK.
  30. Switch to Code view. Note how Dreamweaver has set the Col1 div after the Col2 div as you instructed it to.
  31. Switch back to Design view.
  32. Press Shift+F11 to open the CSS panel.
  33. Click the New CSS Rule button to open the New CSS Rule dialog box.
  34. Select the Advanced radio button and type #Col2 in the Selector pop-up menu.
  35. Click OK. The CSS Rule Definition dialog box opens.
  36. Select the Box category and select Right from the Float pop-up menu. Click OK.
  37. Select CSS Layout Backgrounds from the Visual Aids options in the Document toolbar. You can clearly see the default margins on the form. You'll remove these now.
  38. Press Shift+F11 to open the CSS panel.
  39. Click the New CSS Rule button to open the New CSS Rule dialog box.
  40. Select the Tag radio button and select Form from the Tag pop-up menu.
  41. Click OK. The CSS Rule Definition dialog box opens.
  42. Select the Box category and select the Top pop-up menu for Margin.
  43. Leave Same For All selected.
  44. Type 0 (zero) in the Top pop-up menu and click OK. The margins have now been removed.
  45. Save your documents.

Note: By default, a div will fill the width of its containing element, so there is no real need to set the width to 100%. However, if you don't want the div to fill the container, you need only to edit the width to constrain it.

You now have the structure in place to contain your form elements. You have the formContainer that contains all your code. You have a form inside the formContainer that that holds your Col1 and Col2 divs. The important thing is that the two Col divs are within the form tags in your code. It is of course important to ensure that all your form elements are contained within a form.

Page 2 of 4
Previous Page
Next Page