Skip to content
Siolon
Siolon
  • Home
  • About
  • Archives
  • Testimonials
  • Contact
Siolon

Form Layouts With CSS

Chris Poteet, March 20, 2008March 20, 2008

Laying out forms with Cascading Style Sheets (CSS) is a complex topic. In light of many developers doing their first overall CSS layouts they often bail when it comes to laying out forms with CSS and avoiding both tables and line breaks. The code example shows the following:

  1. Well-formed, semantic markup
  2. CSS for layout and presentation
  3. Ensure that the form is both usable (easy to read/use) and presentable
  4. No tables or line breaks

To avoid the line breaks we simply use the CSS “clear” property. This property says: “clear all floated elements to the x side of me”. So for clear: left; means that there should be no floated elements to the left of the element, and I use this in laying out the form.

Here is the CSS, but be sure to check out the full example.


body {
font: 13px "Myriad Pro", serif;
}
fieldset {
width: 300px;
padding: 10px;
}
legend {
font-weight: bold;
}
label, select, textarea, input {
float: left;
font: inherit;
border: 1px solid #ccc;
margin-bottom: 15px;
}
fieldset *:hover, fieldset *:focus {
background-color: #eee;
}
label:hover, legend:hover {
background-color: transparent;
}
label {
width: 75px;
clear: left;
font-weight: bold;
border: none;
}
input[type="submit"] {
clear: left;
margin-top: 10px;
margin-left: 75px;
}
textarea {
width: 200px;
height: 75px;
}

Related Posts

Design Tutorials Usability User Interface CSSformslayoutStandardsWeb Designxhtml

Post navigation

Previous post
Next post

Comments (6)

  1. Ayush Saran says:
    March 21, 2008 at 3:11 pm

    I havent been bothering with tabindex recently, is that something we should all be adding ?

    Reply
  2. Chris Poteet says:
    March 21, 2008 at 4:20 pm

    @Ayush: It’s not something I add personally. If I do want to provide that kind of usability functionality I set the first form element to be the focus on page load with JS.

    Reply
  3. Justin Kohnen says:
    April 10, 2008 at 9:55 pm

    Nice post, helps an aspiring CSS guy like me learn the better way to do things.

    Reply
  4. Chris Poteet says:
    April 11, 2008 at 2:50 am

    @Justin: Thanks! I’d say you’re past the “aspiring” part tough ;)

    Reply
  5. Andy says:
    August 13, 2008 at 7:30 pm

    nice use of css but input[type=”submit”] doesn’t work in ie6 so in a lot of cases this isn’t practical

    Reply
  6. Chris Poteet says:
    August 13, 2008 at 7:36 pm

    @Andy: You’re correct, but I’ve dropped IE6 support. I’m fed up of being fed up.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Search

        ©2023 Siolon | WordPress Theme by SuperbThemes