Branding & Style Guide

<form>


  <p><label for="email">Email:</label>
    <input type="email" id="email">
  </p>

  <p><label for="url">URL:</label>
    <input type="url" id="url">
  </p>

  <p><label for="tel">Telephone:</label>
    <input type="tel" id="tel">
  </p>

  <p><label for="number">Number:</label>
    <input type="number" id="number" min="0" max="10" step="1" value="5">
  </p>

  <p><label for="search">Search:</label>
    <input type="search" id="search">
  </p>

  <p><label for="date">Date:</label>
    <input type="date" id="date">
  </p>

  <p><label for="datetime">Datetime:</label>
    <input type="datetime" id="datetime">
  </p>

  <p><label for="datetime-local">Datetime-local:</label>
    <input type="datetime-local" id="datetime-local">
  </p>

  <p><label for="time">Time:</label>
    <input type="time" id="time">
  </p>

  <p><label for="color">Color:</label>
    <input type="color" id="color">
  </p>

  <p><label for="datalist">Datalist:</label>
    <input list="browsers" name="browser" type="datalist" id="datalist">
    <datalist id="browsers">
      <option value="Internet Explorer">
      </option>
      <option value="Firefox">
      </option>
      <option value="Chrome">
      </option>
      <option value="Opera">
      </option>
      <option value="Safari">
      </option>
    </datalist>
  </p>

  <p><label for="range">Range:</label>
    <input type="range" id="range" name="points" min="1" max="10">
  </p>

  <p><label for="output">Output:</label>
    <output name="result" id="output">42</output>
  </p>

  <p><label for="progress">Progress:</label>
    <progress id="progress" value="65" max="100"></progress>
  </p>

  <p><label for="meter">Meter:</label>
    <meter id="meter" min="200" max="500" value="350">350 degrees</meter>
  </p>

  <p>
    <button class="button">Button Element</button>
  </p>

  <p>
    <input class="button" type="reset" value="Clear">
  </p>

  <p>
    <input class="button" type="submit" value="Submit">
  </p>

</form>