网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > html5

html5中常用的表单自带验证功能属性都有那些?

2021/3/21 14:44:02

说到输入类型,大家很快的就会想到input标签。只有input标签才可以规定不同的类型。HTML5恰恰就是在input中的type属性添加了一些新的属性值。这些新的属性值不仅可以反映数据类型的信息,还可以提供一些默认的验证功能。其中,”email”和”url”是两个得到支持最多的类型…

说到输入类型,大家很快的就会想到input标签。只有input标签才可以规定不同的类型。HTML5恰恰就是在input中的type属性添加了一些新的属性值。这些新的属性值不仅可以反映数据类型的信息,还可以提供一些默认的验证功能。其中,”email”和”url”是两个得到支持最多的类型,各浏览器也为它们增加了定制的验证机制,今天我们就来说说那些html5表单自带验证功能的属性。


       html5中新添加的input类型

  email : 电子邮箱文本框,跟普通的没什么区别,当输入不是邮箱的时候,验证通不过。移动端的键盘会有变化

  tel : 电话号码

  url : 网页的URL

  search : 搜索引擎。chrome下输入文字后,会多出一个关闭的X

  range : 特定范围内的数值选择器,min、max、step( 步数 )

  number : 只能包含数字的输入框

  color : 颜色选择器

  datetime : 显示完整日期

  datetime-local : 显示完整日期,不含时区

  time : 显示时间,不含时区

  date : 显示日期

  week : 显示周

  month : 显示月


<form action="http://www.woaidaogu.com">
    <input type="email">
    <input type="tel">
    <input type="url">
    <input type="search">
    <input type="range" min="0" max="10" step="2">
    <input type="number">
    <input type="color">
    <input type="date">
    <input type="datetime">
    <input type="datetime-local">
    <input type="time">
    <input type="month">
    <input type="week">
    <!-- placeholder是让密码输入框拥有默认提示 -->
    <input type="password" placeholder="请输入密码">
    <input type="submit">
</form>

有了这些自带验证功能的属性,我们就不用在写那些冗长的js代码了,对于程序员来说就是福利!


相关资讯

  • html5新增元素document.queryselector属性

    document.queryselector其实也不算是html5的新增元素,它只是继承了html4的属性,今天我们就来说说document.queryselector属性如何使用? 先看一个实例,结合实例分析一下:<!DOCTYPE html><html><head> <meta charset="UTF-8"&a…

    2021/5/9 14:06:38
  • html5身份证照片上传及预览缩略图-附源码

    html5页面上传图片很方便,主要用到了html5的FileReader方法,今天我们就通过身份证照片上传作为例子来说说它的用法。调用FileReader对象的方法FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功…

    2021/3/28 10:52:43
  • 用实例告诉你html5画图功能如何使用?附源码

    在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字。在代码中均给出了注释,在这里特别强调的一点是:使用canvas画图时有时候必须beginPath和colsePath,但有时不需要,为了防止出现问题…

    2021/3/21 14:51:36
  • 实例告诉您HTML5的WEB SQL数据库如何使用?含源码

    Web SQL数据库API实际上未包含在HTML 5规范之中,它是一个独立的规范,它引入了一套使用SQL操作客户端数据库的API。假设你是一名优秀的Web开发人员,那毫无疑问,你对SQL和数据库的相关概念已经很熟悉了,如果你对SQL不熟悉,那在继续阅读本文之前,最好先学习一下SQL相关…

    2021/3/9 22:21:35
  • HTML5如何实现浏览器页面全屏显示及退出全屏的效果?

    在越来越真实的web应用程序中,JavaScript也变得越来越给力.FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态.在线演示Demo: Fullscreen API Example(在此Demo中,可…

    2021/3/9 22:17:42