How to Format a Form With CSS

Style your Web forms using CSS to maximize their visual appeal.

Before Cascading Style Sheets existed, Web developers placed visual styling definitions inside their HTML tags. These definitions, such as font color and font size, controlled the way form elements appeared in browsers. Today's developers use CSS to format forms by creating class definitions in the head sections of HTML documents. After setting up CSS classes for your form's text boxes, labels and textarea controls, you can change their visual characteristics quickly and efficiently by simply updating your CSS code.

Instructions

1. Launch Notepad or an HTML editor. Create a form by pasting the following text into the document's body section:

   <div id="formDiv">

   <form method="post" action="exampleAction.php">

   <label for="Name">Name:</label>

   <input type="text" name="Name" id="Name" />

   <label for="Email">Email:</label>

   <input type="text" name="Email" id="Email" />

   <label for="Note">Note:</label>

   <br />

   <textarea name="Note" rows="5" cols="30" id="Note"></textarea>

   <input type="submit" name="submitButton" value="Submit Form" />

   </form>

   </div>

   This creates a form that contains text boxes, labels, a textarea control and a "Submit" button. The form exists inside a div element whose ID is "formDiv."

2. Add the following CSS code to the document's head section:

   #formDiv {

   width: 600px;

   margin-top: 25px;

   }

   #formDiv label {

   color:Blue;

   font-size: 1.2em;

   margin-right: 10px;

   margin-top: 15px;

   width: 100px;

   text-align: right;

   float: left;

   }

   The "#formDiv" definition sets the form's width and top margin. Adjust the "margin-top" value if you like. Increasing its value increases the distance between the top of the form and the element that precedes the form. Decrease the value to decrease that distance.

   The "#formDiv label" defines the attributes of all the form's labels. In this example, the label color is blue and the font size is 1.2em. Change those values if you like. The margin values control the top and bottom margins of the label.

3. Paste the following CSS code below the last block of code shown in the previous step:

   #formDiv textarea, #formDiv input {

   font-size: 1.1em;

   margin-top: 15px;

   border-style:solid; border-width:1px;

   padding: 5px;

   width: 440px;

   }

   This definition sets the attributes for the textarea control and the text boxes. The "font-size" attribute sets the font size of the text boxes to 1.1em and the "border" attributes control the appearance of the border around the text boxes. The "padding" attribute allows you to adjust the distance between the edges of the text boxes and the text inside the text boxes.

4. Paste this final CSS definition below the code listed in the last step:

   #formDiv textarea {

   background-color:Yellow;

   }

   This defines an additional attribute for the textarea control. It makes its background yellow.

5. Save your HTML document, and open it in a browser. Your form appears and displays the physical characteristics defined in the CSS code.

Tips & Warnings

• Two of the most important label CSS attributes, found in the "label" class are "text-align" and "margin-right." The "text-align" value, when set to "left," aligns the text of all labels to the left. This causes browsers to align the left edges of the labels. Change the value to "right" to align their right edges. The "margin-right" attribute, "10px" in this example, determines the distance between the right side of a label and the left side of the text box next to that label. Adjust these values to achieve the visual layout that looks best to you.

References

• A List Apart: Practical CSS Layout Tips, Tricks & Techniques

Resources

• Tizag: CSS Tutorial -- Introduction