<div class="field">
  <label class="field-label" for="form-example-01">label</label>
  <input id="form-example-01" type="text" value="value text">
</div>
<div class="field">
  <div>
    <label class="field-label" for="form-example-02">label</label>
  </div>
  <input id="form-example-02" type="text" placeholder="placeholder text">
</div>
<div class="field">
  <div>
    <label class="field-label" for="form-example-03">label</label>
  </div>
  <input id="form-example-03" class="d-block" type="text" placeholder="full width input"></input>
</div>
<div class="field">
  <div>
     <label class="field-label" for="form-example-04">label</label>
   </div>
   <input id="form-example-04" type="text"><span>.textsuffix.com</span>
</div>
<div class="field">
  <div>
    <label class="field-label" for="form-example-11">label</label>
  </div>
  <textarea id="form-example-11" name="" id="" cols="30" rows="10" placeholder="placeholder text"></textarea>
</div>
<div class="field">
  <div>
    <label class="field-label" for="form-example-12">label</label>
  </div>
  <textarea id="form-example-12" class="d-block" cols="60" rows="10" placeholder="full width textarea"></textarea>
</div>

<div class="field">
  <div>
     <label class="field-label" for="form-example-05">label</label>
   </div>
   <label for="form-example-05" class="input-prefix-ex icon icon-link"></label><input id="form-example-05" type="text">
</div>
<div class="field">
  <div>
     <label class="field-label" for="form-example-06">label</label>
   </div>
   <input id="form-example-06" type="text"><span class="input-suffix-ex icon icon-link"></span>
</div>
<div class="field">
  <div>
     <label class="field-label" for="form-example-07">label</label>
  </div>
  <div class="input-prefix-container">
    <span class="input-prefix-in icon icon-link"></span><input id="form-example-07" type="text">
  </div>
</div>
<div class="field">
  <div>
     <label class="field-label" for="form-example-08">label</label>
  </div>
  <div class="input-suffix-container">
    <input id="form-example-08" type="text"><span class="input-suffix-in icon icon-link"></span>
  </div>
</div>
<div class="field">
  <div>
     <label class="field-label" for="form-example-09">label</label>
  </div>
  <label class="input-prefix-ex icon icon-link" for="form-example-09"></label><div class="input-prefix-container">
    <span class="input-prefix-in icon icon-link"></span><input id="form-example-09" type="text">
  </div>
</div>
<div class="field">
  <div>
     <label class="field-label" for="form-example-10">label</label>
  </div>
  <div class="input-suffix-container">
    <input id="form-example-10" type="text"><span class="input-suffix-in icon icon-link"></span>
  </div><span class="input-suffix-ex icon icon-link"></span>
</div>

<div class="field">
  <input type="radio" id="radio1" name="radios" checked> <label class="field-label" for="radio1">label</label>
</div>
<div class="field">
  <input type="radio" id="radio2" name="radios"> <label class="field-label" for="radio2">label</label>
</div>
<div class="field">
  <div>
    <input type="checkbox" id="checkbox1" checked> <label class="field-label" for="checkbox1">label</label>
  </div>
  <div>
    <input type="checkbox" id="checkbox2"> <label class="field-label" for="checkbox2">label</label>
  </div>
</div>
<div>
  <div class="field">
    <input class="visuallyhidden" type="radio" id="radio3" name="radios" checked><label class="field-label" for="radio3"><span class="icon radio-custom visuallyhidden-ie8"></span> custom radio</label>
  </div>
  <div class="field">
    <input class="visuallyhidden" type="radio" id="radio4" name="radios"><label class="field-label" for="radio4"><span class="icon radio-custom visuallyhidden-ie8"></span> custom radio</label>
  </div>
</div>
<div>
  <div class="field">
    <input class="visuallyhidden" type="checkbox" id="checkbox3" checked><label class="field-label" for="checkbox3"><span class="icon checkbox-custom visuallyhidden-ie8"></span> custom checkbox</label>
  </div>
  <div class="field">
    <input class="visuallyhidden" type="checkbox" id="checkbox4"><label class="field-label" for="checkbox4"><span class="icon checkbox-custom visuallyhidden-ie8"></span> custom checkbox</label>
  </div>
</div>

<div class="field">
  <input type="text" id="datepicker"><label class="field-label icon icon-calendar input-suffix-ex" for="datepicker"></label>
</div>

<h2>Simple</h2>
<div class="field">
  <label for="typehead-1">Tags: </label>
  <input class="typeahead-1">
</div>
<h2>Custom Data</h2>
<div class="field">
  <label for="typehead-2">Tags: </label>
  <input class="typeahead-2">
</div>
<h2>Custom Data With Tokens</h2>
<div class="field">
  <input type="hidden" id="typehead3-id">
  <ul class="token-list list-reset">
    <li class="token-list-item">
      <input class="token-list-input typeahead-3" placeholder="type your search here" id="typeahead-1"">
    </li>
  </ul>
</div>

<form action="/file-upload" class="dropzone">
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>

<textarea id="" name="" rows="15"span="80" style="width: 80%" class="tinymce">
  <p>
    This is some example text that you can edit inside the <strong>TinyMCE editor</strong>.
  </p>
  <p>
  Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus.
  </p>
</textarea>