HTML5新增表单控件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5新增表单控件</title>
</head>

<body>
      <form action="http://127.0.0.1/index.php">
         <input type="text" id="text" placeholder="请输入4~16个字符" name="user" pattern="\d{1,5}" required />
              <input type="submit" value="提交" />
            <!-- 两个input提交不同的路径 -->
        <input type="submit" value="保存至草稿箱" formaction=http://127.0.0.2 formnovalidate />
       </form>
        <form>
            <input type="email" />  ·邮箱
            <input type="submit" value="提交" />
          </form>
        <form>
            <input type="tel" />  ·电话号码
            <input type="submit" value="提交" />
          </form>
        <form>
            <input type="url" />  ·网址
            <input type="submit" value="提交" />
          </form>
        <form>
            <input type="search" />  ·搜索引擎
            <input type="submit" value="提交" />
          </form>
        <form>
            <input type="range" step="2" min="0" max="10" value="2" />  ·特定范围内的数值选择器
            <input type="submit" value="提交" />
          </form>
        <form>
            <input type="number" />  ·只能包含数字的输入框
            <input type="submit" value="提交" />
          </form>
        <form>
            <input type="color" />  ·颜色选择器
            <input type="submit" value="提交" />
          </form>
        <form>
            <input type="date" />  ·显示日期
            <input type="submit" value="提交" />
          </form>
        <form>
            <input type="time" />  ·显示时间,不含时区
            <input type="submit" value="提交" />
          </form>  
        <form>
            <input type="datetime-local" />  ·显示完整日期 不含时区
            <input type="submit" value="提交" />
          </form>
        <form>
            <input type="date" />  ·显示周
            <input type="submit" value="提交" />
          </form>
        <form>
            <input type="month" />  ·显示月
            <input type="submit" value="提交" />
          </form>
        <form>
            <input placeholder="请输入4~16个字符" />  ·输入框提示信息
            <input type="submit" value="提交" />
          </form> 
        <form>
            <input name="a" autocomplete="off" />  ·不保存用户输入值
            <input type="submit" value="提交" />
          </form>
        <form>
            <input autofocus="autofocus" />  ·自动聚焦
            <input type="submit" value="提交" />
          </form>
        <form>
            <input required="required" />  ·必须填
            <input type="submit" value="提交" />
          </form>
        <form>
            <input pattern="\d{1,5}" />  ·正则验证,1-5位数字 ----了解
            <input type="submit" value="提交" />
         </form> 
</body>

</html>

 

HTML5新增表单控件

上一篇:可编辑的el-table表格,结合input输入,upload文件上传的表格


下一篇:html 图像提交