HTML5 表单类型

<style>
  form{
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    margin: 0 auto;
    font-family: "Microsoft Yahei";
    font-size: 20px;
  }
  input{
    display: block;
    width: 100%;
    height: 30px;
    margin: 10px 0;
  }
</style>

<form action="">
    <fieldset>

      <!-- 表单标题 -->
      <legend>表单类型</legend>

      <!-- email -->
      <label for="email">
        email: <input type="email" name="email" id="email">
      </label>

      <!-- url -->
      <label for="url">
        url: <input type="url" name="url" id="url">
      </label>

      <!-- number -->
      <label for="number">
        number: <input type="number" name="number" id="number">
      </label>

      <!-- url -->
      <label for="tel">
        tel: <input type="tel" name="tel" id="tel">
      </label>

      <!-- search -->
      <label for="search">
        search: <input type="search" name="search" id="search">
      </label>

      <!-- color -->
      <label for="color">
        color: <input type="color" name="color" id="color">
      </label>

      <!-- range -->
      <label for="range">
        range: <input type="range" name="range" id="range">
      </label>

      <!-- week -->
      <label for="week">
        week: <input type="week" name="week" id="week">
      </label>

      <!-- month -->
      <label for="month">
        month: <input type="month" name="month" id="month">
      </label>

      <!-- date -->
      <label for="date">
        date: <input type="date" name="date" id="date">
      </label>

      <!-- time -->
      <label for="time">
        time: <input type="time" name="time" id="time">
      </label>

      <input type="submit" value="提交">

   </fieldset>
</form>