Semantic markup for forms

README.md

• Submitting a form should not require JavaScript
• All inputs should have corresponding <label>s
  • Association a <label> with a field
    • If the label is a sibling of the field, the for attribute of the <label> must match the id attribute of the field
    • If the label is the parent of the field, the for attribute is unnecessary
  • Placement of the <label>
    • a sibling relationship is usually appropriate and enables simple styling with the <label> above or to the left of the field
    • a parent relationship works well for choices because specifying an id for each is less valuable. styling with the label to the right of the field works well in this case
• Inputs providing a list of choices (like checkboxes, and radio buttons) should be grouped by a <fieldset> and labeled by its <legend>

example.html

<form method="post" action="#">
  <fieldset>
    <legend>Legend</legend>
    <ul class="fields">
      <li>
        <label for="field-1">Field 1</label>
        <input type="text" id="field-1" name="field-1" />
      </li>
      <li>
        <label for="field-2">Email</label>
        <input type="email" id="field-2" name="field-2" required />
        <label for="field-2" class="validation-error">Email is required</label>
      </li>
      <li>
        <fieldset>
          <legend>Radio Buttons</legend>
          <ul class="choices">
            <li>
              <label>
                <input type="radio" name="choose-from-group-1" value="1" /> Choice 1
              </label>
            </li>
            <li>
              <label>
                <input type="radio" name="choose-from-group-2" value="1" /> Choice 2
              </label>
            </li>
          </ul>
        </fieldset>
      </li>
      <li>
        <fieldset>
          <legend>Checkboxes</legend>
          <ul class="choices">
            <li>
              <label>
                <input type="checkbox" name="choose-multiple-1" value="1" /> Choice 1
              </label>
            </li>
            <li>
              <label>
                <input type="checkbox" name="choose-multiple-2" value="1" /> Choice 2
              </label>
            </li>
          </ul>
        </fieldset>
      </li>
      <li>
        <ol class="actions">
          <li>
            <input type="submit" value="Update Resource" />
          </li>
          <li>
            <a href="path/to/previous/page">Cancel</a>
          </li>
        </ol>
      </li>
    </ul>
  </fieldset>
</form>

form.scss

$validation-error-radius: 4px !default;
$form-left-gutter-width: 93px !default;

$text-white: #fff !default;
$text-black: #000 !default;
$error-red: #f00 !default;

.form {
  font-variant: small-caps;
  color: $text-white;
  padding: 3px;
}

fieldset {
  margin: 0 0 5px;
  opacity: 1;
}

legend {
  font-size: 1.5em;
}

.fields {
  list-style-type: none;
  margin: 0;

  li {
    margin-bottom: 10px;
  }

  > li  > label {
    &:after {
      content: ':';
    }

    &.validation-error:after {
      content: '';
    }
  }

  label {
    width: $label-gutter;
    display: inline-block;
    vertical-align: top;

    &.validation-error {
      border-radius: $validation-error-radius;
      width: auto;
      margin-left: $form-left-gutter-width;
      padding: 3px 3px 3px 20px;
      margin-top: 3px;
      color: $text-white;
      display: block;
      border: 0;
      background: $error-red url('/resources/thirdparty/travi-styles/dist/img/icons/ui-icon-ffffff-alert.png') no-repeat 3px 2px;
    }
  }


  button {
    margin-left: $form-left-gutter-width;
  }

  fieldset {
    border: 0;
    padding: 0;
    margin: 3px 0 10px;

    .choices {
      margin-left: $form-left-gutter-width;
    }

    li {
      list-style-type: none;
    }

    label {
      padding: 0;
      width: auto;

      &.ui-state-error {
        padding-right: 200px;
        vertical-align: top;
      }
    }

    legend {
      margin: 0;
      padding: 0 0 5px;
      font-weight: normal;
      font-size: 1em;

      &:after {
        content: ':';
      }
    }
  }

  .notearea {
    display: inline;
    padding-left: 0;
  }

  .submitButton {
    margin-left: 94px;
    clear: both;
    display: block;
  }
}

form ol.actions {
  margin: 20px 0;
}