{% include partials/section_header.html content="Forms" id="forms" %}

<div class="small-section grid">
  <div class="row">

    <div class="xsmall-12 columns">
      <form class="form">
        <label class="label" for="form">
          Input Field
          <input class="text-field" type="text" />
        </label>

        <label for="form">
          Input Field (no classes)
          <input type="text" />
        </label>

        <label class="label" for="form">
          Text Area
          <textarea class="text-area" type="text"></textarea>
        </label>

        <label for="form">
          Text Area (no classes)
          <textarea type="text"></textarea>
        </label>
      </form>

      {% include mono/forms/form_demo_1.html %}
    </div>

    <div class="xsmall-12 columns">
      <form class="form">
        <label class="label" for="form">
          Disabled Text Field
          <input class="text-field disabled" disabled="" type="text" />
        </label>

        <label class="label" for="form">
          Disabled Text Area
          <textarea class="text-area disabled" disabled="" type="text"></textarea>
        </label>

        <label for="form">
          Disabled Text Field (no classes)
          <input disabled="" type="text" />
        </label>

        <label for="form">
          Disabled Text Area (no classes)
          <textarea disabled="" type="text"></textarea>
        </label>
      </form>

      {% include mono/forms/form_demo_2.html %}
    </div>

    <div class="xsmall-12 columns">
      <form class="form">
        <label class="label" for="form">
          Radio Column
        </label>

        <div class="radio-column">
          <label class="radio-label">
            <input class="radio" name="gender" type="radio" value="male" />
            Male
          </label>

          <label class="radio-label">
            <input class="radio" name="gender" type="radio" value="female" />
            Female
          </label>

          <label class="radio-label">
            <input class="radio" name="gender" type="radio" value="other" />
            Other
          </label>
        </div>
      </form>

      {% include mono/forms/form_demo_3.html %}
    </div>

    <div class="xsmall-12 columns">
      <form class="form">
        <label class="label" for="form">
          Radio Row
        </label>

        <div class="radio-row">
          <label class="radio-label">
            <input class="radio" name="gender" type="radio" value="male" />
            Male
          </label>

          <label class="radio-label">
            <input class="radio" name="gender" type="radio" value="female" />
            Female
          </label>

          <label class="radio-label">
            <input class="radio" name="gender" type="radio" value="other" />
            Other
          </label>
        </div>
      </form>

      {% include mono/forms/form_demo_4.html %}
    </div>

    <div class="xsmall-12 columns">
      <form class="form">
        <label class="label" for="form">
          Checkboxes Column
        </label>

        <div class="checkbox-column">
          <label class="checkbox-label">
            <input class="checkbox" type="checkbox" />
            Mario
          </label>

          <label class="checkbox-label">
            <input class="checkbox" type="checkbox" />
            Fox
          </label>

          <label class="checkbox-label">
            <input class="checkbox" type="checkbox" />
            Marth
          </label>

          <label class="checkbox-label">
            <input class="checkbox" type="checkbox" />
            Mega Man
          </label>

          <label class="checkbox-label">
            <input class="checkbox" type="checkbox" />
            Pikachu
          </label>
        </div>
      </form>

      {% include mono/forms/form_demo_7.html %}
    </div>

    <div class="xsmall-12 columns">
      <form class="form">
        <label class="label" for="form">
          Checkboxes Row
        </label>

        <div class="checkbox-row">
          <label class="checkbox-label">
            <input class="checkbox" type="checkbox" />
            Mario
          </label>

          <label class="checkbox-label">
            <input class="checkbox" type="checkbox" />
            Fox
          </label>

          <label class="checkbox-label">
            <input class="checkbox" type="checkbox" />
            Marth
          </label>

          <label class="checkbox-label">
            <input class="checkbox" type="checkbox" />
            Mega Man
          </label>

          <label class="checkbox-label">
            <input class="checkbox" type="checkbox" />
            Pikachu
          </label>
        </div>
      </form>

      {% include mono/forms/form_demo_8.html %}
    </div>

    <div class="xsmall-12 columns">
      <form class="form">
        <fieldset class="fieldset">
          <legend class="legend">
            Fieldset
          </legend>

          <label class="label" for="form">
            Email
            <input class="text-field" type="email" />
          </label>

          <label class="label" for="form">
            Password
            <input class="text-field" type="password" />
          </label>

          <input class="button" type="submit" value="Submit" />
        </fieldset>
      </form>

      {% include mono/forms/form_demo_11.html %}
    </div>

    <div class="xsmall-12 columns">
      <form>
        <fieldset>
          <legend>
            Fieldset (no classes)
          </legend>

          <div class="row">
            <div class="medium-6 xsmall-12 columns">
              <label for="form">
                Email
                <input type="email" />
              </label>

              <label for="form">
                Password
                <input type="password" />
              </label>
            </div>

            <div class="medium-6 xsmall-12 columns">
              <label for="form">
                Address Ln 1
                <input type="email" />
              </label>

              <label for="form">
                Address Ln 2
                <input type="password" />
              </label>
            </div>

            <div class="column">
              <input type="submit" value="Submit" />
            </div>
          </div>

        </fieldset>
      </form>

      {% include mono/forms/form_demo_13.html %}
    </div>
  </div>
</div>