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>