The Ounce › Style Guide


Inline Form Fields


Inline forms fields can be assembled and dropped into general content pages.

Payment Info

Form intro text. Each Educare school provides quality care and early education to infants, toddlers, preschoolers, and their families.

Donation Method

Submitnavigateright
<form>
  <h2>Payment Info</h2>
  <p>Form intro text. Each Educare school provides quality care and early education to infants, toddlers, preschoolers, and their families.</p>

  <p>
    <label for="first-name">First name</label>
    <input class="input-text" type="text" name="first-name">
  </p>
  <p>  
    <label for="last-name">Last name</label>
    <input class="input-text" type="text" name="last-name">
  </p>
  <p>  
    <label for="email">Email address</label>
    <input class="input-text" type="text" name="email">
  </p>

  <fieldset>
    <legend>Donation Method</legend>
    <ul>
      <li><label><input name="method-1" type="radio" value="Yes">Donation Method One</label></li>
      <li><label><input name="method-2" type="radio" value="No">Donation Method Two</label></li>
      <li><label><input name="method-3" type="radio" value="No">Donation Method Three</label></li>
    </ul>
  </fieldset>

  <p>
    <label for="payment-method">Payment Method</label>
    <select name="payment-method">
      <option value=""selected></option>
      <option value="Visa">Visa</option>
      <option value="Mastercard">Mastercard</option>
      <option value="Discover">Discover</option>
      <option value="AMEX">AMEX</option>
    </select>
  </p>

  <p>
    <label for="payment-notes">Payment Notes</label>
    <textarea name="payment-notes"></textarea>
  </p>

  <p>
    <label for="terms">
      <input id="terms" type="checkbox"> I've read the terms and conditions
    </label>
  </p>

  <a href="#" class="btn">Submit<i class="ss-icon left">navigateright</i></a>
</form>