HTML5提供网站制作的表单验证属性_优品建站

HTML5提供网站制作的表单验证属性

  HTML5为网站制作时的表单验证提供了极大的方便,在验证表单的方式上显得更加灵活。表单验证,首先会基于前面讲解的表单类型的规则进行验证;其次是为表单元素提供了一些用于辅助表单验证的属性。
一. required属性
  一旦在某个表单元素标签中添加了required属性,则该表单元素的值不能为空,否则无法提交表单。以文本域为例,只需要添加required属性即可。使用方法如下。
  <input type="text" id="uname" name="uname" placeholder="请输入用户名" required>
  如果该文本域为空,则无法提交。required属性可用于大多数输入或选择元素,隐藏的元素除外。
二. pattern属性
  pattern属性用于为input元素定义一个验证模式。该属性值是一个正则表达式,提交时,会检查输入的内容是否符合给定的格式,如果输入内容不符合格式,则不能提交。使用方法如下。
  <input type="text" id="code" name="code" value="" placeholder="6位邮政编码" pattern="[0-9]{6}">
  使用pattern属性验证表单非常灵活。例如,前面讲到的email类型的input元素,使用pattern属性完全可以实现相同的验证功能。
三. min、max和step属性
  min、max和step属性专门用于指定针对数字或日期限制。min属性表示允许的最小值;max属性表示允许的最大值;step属性表示合法数据的间隔步长。使用方法如下。
  <input type="range" name="volume" id="volume" min="0" max="1" step="0.2">
  在该HTML代码中,最小值是0,最大值是1,步长为0.2,合法的取值有0、0.2、0.4、0.6、0.8和1。
四. novalidate属性
  novalidate属性用于指定表单或表单内的元素在提交时不进行验证。如果在<form>标签中应用novalidate属性,则表单中的所有元素在提交时都不再验证。使用方法如下。
<form id="form1" name="form1" method="post" novalidate="novalidate">
   <input type="email" id="umail" name="umail" placeholder="请输入电子邮箱">
   <input type="submit" value="提交">
</form>
  则提交该表单时,不会对表单中的表单元素进行验证。
  实战 验证网页中的表单元素
  最终文件:最终文件\第5章\5-5-4.html 视频:视频\第5章\5-5-4.mp4
  01 打开页面“源文件\第5章\5-5-4.html”,可以看到页面效果,如图5-50所示。切换到代码视图,可以看到页面中表单部分的HTML代码,如图5-51所示。

图5-50 打开页面
图5-51 表单HTML代码
  02 在“姓名”文字后的<input>标签中添加required属性设置,如图5-52所示。设置该表单元素为必填项,保存页面,在Chrome浏览器中预览页面,如果没有在文本域中填写内容,直接单击“提交”按钮,将显示错误提示,如图5-53所示。
图5-52 添加必填属性
图5-53 弹出验证提示信息
  03 返回网页HTML代码中,在“电话”文字后的<input>标签中添加pattern属性设置,如图5-54所示。设置该表单元素中填写的内容必须为11位的数字,保存页面,在Chrome浏览器中预览页面,当在电话表单元素中填充的并非11位数字时,单击“提交”按钮,将显示错误提示,如图5-55所示。
图5-54 添加属性设置
图5-55 弹出验证提示信息

  • 网站制作报价单模板适用多个行业(最新版)
    网站制作报价免费模板下载,可以应用于多个行业,也可以根据客户需求进行定制,内容详细,报价清晰明确,直接复制即可使用。
  • bootstrap网站制作案例实训——开发电商网站特效
    本案例使用Bootstrap进行网站制作的网格系统进行布局,其中设置了一些电商网站经常出现的动画效果。
  • 网站制作报价预算的明细报表下载,免费使用
    本文为大家提供网站制作报价预算的明细报表,内容包括网站制作原报价价格、根据客户要求进行修改、网站制作调整后报价,免费下载。
  • 苏州网站制作报价,苏州网站建设价格
    苏州网站建立几钱,苏州网站制造的价钱规范,真的很重要、很迫切需求吗?当你散步市场时,你发现同一件商品在每一个摊位的报价都不同时,你能否在犹疑?这时你就是客户,你弄不分明终究花几钱购置该商品才是最合算,由于该市场没有标准。
  • 网站制作报价明细模板免费下载
    本文详细介绍网站设计的报价,网站内容的报价,网站功能模块的报价,网站报价的注意事项。
  • 常见企业网站制作报价单模板下载
    本文提供的是常见的企业网站制作报价模板,适用于大中小多种不同行业的企业,仅供大家参考学习,可以在此基础上根据实际情况进行修改。
  • 网站制作报价是根据什么标准来定的
    网站制作报价依据标准有哪些:1. 域名注册和空间出租;2.网站建设费用;3.网站后台开发费用;4. 网站后期维护费用。
  • 网站制作与设计及网站制作报价单
    本文详细的介绍了手机网站制作报价明细和WAP网站制作报价明细,制作的页面价格、数量、合计价格等,可以直接拿来使用,也可以根据自己的需求进行简单的修改。
  • 网站制作的报价、框架、流程、人员安排及进度表
    本文将从多个角度为大家介绍网站制作的流程及报价,具体到了每一步的价格及工作周期,即使您无任何网站制作经验,看过此篇文章后对网站的报价和制作流程都会有详细的了解。
  • 四种不同等级的网站制作报价费用一览表
    本文为大家介绍几款不同等级的网站制作报价费用表供大家参考学习。
  • 网站制作 服务

    免费网站制作报价,免费优化,1对1服务,个性化定制服务

    pc和wap网站制作

    多年建站经验,上千个成功案例,
    为您提供一站式服务

    网站维护改版

    大厂经验工程师对现有网站进行
    改版,修复,维护。

    小程序制作

    微信小程序,支付宝小程序,
    百度小程序

    响应式网页设计

    响应式网页设计可以与多种设备兼容,
    如智能手机,平板电脑和PC