HTML5 form structure

html5-form-structure.php

<form id="123" method="post" action="" form-id="123" class="-form" onsubmit="event.preventDefault();">
  <form-header class="-header">
    <h6>Chapter</h6>
    <h3>Title</h3>
    <p>What to expect in this form</p>
  </form-header>
  <form-fields class="-fields">
    <form-field class="-field -required" data-field="a7993147">
      <label class="-label">
        <span class="-title">Uw naam</span>
        <span class="-instructions">Little pointers</span>
        <span class="-error">Errors happen :)</span>
        <span class="-field">
          <input type="text" id="123_456" name="456" minlength="" maxlength="" placeholder="" required="" value="" class="" data="" />
          <span class="-count"></span>
          <span class="-icon -icon-valid"></span>
          <span class="-icon -icon-alert"></span>
          <span class="-icon -icon-error"></span>
        </span>
      </label>
    </form-field>
  </form-fields>
  <form-message class="-message">
    <p>The message that's shown when form is succesfully submitted.</p>
  </form-message>
  <form-actions class="-actions">
    <button type="submit">
      <span class="-icon -icon-success"></span>
      <span class="-icon -icon-failed"></span>
      <span class="-title">Send</span>
    </button>
  </form-actions>
</form>