
<hr>

<!-- form type 1 -->
<p class="text-center">Inline textfield placeholder</p>


      <div class="row">
        <div class="large-4 columns">
          <h5>Regular fields</h5>
          <div class="placeholder-container" tabindex="-1">
            <label for="email">E-mail</label>
            <input id="email" placeholder="name@mail.com" title="Your Email" type="text"/>
          </div>
          <div class="placeholder-container" tabindex="-1">
            <label for="username">Username</label>
            <input id="username" placeholder="taeymma" title="Your Username" type="text"/>
          </div>
         
          <h5>Multiple fields same line</h5>
          <div class="placeholder-container" tabindex="-1" style="width: 48%;">
            <label for="email">Email</label>
            <input id="email" placeholder="name@mail.com" title="Your Email" type="text"/>
          </div>
          <div class="placeholder-container" tabindex="-1" class="right" style="width: 48%;">
            <label for="username">Username</label>
            <input id="username" placeholder="taeymma" title="Your Username" type="text"/>
          </div>
        
          <h5>Multiple fields in placeholder</h5>
          <div class="placeholder-container" tabindex="-1">
            <label for="email">Email</label>
            <input id="email" placeholder="name@mail.com" title="Your Email" type="text" class="left" style="width: 70%;"/>
            <select class="placeholder-input-border" style="width: 30%;">
              <option value=1>werk</option>
              <option value=2>thuis</option>
            </select>
          </div>

          <ul class="nodisk list-selected-items">
            <li>
              <small>mail@mail.be <a href=""><i class="fa fa-trash right"></i></a></small></li>
            <li><small>mail@mail.be <a href=""><i class="fa fa-trash right"></i></a></small></li>
          </ul>       
              
      

      <div class="placeholder-container " tabindex="-1">
          <label for="email">Telefoon</label>
          <input id="email" placeholder="+32/0/000.00.00" type="text" class="" style="width:65%;float:left"/>
          <select id="emailtype" class="placeholder-input-border" class="" style="width:25%;float:left">
            <option value=1>thuis</option>
            <option value=2 selected>werk</option>
          </select>
          <a href="#" class="plus-icon-link"><i class="fa fa-plus plus-icon"></i></a>
      </div>

      <div class="placeholder-container placeholder-textarea" tabindex="-1">
          <label for="omschrijving">Omschrijving</label>
          <textarea id="omschrijving" class=""  style="float:left" ></textarea>
      </div>

      <div class="placeholder-container placeholder-checkbox" tabindex="-1" style="width: 35%;">
          <input type="checkbox" id="chk" checked />
          <label class="placeholder-checkbox-label" for="chk">Selecteer mij</label>
      </div>


<!-- + error -->

      <div class="placeholder-container error" tabindex="-1">
          <label for="email">Telefoon</label>
          <input id="email" placeholder="+32/0/000.00.00" type="text" class="" style="width:65%;float:left"/>
          <select id="emailtype" class="placeholder-input-border" class="" style="width:25%;float:left">
            <option value=1>thuis</option>
            <option value=2 selected>werk</option>
          </select>
          <a href="#" class="plus-icon-link"><i class="fa fa-plus plus-icon"></i></a>
      </div>

   <small class="error" style="margin-top:-10px">Gelieve bovenstaand veld correct in te vullen</small>

    </div>
  </div>




<form>

  <div class="row">
    <div class="large-12">
      <label>Naam
        <input type="text" placeholder="naam en voornaam" />
      </label>
    </div>
  </div>



  <div class="row">
    <div class="large-12 ">
        <input type="text" placeholder="naam" class="error" />
        <small class="error">Gelieve bovenstaand veld correct in te vullen</small>
        <input type="text" placeholder="voornaam" />
        <input type="text" placeholder="straat" />
        <input type="text" placeholder="gemeente" name="name" aria-describedby="nameHelpText">
        <p id="nameHelpText">Geef uw postcode of gemeente in</p>
    </div>
  </div>

 
  <div class="row">
    <div class="large-12 columns">
      



<div class="row">
     
    <div class="large-4 medium-4">
        <input type="text" placeholder="telefoonnummer" />
        <p id="nameHelpText">vb 000 00 00 00</p>
    </div>            

    <div class="large-4 medium-4">
        <input type="text" placeholder="postcode" />
    </div>

    <div class="large-4 medium-4">
        <input type="text" placeholder="postcode" />
    </div>
                     
</div>




  <div class="row">
    <div class="large-12 columns">
      <label class="inline">Select Box
        <select>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </label>
    </div>
  </div>




  <div class="row">

    <div class="large-6 columns">
      <label>Label bij radio</label>
      <input type="radio" name="" value="" id="radio1"><label for="radio1">Radio 1</label>
      <input type="radio" name="" value="" id="radio2"><label for="radio2">Radio 2</label>
    </div>

    <div class="large-6 columns">
      <label>Label bij checkbox</label>
      <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
      <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
    </div>

  </div>


  <div class="row">

    <div class="large-6 columns">
      <input type="radio" name="" value="" id="radio3"><label for="radio3">Radio 3</label><br>
      <input type="radio" name="" value="" id="radio4"><label for="radio4">Radio 4</label><br>
    </div>

    <div class="large-6 columns">
      <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label><br>
      <input id="checkbox4" type="checkbox"><label for="checkbox4">Checkbox 4</label><br>
    </div>

  </div>



  <div class="row">
    <div class="large-12 columns">
      <label>Textarea Label
        <textarea placeholder="omschrijving"></textarea>
      </label>
    </div>
  </div>



<div class="row">
   <div class="large-12 columns">
      <form>
        <fieldset>
        <legend>Fieldset Legend</legend>
          <label><!--Naam -->
          <input type="text" placeholder="Naam...">
          </label>
          <label>
          <input type="text" placeholder="Voornaam...">
          </label>
        </fieldset>
      </form>
    </div>
</div>



<div class="switch small">
  <input id="exampleCheckboxSwitch" type="checkbox">
  <label for="exampleCheckboxSwitch"></label>
</div> 


<!-- Using radio buttons – each switch turns off the other two -->

<div class="switch small">
  <input id="exampleRadioSwitch1" type="radio" checked name="testGroup">
  <label for="exampleRadioSwitch1"></label>
</div> 



<label id="ageLabel">Slider</label>
<div class="range-slider" data-slider>
  <span class="range-slider-handle" role="slider" aria-labelledby="ageLabel" aria-describedby="ageHelpText"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>



<a href="#" class="button [tiny small large]">Default Button</a>

<a href="#" class="button disabled [tiny small large]">Disabled Button</a>

</form>
<!-- end form type 1 -->




