Info

Structure
=========

Form
  Fields
    Elements
      Label (optional but most common)
      Element
        Label (optional in case of a a checkbox or radio)
          Input Checkbox/Radio
        Input (if the label is outside "Element")
  Actions
    Action
      Input Submit
    Action (optional)
      Button (in case multiple actions, manageable via javascript)
      

Explanation
===========

This gives for the most malleable form. It's quite HTML-heavy as you can see,
but it makes almost anything possible. Ideally, an ID is set on every element
and therefore facilitates styling specific cases for specific fields.

Since you're building a "view gem", I'd advise using such a structure since it
should please everyone. It's also structurally sound and cross-browser. The
standard HTML elements such as fieldset and legend are hard to style in certain
browsers and are therefore avoided.

proper form

<form action="#" method="post" id="loginForm">
  <div id="loginFields" class="fields">
    <div id="loginElements" class="elements">
      <label for="login">Login:</label>
      <div id="loginElement" class="element">
        <input type="text" name="login" value="" id="login" />
      </div>
    </div>
    <div id="passwordElements" class="elements">
      <label for="password">Password:</label>
      <div id="passwordElement" class="element">
        <input type="text" name="password" value="" id="password" />
      </div>
    </div>
    <div id="loginActions" class="actions">
      <div id="loginAction" class="action">
        <input type="submit" name="loginSubmit" value="Log In" id="loginSubmit" />
      </div>
      <div id="forgotToggleAction" class="action">
        <a href="#" id="forgotToggle">Forgot password</a>
      </div>
    </div>
  </div>
</form>

<form action="#" method="post" id="forgotForm">
  <div id="forgotFields" class="fields">
    <div id="forgotLoginElements" class="elements">
      <label for="forgotLogin">Login:</label>
      <div id="forgotLoginElement" class="element">
        <input type="text" name="forgotLogin" value="" id="forgotLogin" />
      </div>
    </div>
    <div id="forgotLoginActions" class="actions">
      <div id="forgotLoginAction" class="action">
        <input type="submit" name="forgotLoginSubmit" value="Reset Password" id="forgotLoginSubmit" />
      </div>
    </div>
  </div>
</form>