<form>

<fieldset>
  <div><label>Text input</label> <input type="text"></div>
  <div><label>Text input with placeholder</label> <input type="text" placeholder="I'm placeholder text"></div>
  <div><label>Readonly input</label> <input type="text" value="Read only text input" readonly></div>
  <div><label>Disabled input</label> <input type="text" value="Disabled text input" disabled></div>
  <div><label>Required input <span class="required">*</span></label> <input type="text" required></div>
  <div><label>Email input</label> <input type="email"></div>
  <div><label>Search input</label> <input type="search"></div>
  <div><label>Speech recognition input</label> <input type="text" id="speech" name="speech" x-webkit-speech=""></div>
  <div><label>Tel input</label> <input type="tel"></div>
  <div><label>Phone (International)</label> <input name="field_country_code" maxlength="3" /> - <input name="field_city_code" maxlength="4" /> - <input name="field_phone_int" maxlength="8" /></div>
  <div><label>URL input</label> <input type="url" placeholder="http://"></div>
  <div><label>Password input</label> <input type="password" value="password"></div>
  <div><label>Select field</label> <select><option>Option 01</option><option>Option 02</option></select></div>
  <div><label>Multiple select field</label><select multiple size="5"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option><option>Option 6</option><option>Option 7</option><option>Option 8</option><option>Option 9</option><option>Option 10</option></select></div>
  <div><label>Radio input</label> <input type="radio" name="rad"></div>
  <div><label>Checkbox input</label> <input type="checkbox"></div>
  <div><label><input type="radio" name="rad"> Radio input</label></div>
  <div><label><input type="checkbox"> Checkbox input</label></div>
  <div><label>File input</label> <input type="file"></div>
  <div><label>Textarea</label> <textarea cols="30" rows="5" >Textarea text</textarea></div>
  <div><label>Color input</label> <input type="color" value="#000000"></div>
  <div><label>Number input</label> <input type="number" value="5" min="0" max="10"></div>
  <div><label>Range input</label> <input type="range" id="range" value="0" min="0" max="100"> <output for="range">0</output> 
  <script>
    if (document.querySelector) {
      document.querySelector('#range').onchange = function(e) {
        e.target.nextElementSibling.innerText = e.target.value;
      }
    }
  </script>
  </div>
  <div><label>Date input</label> <input type="date"></div>
  <div><label>Month input</label> <input type="month"></div>
  <div><label>Week input</label> <input type="week"></div>
  <div><label>Time input</label> <input type="time"></div>
  <div><label>Datetime input</label> <input type="datetime"></div>
  <div><label>Datetime-local input</label> <input type="datetime-local"></div>
</fieldset>

</form>