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

最新推荐文章于 2021-12-26 09:03:05 发布

xyphf_和派孔明

最新推荐文章于 2021-12-26 09:03:05 发布

阅读量643

点赞数

分类专栏： HTML5 文章标签： html5 表单 input标签提示词标签正则

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/52962862

版权

HTML5 专栏收录该内容

52 篇文章

订阅专栏

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>

URL网址验证表单

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>

搜索框