FLUID-2766: Feature Request: Styles for typical form layouts

Description

Forms typically have multiple rows of right-aligned labels to the left of one or more left-aligned controls. Much HTML and CSS (including our own) seem to use various shenanigans to get the labels to line up nicely with the controls. Sometimes tables are used in weird ways; sometimes <br/> tags are used to add spacing. Sometimes all of the left-side labels are grouped in a single <div> while all of the right-side controls are grouped in a single other <div> (whereas it would seem to make sense that a single left-side label should be grouped with its associated right-side controls) (at the time of writing, I see this in our UIOptions template).

It would be really nice if the FSS had some styles that would make this layout super easy given straightforward, logical markup, such as
<div class="fl-form-row">
<div class="fl-form-row-label">Address:</div>
<div class="fl-form-row-control"><textarea .../></div>
</div>

Comments

• Jacob Farber commented 2009-05-25T14:45:26.000-0400

  FSS already has a very basic mechanism to lay out listed form controls, like:
  <form class="fl-controls-right">
  <ol>
  <li>
  <label class="fl-label" for="xxxxx">Example Label</label>
  <input type="xxxxx" id="xxxxx" />
  </li>
  </ol>
  </form>

  Would look like;

  ------------[label]	[control]-------

  ...and if you used .fl-controls-left, you would see:

  [label]------------	[control]-------

  however for UI Options the markup is in flux, since we're experimenting with best screen reader techniques.

• Jacob Farber commented 2010-03-26T11:55:02.000-0400

  Does the current implementation meet your needs?

• Justin Obara commented 2011-04-26T14:02:54.934-0400

  We have some styles contributed from CollectionSpace, see http://wiki.fluidproject.org/display/fluid/FSS+Contributor+Gallery

• Anastasia Cheetham commented 2014-04-02T16:29:56.666-0400

  We're deprecating FSS.