Semantic HTML forms

I wrote some HTML for a database application. When I view the source of a generated page I've got the feeling it is somewhat unsemantic. Is it? Here's the main structure:

<form action="action.do" class="edit error">
  <h2>Edit itemname</h2>

  <ul>
    <!-- fields -->
  </ul>

  <div class="buttons">
    <input type="submit" value="OK"/>
    <input type="button" value="Cancel" onClick="doCancel()"/>
  </div>
</form>

The ul allows me to put each form row in a li. It also allows me to keep the <div class="buttons"> relatively close the the form by setting the overflow to auto for the ul.

Since the cancel button needs Javascript to work I think I'll add it to the form dynamically using Javascript. For simple single pages forms it'll go to the previous page.

Here's how the fields would look like:

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

This is a bit of a div fest. I could leave out the <div class="label"> you might think. Too bad that in case of a group of radio buttons or checkboxes I don't want to have a label tag in it. So, is this semantic or isn't it?

Update: see Semantic HTML forms (2)

Tags:

• HTML
• Forms
• Semantic