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>

 

posted @ 2020-06-24 10:32  za_szybko  阅读(197)  评论(0)  编辑  收藏  举报