<label for="input__text" >Text Input<input id="input__text" type="text" placeholder="Text Input"  />
</label>
<label for="input__text-required" >Required Text Input<input id="input__text-required" type="text" placeholder="Text Input" required  />
</label>
<label for="input__password" >Password <input id="input__password" type="password" placeholder="Type your Password" />
</label>
<label for="input__webaddress" >Web Address<input id="input__webaddress" type="url" placeholder="http://yoursite.com"  />
</label>
<label for="input__emailaddress" >Email Address<input id="input__emailaddress" type="email" placeholder="name@email.com"  />
</label>
<label for="input__phone" >Phone Number<input id="input__phone" type="tel" placeholder="(999) 999-9999"  />
</label>
<label for="input__search" >Search<input id="input__search" type="search" placeholder="Enter Search Term"  />
</label>
<label for="input__text2" >Number Input<input id="input__text2" type="number" placeholder="Enter a Number"  />
</label>

<label class="error">
   E-Mail Address<span aria-hidden="true">*</span>
  <input id="email" type="email" name="email" value="hey this ain't no email!" required="required" autocomplete="email" aria-invalid="true" aria-describedby="emailError" />
  <small id="emailError" >These credentials do not match our records.</small>
</label>
<label for="input__text4" class="valid" >Valid<input id="input__text4" type="text" placeholder="Text Input"  />
</label>

<div>
  <label for="textarea" >Textarea <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here" ></textarea></label>
</div>

<div class="input-field">
            <label >Select Example<select id="select1">
            <option>Option One</option>
            <option>Option Two</option>
            <option>Option Three</option>
          </select>
        </label>
      </div>
      <div class="input-field">
      <label >Select Example Required<select id="select2" required>
      <option>Option One</option>
      <option>Option Two</option>
      <option>Option Three</option>
    </select>
  </label>
</div>

<fieldset>
  <legend>Radio example</legend>
  <ul class="list" role="list">
    <li>
      <label for="radio1"><input id="radio1" name="radio" type="radio" checked="checked"  />
      <span>Option 1</span></label>
    </li>
    <li>
      <label for="radio2"><input id="radio2" name="radio" type="radio"  />
      <span>Option 2</span></label>
    </li>
    <li>
      <label for="radio3"><input id="radio3" name="radio" type="radio"  />
      <span>Option 3</span></label>
    </li>
    <li>
      <label for="radio4"><input id="radio4" name="radio" type="radio" disabled  />
      <span>Disabled Choice</span></label>
    </li>
    <li>
      <label for="radio5" ><input id="radio5" name="radio" type="radio" checked="checked" />
      <span>Selected Choice</span></label>
    </li>
  </ul>
</fieldset>

<fieldset>
  <legend>Checkbox example</legend>
  <ul class="list" role="list">
    <li>
      <label ><input id="checkbox1" name="checkbox" type="checkbox" checked="checked" />
      <span>Choice A</span></label>
    </li>
    <li>
      <label><input id="checkbox2" name="checkbox" type="checkbox"  />
      <span>Choice B</span></label>
    </li>
    <li>
      <label><input id="checkbox3" name="checkbox" type="checkbox"  />
      <span>Choice C</span></label>
    </li>
    <li>
      <label><input id="checkbox4" name="checkbox" type="checkbox" disabled  />
      <span>Disabled Choice</span></label>
    </li>
    <li>
      <label ><input id="checkbox5" name="checkbox" type="checkbox" checked="checked" disabled />
      <span>Disabled Checked</span></label>
    </li>
  </ul>
</fieldset>

<p>
  <label for="ic">Color input</label>
  <input type="color" id="ic" value="#000000"  />
</p>
<p>
  <label for="in">Number input</label>
  <input type="number" id="in" min="0" max="10" value="5"  />
</p>
<p>
  <label for="ir">Range input</label>
  <input type="range" id="ir" value="10"  />
</p>
<p>
  <label for="idd">Date input</label>
  <input type="date" id="idd" value="1970-01-01"  />
</p>
<p>
  <label for="idm">Month input</label>
  <input type="month" id="idm" value="1970-01"  />
</p>
<p>
  <label for="idw">Week input</label>
  <input type="week" id="idw" value="1970-W01"  />
</p>
<p>
  <label for="idt">Datetime input</label>
  <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"  />
</p>
<p>
  <label for="idtl">Datetime-local input</label>
  <input type="datetime-local" id="idtl" value="1970-01-01T00:00"  />
</p>

<div class="mb-ml">
  <button class="btn">Button Btn</button>
</div>
<div class="mb-ml">
  <button class="btn-danger">Button Danger</button>
</div>
<div class="mb-ml">
  <button class="btn-info">Button Info</button>
</div>
<div class="mb-ml">
  <button class="btn-large">Button Large</button>
</div>
<div class="mb-ml">
  <button class="btn-link">Button Link</button>
</div>
<div class="mb-ml">
  <button class="btn-primary">Button Primary</button>
</div>
<div class="mb-ml">
  <button class="btn-secondary">Button Secondary</button>
</div>
<div class="mb-ml">
  <button class="btn-small">Button Small</button>
</div>
<div class="mb-ml">
  <button class="btn-success">Button Success</button>
</div>
<div class="mb-ml">
  <button class="btn-warning">Button Warning</button>
</div>