Forms: does your css support your markup or vice versa?

Question

Regarding html forms, a very common markup template:

<form ...> <p> <label>Name:</label> <input .../> </p> <p> <label>Birthdate:</label> <input .../> </p> .. <input type=submit/> </form> 

How many markups (classes, etc.) do you usually provide to provide the most flexible visual form formatting? That is, how much markup do you add to help with css selectors, and do you use generic selectors?

 <form ...> <p class='name'> <label>Name:</label> <input .../> </p> <p class='birthdate'> <label>Birthdate:</label> <input .../> </p> .. <input type=submit/> </form> 

against.

 <form class='person' ...> <p class='name string'> <label>Name:</label> <input .../> </p> <p class='birthdate date'> <label>Birthdate:</label> <input .../> </p> .. <input type=submit/> </form> 

In the second case, adding common types ("date") directly from the database can simplify the consistent formatting of date fields. Grouping packaging (“human”) can also help to show the model from which the fields come. (Or I could use the internal DIV.) However, to increase the reuse of css, I found myself adding extra markup. In some books that I read, I heard that the less markup, the better (and this line can be very gray, although it is true to me). For example, I could well use the markup from one of the previous blocks and added a lot more selectors to the series.

What are your guidelines for determining how important markup is? Or how much does css cost?

In addition, I know that I can choose against the input name, but since this is a nested element, I lose the ability to control formatting from the outer shell ("p"), which is usually where I want this extra control.

Answer 1

I tend to use definition list tags for the styles of my forms.

 <form> <dl> <dt><label for="name">Name:</label></dt> <dd><input name="name" /></dd> <dt><label for="birthdate">Birthdate:</label></dt> <dd><input name="birthdate" /></dd> ... </dl> </form> 

I also use the following CSS:

 FORM DT { clear:both; width:33%; float:left; text-align:right; } FORM DD { float:left; width:66%; margin:0 0 0.5em 0.25em; } 

Further information here: http://www.clagnut.com/blog/241/

This is a lot of markup, but the effect is consistent and effective.

Another acceptable styling method is to use tables. Just think of the form as "interactive tabular data."

Answer 2

I would not use the <p> to group the label and its field, since this is not a paragraph. Unless you have another use for <fieldset> , you can use one for each row. If you have three birthday entries, then the set of fields is fine.

Gavin’s list of definitions is not a bad idea, but it seems like unnecessary markup — you can just style labels and entries in the right width and swim them.

Adding wrapper classes is also perfectly acceptable - remember that you do not need to use them in CSS, they add a semantic layer independently. There may even be microformat , which you can use in some cases.

You can also use the attribute selector to conveniently enter styles:

 input[type="text"], input[type="password"] { border: 1px solid #ccc; background: #fff; } input[type="submit"], input[type="reset"] { border: 1px solid #666; background: #ccc; } 

Answer 3

I am trying to keep html markup to a minimum.

HTML forms are the most difficult, which helps minimize html and css, since it’s very difficult to target all inputs in all browsers without adding classes such as text fields and text fields, etc.

If all of your forms for this site use simple text fields and not something else, the minimal layout approach works just fine. However, controls with a complex markup, such as Telik RAD controls, do not play with a simple mark-up, and often additional markup and classes are required.

These little tricks add a premium, but also make css a lot cleaner and will certainly simplify the style of such elements.

For other common html / css, I try to use as few classes as possible, such as

 .Menu {} .Menu li {} .Menu li a {} 

This type of template can be reused for repeated data, and templates can be created and developed with very little HTML.

Sometimes its avoidable add classes and much more, but I think that if you think about css and html at all, you should get smooth markup.

From site to site, I rarely use CSS. Its so quick and easy stylish styles for everything you wish, redesigning an existing skin for a new site is often not worth IMO.

Mostly with CSS, I usually take the knowledge that I learned from previous sites and apply them to new sites to make coding easier for all browsers :)

Answer 4

Many years later, I came to:

  <fieldset>
   <div>
     <label for = "Whatever"> A text field </label>
     <input type = "text" id = "Whatever" />
   </div>
   <div class = "required">
     <label for = "RequiredField"> A required field </label>
     <input type = "text" id = "RequiredField" />
   </div>
   <div class = "stretch">
     <label for = "LongField"> A long field (stretched across 100% form width) </label>
     <input type = "text" id = "LongField" />
   </div>
   <div class = "cmd">
     <button type = "submit"> Do whatever </button>
   </div>
 <fieldset>

In addition, I have two CSS classes that I can apply:

  fieldset div {
   clear: both;
 }

 fieldset.block label {
   display: block;
   font-weight: bold;  / * labels above fields * /
 }

 fieldset.aligned label: first-child {
   width: 20%;
   float: left;
 }

 fieldset.block .stretch input,
 fieldset.block .stretch textarea,
 fieldset.block .stretch select {
   width: 100%;
 }

 fieldset.aligned .stretch input,
 fieldset.aligned .stretch textarea,
 fieldset.aligned .stretch select {
   width: 79%;  / * leave space for the label * /
 }

Answer 5

Personally, I just do:

 <form> <label for="foo">Foo</label> <input type="text" id="foo" name="foo" /> <br /> <label for="foo2" class="block">Foo 2</label> <textarea id="foo2" name="foo2"></textarea> <br /> 

Then for css it depends on whether I want the element to be inline with it or not.

 form label.block{ display: block; } 

Or you can block + float them, as @DisgruntledGoat wrote. (I really hate extra markup)