Form

Create a form with class form and automatically apply styles to all input, select, textarea, checkbox elements.

You can create rows with the same structure that grid and adding field childs.

Default

HTML


    <form class="form">
      <div class="row">
        <div class="field" data-col="6">
          <label for="firstname">First Name</label>
          <input id="firstname" type="text" placeholder="First Name"/>
        </div>
        <div class="field" data-col="6">
          <label for="lastname">Last Name</label>
          <input id="lastname" type="text" placeholder="Last Name"/>
        </div>
      </div>
      <div class="row">
        <div class="field" data-col="6">
          <label for="email">Email</label>
          <input id="email" type="text" placeholder="Email"/>
        </div>
        <div class="field" data-col="6">
          <label for="options">Select an option</label>
          <select name=options id="options">
            <option value="" disabled selected>Select an option</option>
            <option value="op1">Option 1</option>
            <option value="op2">Option 2</option>
            <option value="op3">Option 3</option>
          </select>
        </div>
      </div>
      <div class="field">
        <label for="message">Message</label>
        <textarea name="message" id="message" cols="30" rows="10" placeholder="This is a placeholder message"></textarea>
      </div>
      <div class="field">
        <input type="checkbox" id="check"/>
        <label for="check">Accept <a href="#form">Terms and Conditions</a></label>
      </div>
      <div class="field">
        <button class="button">Submit Form</button>
      </div>
    </form>

Horizontal

To create horizontal form, simply add data-form="horizontal" to form.

HTML


    <form class="form" data-form="horizontal">
      <div class="field" data-col="3">
        <label for="firstname-hz">First Name</label>
        <input id="firstname-hz" type="text" placeholder="First Name"/>
      </div>
      <div class="field" data-col="3">
        <label for="lastname-hz">Last Name</label>
        <input id="lastname-hz" type="text" placeholder="Last Name"/>
      </div>
      <div class="field" data-col="3">
        <button class="button">Submit Form</button>
      </div>
    </form>