Semantic HTML forms (2)

Earlier this week I wrote about (un)semantic HTML forms. I think I'll go for a definition list for the fields. The HTML is more semantic this way. I'll use the definition title for the form label and the definition data for the form control. The remark and the error div will go inside the definition data:

<dt class="required error"><label for="surname">Surname</label></dt>
<dd class="text">
  <input name="surname" id="surname" maxlength="50" type="text"/>
  <div class="remark">Optional remark for this field</div>
  <div class="error">Text in case of an error</div>
</dd>

It's easy to get the label left of the control. I don't know why I was using floating labels all the time. Absolute and relative positioning is much easier:

form dt {
  position: absolute;
  z-index: 2;
}

form dd {
  position: relative;
  padding-left: 100px;
}

I'm unable to use one class for both the label and the control. Or as you might like: too bad that IE doesn't support the adjacent selector (example: form dt.error + dd). This means that I need to put the class in both tags (I might use Javascript for that) or simply don't care too much about IE.

Tags:

• HTML
• Forms
• Semantic
• Definition list