El formulario cmxform: un formulario accesible, reutilizable y estilizable

Veamos un formulario (que llamaremos cmxform) que he sacado del fantástico blog alistapart que parece muy interesante por tres razones:

• está hecho de una forma muy accesible ya que utiliza las etiquetas de lista <ol> y <li>, las cuales son muy aceptadas por todo tipo de navegadores y también es semánticamente apropiado (cada item de la lista es un campo con su etiqueta)
• separa el código html de la presentación (en CSS) lo cual debe ser hoy en día un requisito imprescindible
• es totalmente estilizable y reutilizable (por la característica previamente mencionada) ya que con CSS le podemos dar todo el aspecto necesario.

A continuación vamos a ver el ejemplo que plantean, utilizando todo tipo de campos (cajas de texto, checkbox, botones radio, etc.).
Esta es la parte HTML:

<fieldset>
  <legend>Delivery Details</legend>
  <ol>
    <li>
      <label for="name">Name<em>*</em></label>
      <input id="name" />
    </li>
    <li>
      <label for="address1">Address<em>*</em></label>
      <input id="address1" />
    </li>
    <li>
      <label for="address2">Address 2</label>
      <input id="address2" />
    </li>
    <li>
      <label for="town-city">Town/City</label>
      <input id="town-city" />
    </li>
    <li>
      <label for="county">County<em>*</em></label>
      <input id="county" />
    </li>
    <li>
      <label for="postcode">Postcode<em>*</em></label>
      <input id="postcode" />
    </li>
    <li>
      <fieldset>
        <legend>Is this address also your invoice »  address?<em>*</em></legend>
        <label>
        <input name="invoice-address" type="radio" />
        Yes</label>
        <label>
        <input name="invoice-address" type="radio" />
        No</label>
    </fieldset>
    </li>
  </ol>
</fieldset>

Y el siguiente bloque es el código CSS que plantean para darle formato.Siempre es interesante formatear el código en dos fases… primero darle un formato básico (sobre todo estructura) y después aplicarle los estilos más visuales (fuentes de letra, colores, etc.).

Lo primero es resetear los estilos que suelen llevar los navegadores predefinidos. Un buen código puede ser este:

body, p, blockquote {
margin: 0;
padding: 0;
}
a img, iframe { border: none; }
/* Headers */
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-size: 100%;
}
/* Lists */
ul, ol, dl, li, dt, dd {
margin: 0;
padding: 0;
}
/* Links */
a, a:link {}
a:visited {}
a:hover {}
a:active {}
/* Forms */
form, fieldset {
margin: 0;
padding: 0;
}
fieldset { border: 1px solid #000; }
legend {
padding: 0;
color: #000;
}
input, textarea, select {
margin: 0;
padding: 1px;
font-size: 100%;
font-family: inherit;
}
select { padding: 0; }

body {
padding: 0 10px;
font: normal 62.5% "Lucida Grande", Helvetica, Verdana, Arial;
}
p {
margin: 10px 0;
}
.sr {
position: absolute;
left: -9999em;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
}

form.cmxform fieldset {
margin-bottom: 10px;
}
form.cmxform legend {
padding: 0 2px;
font-weight: bold;
_margin: 0 -7px; /* IE Win */
}
form.cmxform label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
}
form.cmxform fieldset ol {
margin: 0;
padding: 0;
}
form.cmxform fieldset li {
list-style: none;
padding: 5px;
margin: 0;
}
form.cmxform fieldset fieldset {
border: none;
margin: 3px 0 0;
}
form.cmxform fieldset fieldset legend {
padding: 0 0 5px;
font-weight: normal;
}
form.cmxform fieldset fieldset label {
display: block;
width: auto;
}
form.cmxform em {
font-weight: bold;
font-style: normal;
color: #f00;
}
form.cmxform label {
width: 120px; /* Width of labels */
}
form.cmxform fieldset fieldset label {
margin-left: 123px; /* Width plus 3 (html space) */
}
/**//*/
form.cmxform legend {
display: inline-block;
} /* IE Mac legend fix */