聊一聊HTML5的表单，话说这些表单你都用过吗？-CSDN博客

1、带加减箭头的数字表单

<form action="">
    <input type="number" name="number" value="" /><br /><br />
    <input type="submit" />
</form>

2、颜色选择器表单

<form action="">
    <input type="color" name="color" value="" /><br /><br />
    <input type="submit" />
</form>

3、进度条表单

<script>
window.onload = function(){
    var oText = document.getElementById("txt1");
    var oSpan = document.getElementById("s1");

    oText.onchange = function(){
        oSpan.innerHTML = this.value;   
    };
};
</script>
<form action="">
    <input id="txt1" type="range" max="80" min="20" step="10" name="range" value="" /> <span id="s1">0</span>
   <br /><br />
    <input type="submit" />
</form>

4、时间日期选择器表单

<form action="">
    <input type="date"  name="date" value="" /> 
   <br /><br />
    <input type="week"  name="week" value="" /> 
   <br /><br />
    <input type="time"  name="time" value="" /> 
   <br /><br />
    <input type="submit" />
</form>

5、邮箱验证表单

<form action="">
    <input type="email"  name="email" value="" /> 
   <br /><br />
    <input type="submit" />
</form>

6、URL网址验证表单

<form action="">
    <input type="url"  name="url" value="" /> 

   <br /><br />
    <input type="submit" />
</form>

7、含有正则表达式的QQ号验证表单

<!-- qq: 5-13位 /^[1-9]\d{4,12}$/  -->
<form action="">
    <input type="text" pattern="[1-9]\d{4,12}" required  name="qq" value="" /> 
   <br /><br />
    <input type="submit" />
</form>

8、含有默认提示文字的表单

<form action="">//novalidate
    <input type="text" pattern="[1-9]\d{4,12}" autofocus placeholder="提示文字！" required  name="qq" value="" /> 
   <br /><br />
    <input type="submit" />
</form>

注意：
novalidate 属性规定当提交表单时不对其进行验证。
如果使用该属性，则表单不会验证表单的输入。
注释：novalidate 属性适用于：，以及以下类型的 标签：text, search, url, telephone, email, password, date pickers, range 以及 color。

9、搜索框

<form action="" novalidate>
    <input type="search" name="search" value="" /> 
   <br /><br />
    <input type="submit" />
</form>