HTML5表单元素的新特性

最新推荐文章于 2024-09-09 17:56:00 发布
最新推荐文章于 2024-09-09 17:56:00 发布
阅读量1.6k 收藏 6
点赞数 5
分类专栏： html基础知识点 文章标签： html5 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mutouafangzi/article/details/77104508
版权

H5表单新特性

表单的新输入类型

  • email：邮箱类型；
    • 作用：判断当前字符串中是否包含 @ 符号；
    • 如果输入内容不不是 email 地址，则不允许提交，并提示错误信息。
  • search： 搜索类型
    • 注意：chrome下输入文字后，会多出一个关闭的X；
    • 如图所示： 这里写图片描述
  • url ：网址类型
    • 作用：判断当前字符串中是否包含 http://；
  • number：数字类型
  • tel：电话号码类型
    • 注意：只在移动端浏览器有效；
  • range：范围类型
    • 作用：适用于应该包含某个范围内数值的输入字段；
  • color：颜色类型
    • color类型会提供出一个颜色选择器，此时想要获取选择的不同颜色，可以通过onchange获得；
//颜色选择三色器练习
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义调色器</title>
    <style>
        #show{
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
    </style>
</head>
<body>
<div id="show">

</div>
红色：<input type="range" onchange="coloMove()" id="red" min="0" max="255" step="1" value="255"><br/>
绿色：<input type="range" onchange="coloMove()" id="green" min="0" max="255" step="1" value="255"><br/>
蓝色：<input type="range" onchange="coloMove()" id="blue" min="0" max="255" step="1" value="255"><br/>

</body>
<script>
//    每次将颜色有变动或者更改的时候，都将变化后的值传递给value上.
    function coloMove() {
        var red = document.getElementById('red').value;
        var green = document.getElementById('green').value;
        var blue = document.getElementById('blue').value;
        var show = document.getElementById('show');
        show.style.backgroundColor = "rgb("+red+","+green+","+blue+")";
    }
</script>
</html>
  • date：日期类型
    • 作用：按照 ISO 8601 编码的日期（包括年，月，日）；
  • month：月份类型
    • 作用：由 ISO 8601 编码的年和月组成的日期；
  • week：星期类型
    • 作用：由 ISO 8601 编码的年和星期数组成的日期；

表单新元素

  • datalist：元素规定输入域的选项列表；
    • input标签定义选项列表，与input标签配合使用该元素，来定义input可能的值；
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

  • 样式如图：这里写图片描述

  • progress：标签表示进度条，用于显示一个任务的完成进度。标签定义运行中的任务进度（进程）；

    • 属性：
      • max规定需要完成的值；
      • value规定进程的当前值；
<progress id="progress" max="100" value="0"></progress>
<script>
var progress = document.getElementById("progress");
var max = progress.max;
var t = setInterval(function(){
var v = progress.value;
if(v == max){
clearInterval(t);
}else{
v++;
progress.value = v;
}
},100);
</script>
  • meter：标签定义度量衡。仅用于已知最大和最小值的度量；
    • 属性
      • high：number 规定被界定为高的值的范围；
      • low：number 规定被界定为低的值的范围
      • max：number 规定范围的最大值
      • min：number 规定范围的最小值；
      • value：number 必需。规定度量的当前值；
  • output：标签定义不同类型的输出，比如脚本的输出；
    • oninput 事件在用户输入时触发。
    • 该事件在 input或 textarea元素的值发生改变时触发。
    • 提示： 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 keygen 和 select元素；

表单新属性

  • placeholder属性：属性提供一种提示，描述输入域所期待的值。
  • autofocus属性：autofocus 属性规定在页面加载时，域自动地获得焦点。
  • multiple属性：属性规定 input 元素中可选择多个值。

表单验证

自动验证属性

这里写图片描述

  • required 属性规定必须在提交之前填写输入域（不能为空）；
    • 可以应用在大多数输入元素上（除了隐藏元素、图片元素按钮上）。在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户这个元素中必须输入内容。
  • pattern 属性的值与指定的正则表达式进行匹配（一般用于验证特定格式）；
    • 对input元素使用该属性，并且将属性值设置为某个格式的正则表达式，在提交时会检查共内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式
  • min 、 max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）；
    • min 、 max 和 step 属性适用于以下类型的 input标签： date pickers 、 number 以及 range 。
    • min属性与max属性，两个属性是数值类型或日期类型的input元素专用属性；
    • step属性，该属性控制input元素中的值增加或减少时的步长。
  • maxlength 属性用于设定允许输入的最大字符个数；
    • maxlength 属性应该叫做限制属性，就是在输入到达限制后不允许再输入；

有效性验证

  • ValidityState 代表了一个元素可以处于的与约束验证相关的有效性状态。
    • valid：其他的约束验证条件都不为 true；
    • valueMissing：该元素有 required 属性，但却没有值；
    • typeMismatch：该元素的值不符合元素类型所要求的格式(当 type 是 email 或
      者 url 时)；
    • patternMismatch ：该元素的值与指定的 pattern 属性不匹配；
    • stepMismatch：该元素的值不符合由 step 属性指定的规则；
    • rangeUnderflow ： 该元素的值小于指定的 min 属性；
    • tooLong：该元素的值的长度超过了HTMLInputElement 或者HTMLTextAreaElement 对象指定的 maxlength 属性中的值；
    • rangeOverflow：该元素的值大于指定的 max 属性；
    • customError：该元素的自定义有效性消息已经通过调用元素的 setCustomValidity() 方法设置成为一个非空字符串；
//一个表单验证的练习
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            text-align: center;
        }
        #inner{
            margin: 10px auto;
            width: 800px;
            height: 400px;
            border: 1px solid red;
        }
        #inner input{
            line-height: 30px;
            margin: 10px auto;
            width: 300px;
        }
        #inner .text{
            display: inline-block;
            text-align: right;
            width: 150px;
        }
        #inner .btn{
            width: 600px;
            height: 50px;

            margin-left: 100px;
            background-color: orange;
            border-radius: 20px;
        }
        #inner .notice{
            display: inline-block;
            width: 300px;
            line-height: 30px;
            text-align: center;
            color: white;
            height: 30px;
            background-color: #777777;
            border: 1px solid;
            border-radius: 10px;
        }
        #inner .err{
            display: inline-block;
            width: 300px;
            line-height: 30px;
            text-align: center;
            color: white;
            height: 30px;
            background-color: red;
            border: 1px solid;
            border-radius: 10px;
        }
        #inner .suc{
            display: inline-block;
            width: 300px;
            line-height: 30px;
            text-align: center;
            color: white;
            height: 30px;
            background-color: lightcoral;
            border: 1px solid;
            border-radius: 10px;
        }
        .hide{
            display: none;
        }
        .show{
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="wrap">
    <h1 id="title1">用户注册页面</h1>
    <form id="inner" action="#">
        <!--label作用是让在 label 元素内点击文本，就会触发此控件。-->
        <label class="text" for="username">用户名：</label>
        <!--autofocus是当页面一加载时就呈现聚焦样式-->
        <input type="text" id="username" autofocus placeholder="请输入用户名" required pattern="^[0-9]{6,12}$">
        <!--required 属性规定必需在提交之前填写输入字段。如果使用该属性，则字段是必填（或必选）的。
        pattern 属性规定用于验证输入字段的模式。-->
        <label for="username" class="hide" id="usernameTip"></label><br/>
        <label class="text" for="password">密码：</label>
        <input type="password" id="password" placeholder="请输入密码" required pattern="^[0-9]{6,12}$">
        <label for="password" class="hide" id="passwordTip">请输入6至12位的数字.</label><br/>
        <label class="text" for="email">电子邮件：</label>
        <input type="email" id="email" placeholder="请输入电子邮件" required>
        <label for="email" class="hide" id="emailTip">请输入你的电子邮件地址.</label><br/>
        <label class="text" for="blog">个人主页：</label>
        <input type="url" id="blog" placeholder="请输入个人主页地址" >
        <label for="blog" class="hide" id="blogTip">请输入你的个人主页(该项可忽略).</label><br/>
        <label class="text" for="age">年龄：</label>
        <input type="number" id="age" placeholder="请输入你的年龄" required min="18" max="50" step="1">
        <label for="username" class="hide" id="ageTip">请输入你的年龄.</label><br/>
        <label class="text" for="birth">出生日期：</label>
        <input type="date" id="birth" placeholder="请输入出生日期">
        <label for="username" class="hide" id="birthTip">请选择你的出生日期.</label><br/>
        <button type="submit" value="注册" class="btn">注册</button>
    </form>
</div>
<script>
    var username = document.getElementById('username');
    var usernameTip = document.getElementById('usernameTip');
    username.onfocus = function () {
        usernameTip.className = 'notice show';
        usernameTip.innerText= '请输入8至16位的英文或数字.';
    }
    username.onblur = function () {
        if(username.validity.valid){
//            用户名验证通过的时候，也是默认的情况
            usernameTip.className = 'suc show';
            usernameTip.innerText = '用户名正确';
        }else if(username.validity.valueMissing){
//            验证填写为空的时候
            usernameTip.className = 'err show';
            usernameTip.innerText = '用户名不能为空';
        }else if(username.validity.patternMismatch){
//            用户名输入不符合要求的时候
            usernameTip.className = 'err show';
            usernameTip.innerText = '用户名输入有误';
        }
    }

    var password = document.getElementById('password');
    var passwordTip = document.getElementById('passwordTip');
    password.onfocus = function () {
        passwordTip.className = 'notice show';
        passwordTip.innerText= '请输入8至16位的英文或数字.';
    }
    password.onblur = function () {
        if(password.validity.valid){

            passwordTip.className = 'suc show';
            passwordTip.innerText = '密码正确';
        }else if(password.validity.valueMissing){

            passwordTip.className = 'err show';
            passwordTip.innerText = '密码不能为空';
        }else if(password.validity.patternMismatch){

            passwordTip.className = 'err show';
            passwordTip.firstChild.nodeValue = '密码输入有误';
        }
    }

    var email = document.getElementById('email');
    var emailTip = document.getElementById('emailTip');
    email.onfocus = function () {
        emailTip.className = 'notice show';
        emailTip.innerText= '请输入8至16位的英文或数字.';
    }
    email.onblur = function () {
        if(email.validity.valid){

            emailTip.className = 'suc show';
            emailTip.innerText = '邮箱正确';
        }else if(email.validity.valueMissing){

            emailTip.className = 'err show';
            emailTip.innerText = '邮箱不能为空';
        }else if(email.validity.typeMismatch){
//            控件值与预期类型不匹配
            emailTip.className = 'err show';
            emailTip.firstChild.nodeValue = '邮箱格式输入有误';
        }
    }

    var blog = document.getElementById('blog');
    var blogTip = document.getElementById('blogTip');
    blog.onfocus = function () {
        blogTip.className = 'notice show';
        blogTip.innerText= '请输入个人主页';
    }
    blog.onblur = function () {
        if(blog.validity.valid){

            blogTip.className = 'suc show';
            blogTip.innerText = '个人网页正确';
        }else if(blog.validity.typeMismatch){
//            控件值与预期类型不匹配
            blogTip.className = 'err show';
            blogTip.firstChild.nodeValue = '个人网页地址输入有误';
        }
    }

    var age = document.getElementById('age');
    var ageTip = document.getElementById('ageTip');
    age.onfocus = function () {
        ageTip.className = 'notice show';
        ageTip.innerText= '请输入8至16位的英文或数字.';
    }
    age.onblur = function () {
        if(age.validity.valid){

            ageTip.className = 'suc show';
            ageTip.innerText = '邮箱正确';
        }else if(age.validity.valueMissing){

            ageTip.className = 'err show';
            ageTip.innerText = '邮箱不能为空';
        }else if(age.validity.rangeUnderflow){
//            控件值与预期类型不匹配
            ageTip.className = 'err show';
            ageTip.firstChild.nodeValue = '年龄太小了';
        }else if(age.validity.rangeOverflow){
//            控件值与预期类型不匹配
            ageTip.className = 'err show';
            ageTip.firstChild.nodeValue = '年龄太大了';
        }
    }

    var birth = document.getElementById('birth');
    var birthTip = document.getElementById('birthTip');
    birth.onfocus = function () {
        birthTip.className = 'notice show';
        birthTip.innerText= '请选择你的出生日期';
    }
    birth.onblur = function () {
        birthTip.className = 'hide';
    }

</script>
</body>
</html>

取消验证

  • JavaScript中可以使用novalidate获取，若存在则是true，反之则是false。
  • 如果提交按钮有多个，为了指定点击某一个提交按钮不必验证表单，可以在相应的按钮上添加formnovalidate属性。也可用JavaScript添加禁用验证的属性。
<form action="#">
    <input id="text" required="" type="text">
    <input value="跳过验证，直接提交" formnovalidate="" type="submit">
</form>
<form action="#" novalidate="">
    <input id="text" required="" type="text">
    <input value="直接提交" type="submit">
</form>

自定义错误信息

  • setCustomValidity()方法来自定义错误信息
    <!DOCTYPE html>  
    <html>  
    <head>  
        <meta charset="UTF-8"/>  
        <title>自定义错误信息示例</title>  
        <script type="text/javascript">  
            var check = function() {  
                var passwd1 = document.forms['testForm'].passwd1;  
                var passwd2 = document.forms['testForm'].passwd2;  
                if(passwd1.value != passwd2.value) {  
                    passwd2.setCustomValidity("密码不一致！");  
                    return false;  
                } else {  
                    passwd2.setCustomValidity("");  
                }  
                var email = document.forms['testForm'].email1;  
                if(!email1.checkValidity()) {  
                    email1.setCustomValidity("请输入正确的E-mail地址！");  
                    return false;  
                }  
                return true;  
            }  
        </script>  
    </head>  
    <body>  
        <form id="testForm" name="testForm" onsubmit="return check();">  
            <label for="pass1">密码:</label><input type="password" name="passwd1"/><br/>  
            <label for="pass2">确认密码:</label><input type="password" name="passwd2"/><br/>  
            <label for="email">E-mail:</label><input type="email" name="email1"/><br/>  
            <button type="submit">提交</button>  
        </form>  
    </body>  
    </html>
木头房子的格子铺
关注
专栏目录
HTML5的表单元素
04-13
HTML5的表单元素
HTML5新增的表单元素和属性实例解析
09-28
HTML5的这些新增表单元素和属性为开发者提供了更丰富的界面组件，使得网页表单不仅仅局限于文本的输入和提交，还可以更加贴合用户的需求和习惯。通过实例演示和解析，可以看到这些新特性在实际应用中是如何发挥作用...
HTML5表单新特性
mengxiang_go的博客
04-24 651
}     HTML5之前已有的input type：         text、password、radio、checkbox、file、submit、reset、button、image、hidden   HTML5新增加的input type：   (1)email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示窗口(可定制内容不能定制样式)    
h5新特性
最新发布
木子七的博客
09-09 440
新增语义化标签 header:整个页面或部分区域的头部 footer:整个页面，或者部分区域的底部 nav:导航 article:文章、帖子、杂志、博客、评论等 section:页面中的某段文字或者文章中的某段文字 aside:侧边栏 main:文档的主要内容,(WHATWG没有语义,IE不支持) hgroup:包裹连续的标题,如文章主标题、副标题的组合(W3C删...
html5表单新特性
ITDragon博客
01-10 4769
html5表单新特性 学习的笔记，记录备忘。 效果图： 代码： form表单 form{width:300px;line-height: 38px;} input{width:180px;height:27px;border-radius: 3px;border:1px solid #ABA9A9;font-size: 14px;p
01 HTML5--新特性之表单
Pony_18的博客
11-24 553
一.HTML5表单新特性   (1)新的input type   (2)新的表单标签   (3)表单标签的新属性  1.新的input type —— 了解，实用性不强   &lt;input type=""&gt;   HTML5之前已有的input type(10个)： text、password、radio、checkbox、file、submit、reset、button、...
重温---HTML5高级---表单新特性
qq_32054169的博客
09-30 289
1.HTML5表单新特性 (1)新的input type (2)新的表单标签 (3)表单标签的新属性 2.html5表单新特性之---新的input type &lt;input type=""&gt; HTML5之前已有的input type:     text,password,radio,checkbox,file,submit,reset,button,image,hidde...
HTML5新表单元素_动力节点Java学院整理
09-28
HTML5作为HTML标准的最新版本，为Web开发者们带来了许多新的特性，其中就包括了新表单元素，这些新元素增强了表单的数据收集能力，并提高了用户体验。本文将对HTML5新增的三种表单元素——、、进行详细介绍，同时也...
html5 input元素新特性_动力节点Java学院整理
09-28
HTML5是Web开发的一个重大升级，它引入了许多新特性，其中对`<input>`元素的扩展极大地增强了表单处理的能力。这些新特性使得开发者能够创建更丰富、更具有交互性的网页，同时也提高了用户体验。以下是对这些新特性...
基于HTML5新特性新规范的表单验证jQuery插件.zip
02-12
这个"基于HTML5新特性新规范的表单验证jQuery插件.zip"文件，显然是一个利用HTML5的新功能并结合jQuery库来增强网页表单验证的工具。在深入探讨之前，我们先了解一下HTML5和jQuery的基本概念。 HTML5是HyperText ...
HTML5的表单新特性
03-09 509
<br />HTML5 Web Forms 2.0是对目前Web表单的全面提升，它在保持了简便易用的特性的同时，增加了许多内置的控件或者控件属性来满足用户的需求，并且同时减少了开发人员的编程。在我看来，HTML5 主要在以下几个方面对目前的Web表单做了改进：新的控件类型 HTML5提供的一系列新的控件将天然的具备类型检查的功能。比如说URL输入框，Email输入框等。<br /><input type="url"></input><br /><input type="email"></input>日期
h5新表单元素
濮家大少
11-26 108
如图： 代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style></style> </head> <body> &...
html5技术特性列表,HTML5表单新特性
weixin_39936134的博客
06-07 136
1.HTML5表单新特性之——新的input typeHTML5之前已有的input type:text、password、radio、checkbox、file、submit、reset、button、image、hiddenHTML5新增的input type:1.Email：邮件输入域，在表单提交时提供简单的邮箱格式验证，并弹出一个提示矿口(可定制内容不能定制样式)2.url:URL地址输入...
HTML5表单新特性探究
HDM1991的专栏
10-16 425
前言在 HTML5 之前，当页面需要用户在一个表单控件中输入 email 地址、数字或者日期时，我们只能写下如下的代码：<input type="text" name="email"> 然后，如果是我们不在上面代码的基础上添加一些额外功能代码的情况下，我们是无法验证用户是否输入了数据、用户输入的数据是否符合格式、当用户没有输入数据或者输入的数据不符合格式时，对用户做出提示的；而且我们也无法给用户提供
HTML5 -01- H5表单新增特性
良之才的专栏
07-07 228
H5主要做什么？主要用来做效果CSS3，做结构H5标签，应用api-定位等js。 1.1什么是HTML5 <!--html:5 +tab--> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docume...
HTML5新增的表单元素
༺隆冬飘落の初霁༻的博客
02-29 535
HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。 email url number range Date pickers (date, month, week, time, datetime, datetime-local) search color Eg: Input 类型 - email email 类型用于应该包含 e-m...
H5 新增表单属性
weixin_58139900的博客
10-04 883
目录 placeholder属性 min、max 和 step 属性 autofocus属性 autocomplete属性 required 属性 pattern 属性 multiple 属性 form 属性 placeholder属性 作用：提供一种输入提示，描述输入域所期待的值 代码示例 <input type="text" placeholder="请输入手机号码"> min、max 和 step 属性 作用： max 属性规定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值