Section 10.5. Tutorial: Styling a Form


10.5. Tutorial: Styling a Form

This tutorial gives you some practice using CSS to organize a form and make it more attractive. If you open chapter_10 form form.html in a Web browser, then youll see it contains a simple form for subscribing to CosmoFarmer.com (Figure 10-11). The form asks several questions and uses a variety of form elements for input, including text boxes, radio buttons , and pull-down menus .

As subscription forms go, it looks fine, but a little bland . In the steps on the following pages, you'll CosmoFarmer-ize the fonts, line up the questions and boxes better, and add a few other improvements.

  1. Open the file form.html in a text editor .

    There's already an external style sheet attached to this page, but you'll add your new styles to an internal style sheet. Start by bringing down the size of the type in the form.

  2. Click between the opening and closing <style> tags, and then add the following style :

     #subForm {     font-size: .8em; } 

    The subscription form has an ID of subForm applied to it, so this style sets the text size for all text between the <form> tags.

    Figure 10-11. HTML's <table> tag is a common way to organize the questions of a form. But you can also use CSS (and a lot less HTML) to make the form's layout clearer and more attractive.

    Time to work on the layout. To better align the form elements, you'll create the appearance of two columns , one for the questions (labels) and another for the answers (form fields).

  3. Add another style to the internal style sheet :

     #subForm .label {     float: left;     width: 230px; } 

    This descendent selector identifies any element with a class of .label within this form. The style sets a width of 230 pixels and floats the element to the left. Remember the float property lets you move elements to one side or the other of a containing block. It has the added benefit of letting you set a width and force elements that follow the style to wrap around it. As a result, when you apply this style to each of the questions in the form, you create an even-width column. But in order to see the effect, you must first apply the class to the appropriate page elements.

  4. In the page's HTML, locate this code <label for=" name "> and add class="label" , so the tag looks like this :

     <label for="name" class="label"> 

    You must do the same for each question in the form, so

  5. Repeat step 5 for the following pieces of HTML code: <label for="email">, <label for="refer">, <label for="comments"> .

    There's one additional question on the form"Rate your apartment farming skills." It isn't inside a label tag, since its purpose is to introduce a series of radio buttons, each of which has its own label. You need to add a <span> tag to this text so you can apply the label style to it.

  6. Find the text Rate your apartment farming skills , and then wrap it in a <span> tag with a class of label , like so :

      <span class="label">  Rate your apartment farming skills  </span>  

    Now the questions appear to be in a single column (Figure 10-12, top). But they'd look better if they stood out more and lined up with the corresponding form fields.

  7. Edit the #subForm .label style you created in step 4, so it looks like this :

     #subForm .label {     float: left;     width: 230px;  margin-right: 10px;     text-align: right;     font-weight: bold;  } 

    Preview the page in a Web browser. The form should look like the bottom image in Figure 10-12.

    There's one last step for these labels. Because they're floated to the left, if the text runs more than one line, the question that follows will also try to wrap around to the right. Fix that by applying the clear property.


    Note: You can see a similar problem illustrated in Figure 7-12. See "Stopping the Float" in Section 7.6.2 for more detail on clearing floats.
  8. Add a clear property to the #subForm .label style :

     #subForm .label {     float: left;     width: 230px;     margin-right: 10px;     text-align: right;     font-weight: bold;  clear: left;  } 

    The form's shaping up, but that Subscribe button looks out of place over at the left edge. You'll align it with the other form elements next .

    Figure 10-12. Sometimes small and subtle changes can make a form more readable. Making the questions on the form bold, and aligning them with their corresponding form elements (bottom figure) immediately improves the look of the form.
  9. Add another style to the internal style sheet .

     input#subscribe {     margin-left: 240px; } 

    The <input> tag that creates this Subscribe button has an ID of subscribe already applied to it, so this style indents the button 240 pixels to match the width and right margin of the #subForm .label style.

    Most browsers let you style buttons in other ways, too, so

  10. Edit the Subscribe button style by adding a background color and font to the style you just created :

     input#subscribe {     margin-left: 240px;  background-color: #CBD893;     font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;  } 

    You can even change the font used in a pull-down menu.

  11. Add a style for the form's select menu :

     select#refer {     font-family: "Century Gothic", "Gill Sans", Arial, sans-serif; } 


    Note: You can style submit buttons and pull-down menus in Internet Explorer, Firefox, and Opera. Safari 2.0, as of this writing, doesn't let you change these basic form elements.

    There! You've got the text labels and Subscribe button looking great, but why stop there? Time to jazz up the form fields. Begin by changing their font and background colors.

  12. Create a new group selector for styling the three text boxes in the form :

     input#name, input#email, textarea#comments {     background-color: #FBEF99;     font-family: "Lucida Console", Monaco, monospace;     font-size: .9em; } 

    This style gives the text boxes a light yellow background color and sets a new size and font for text visitors to type into them. The boxes look a little narrow, and they also appear a little low compared to their labels at right. Fixing these two problems with CSS is a snap:

  13. Edit the style you just created by setting a width, and altering the top margin :

     input#name, input#email, textarea#comments {     background-color: #FBEF99;     font-family: "Lucida Console", Monaco, monospace;     font-size: .9em;  width: 300px;     margin-top: -2px;  } 

    You can make your form easier for your visitors to fill out by highlighting the active form element with the special :focus pseudo-class (Section 9.1). You'll add that in the next step.

  14. At the end of the internal style sheet, add one last style for the pull-down menu and the three text fields :

     input#name:focus, input#email:focus, textarea#comments:focus, select#refer:focus {     background-color: #FDD041; } 

    The :focus pseudo-class works only in Firefox, Safari, and Opera at this writing, but since it doesn't do IE people any harm, adding a :focus style is a fun enhancement.

Preview the page in a Web browser. It should now look like Figure 10-13. You can find a completed version of this tutorial in the chapter_10_finished form folder.

Figure 10-13. Using the :focus pseudo-class, you can make your forms more interactive by highlighting form fields the visitor uses. Here, you can see you're about to type into the Comments field because of its darker background color.



CSS[c] The Missing Manual
Dreamweaver CS3: The Missing Manual
ISBN: 0596510438
EAN: 2147483647
Year: 2007
Pages: 154

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net