Form

<!-- Wrap an <input> -->
<div class="fm fm-text">
  <input placeholder="Enter some text">
</div>
<!-- Wrap a <textarea> -->
<div class="fm fm-text">
  <textarea placeholder="Enter more text"></textarea>
</div>

<div class="fm fm-search">
  <input type="search" placeholder="Search anything...">
</div>

<!-- A select field -->
<div class="fm fm-select">
  <select placeholder="Select a word">
    <option value="hello">Hello!</option>
    <option value="goodbye">Goodbye!</option>
  </select>
</div>
<!-- A multiple select filed with a default selected option -->
<div class="fm fm-select">
  <select multiple placeholder="Select words">
    <option value="hello" selected="selected">Hello!</option>
    <option value="goodbye">Goodbye!</option>
  </select>
</div>

<!-- A file picker -->
<div class="fm fm-file">
  <input type="file" placeholder="Add a file">
</div>
<!-- A file picker can pick up multiple files with a default initial value -->
<div class="fm fm-file">
  <input type="file" multiple value="luda.min.css" placeholder="Add files">
</div>

<!-- A checkbox without a label -->
<div class="fm fm-check">
  <input type="checkbox">
</div>
<!-- Checkboxes with labels -->
<div class="fm fm-check">
  <label><input type="checkbox">Checkbox one</label>
  <label><input type="checkbox">Checkbox two</label>
</div>

<!-- A radio without a label -->
<div class="fm fm-radio">
  <input type="radio" name="radio_example">
</div>
<!-- Radios with labels -->
<div class="fm fm-radio">
  <label><input type="radio" name="radio_example" value="one">Radio one</label>
  <label><input type="radio" name="radio_example" value="two">Radio two</label>
</div>

<div class="fm fm-range">
  <input type="range">
</div>

<!-- A readonly text field -->
<div class="fm fm-text" data-readonly>
  <input data-readonly value="A readonly text field">
</div>
<!-- A readonly checkbox -->
<div class="fm fm-check" data-readonly>
  <label><input data-readonly checked type="checkbox">A readonly checkbox</label>
</div>
<!-- A readonly select field -->
<div class="fm fm-select" data-readonly>
  <select data-readonly placeholder="Select a word">
    <option selected="selected" value="hello">A readonly select with Hello selected</option>
    <option value="goodbye">Goodbye!</option>
  </select>
</div>

<!-- A disabled search field -->
<div class="fm fm-search" disabled>
  <input disabled value="This search field is disabled">
</div>
<!-- A disabled radio -->
<div class="fm fm-radio" disabled>
  <label><input disabled type="radio">This radio is disabled</label>
</div>
<!-- A disabled file picker -->
<div class="fm fm-file" disabled>
  <input disabled type="file" value="This file picker is disabled">
</div>

<!-- A small checkbox -->
<div class="fm fm-check fm-small">
  <label><input type="checkbox">A small form checkbox</label>
</div>
<!-- A small range slider -->
<div class="fm fm-range fm-small">
  <input type="range">
</div>
<!-- A small search field -->
<div class="fm fm-search fm-small">
  <input placeholder="A small form search">
</div>
<!-- A small textarea -->
<div class="fm fm-text fm-small">
  <textarea placeholder="A small from textarea"></textarea>
</div>

<!-- A large radio -->
<div class="fm fm-radio fm-large">
  <label><input type="radio">A large form radio</label>
</div>
<!-- A large file picker -->
<div class="fm fm-file fm-large">
  <input type="file" placeholder="A large form file">
</div>
<!-- A large text filed -->
<div class="fm fm-text fm-large">
  <input placeholder="A large form text">
</div>
<!-- A large select field -->
<div class="fm fm-select fm-large">
  <select multiple placeholder="A large multiple select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<!-- An inline search field -->
<div class="fm fm-search fm-inline">
  <input placeholder="An inline form search">
</div>
<!-- An inline file picker -->
<div class="fm fm-file fm-inline">
  <input type="file" placeholder="An inline form file">
</div>
<!-- An inline checkbox -->
<div class="fm fm-check fm-inline">
  <label><input type="checkbox">An inline checbox</label>
</div>

<!-- Show hint texts for the text field -->
<div class="fm fm-text" data-hint="Your email will be a secret.">
  <input type="email" placeholder="Please enter your email">
</div>
<!-- Show hint texts for the radios -->
<div class="fm fm-radio" data-hint="Your gender also will be a secret.">
  <label><input type="radio" value="male">Male</label>
  <label><input type="radio" value="female">Female</label>
</div>

<!-- Show error texts for the text field -->
<div class="fm fm-text" data-error="Email cannot be blank!">
  <input type="email" placeholder="Please enter your email">
</div>
<!-- Show error texts for the radios -->
<div class="fm fm-radio" data-error="Please choose your gender!">
  <label><input type="radio" value="male">Male</label>
  <label><input type="radio" value="female">Female</label>
</div>

<label class="fm-label">Fullname</label>
<div class="fm fm-text">
  <input placeholder="Please enter your fullname">
</div>

<label class="fm-label fm-label-required">Fullname</label>
<div class="fm fm-text">
  <input placeholder="Please enter your fullname">
</div>

<label class="fm-label fm-label-small">Fullname</label>
<div class="fm fm-text fm-small">
  <input placeholder="Please enter your fullname">
</div>

<label class="fm-label fm-label-large">Fullname</label>
<div class="fm fm-text fm-large">
  <input placeholder="Please enter your fullname">
</div>