demo.html:

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Document</title>      <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>  </head>  <body>      <form action="">          <fieldset>              <legend>表单属性</legend>              <label for="">                  email: <input type="email" name="email" >              </label>              <label for="">                  tel: <input type="tel" name="tel" >  <!-- 本身不验证,自己添加验证 -->              </label>              <label for="">                  url: <input type="url" name="url" >              </label>              <label for="">                  number: <input type="number" name="number" step="5"> <!--输入的是步长的整倍数-->              </label>              <label for="">                  search: <input type="search" name="search" >  <!--移动端出现的小键盘右下角是搜索按钮-->              </label>              <label for="">                  range: <input type="range" name="range" value="100" min="0" max="300">  <!--默认最小0 最大100-->              </label>              <label for="">              <label for="">                  color: <input type="color" name="color" >              </label>                  time: <input type="time" name="time" >              </label>              <label for="">                  date: <input type="date" name="date" >              </label>              <label for="">                  month: <input type="month" name="month" >              </label>              <label for="">                  week: <input type="week" name="week" >              </label>              <label for="">                  datetime: <input type="datetime" name="datetime" >              </label>              <input type="submit" value="提交">          </fieldset>      </form>  </body>  </html>  

以上所述是小编给大家介绍的HTML5 新表单类型示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

HTML5 新表单类型示例代码