博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5系列:HTML5表单
阅读量:6428 次
发布时间:2019-06-23

本文共 2052 字,大约阅读时间需要 6 分钟。

1. input元素新增类型

  url类型

  url类型的input元素是一种用来输入url的文本框,提交时如果该文本框中内容不是url格式,则不允许提交。

  email类型

  email类型的input元素是用来输入email的文本框,具有一个multiple属性允许在文本框中输入一串以逗号分隔的email地址。

  date类型

  date类型的input元素用来输入日期的文本框。

  time类型

  time类型的input元素是用来输入时间的文本框。

  month类型

  month类型的input元素用来输入月份的文本框。

  week类型

  week类型的input元素用来输入周号的文本框。

  number类型

  number类型input元素是用来输入数字的文本框,在提交时会检查其中的内容是否为数字,具有min、max及step属性。

  range类型

  range类型的input元素是只允许输入一段范围内数值的文本框,具有min、max及step属性。

2. input元素新增属性

  autofocus属性

  autofocus属性是一个Boolean值,在页面加载完成后,input自动获取焦点。

  pattern属性

  pattern是元素的验证属性,使用正则表达式验证文本输入框中的内容。

  placeholder属性

  input元素的placeholder属性为占位属性,显示在输入框中的提示信息,当输入框中输入内容时,该提示信息自动消失;当输入框内容为空时,提示信息重新显示。

  required属性

  input元素required属性用于校验输入内容是否为空。

  list属性

  input元素list属性的值为某个datalist元素的id,类似于选择框(<select>),当用户想要设置的值不在选择列表之内时,允许自行输入。

                            

  autocomplete属性

  input元素autocomplete属性用于自动完成功能,autocomplete属性可以指定“on”、“off”值。

                            

  示例中使用datalist元素中数据作为候补输入的数据在文本框中自动显示。

  formnovalidate属性

  input元素formnovalidate属性用于设置在表单中不进行验证。

3. 新增表单元素

3.1 datalist元素

  datalist元素用于附中表单中文本框的数据输入。datalist元素本身是隐藏的,与表单文本框的“list”属性绑定,“list”属性值为datalist元素的ID。

                            

3.2 output元素

  output元素必须从属于某个form,用于在页面中显示各种不同类型表单元素的内容。output元素的“onFormInput”事件,在表单输入框输入内容时触发该事件。

*
=

4. 表单验证

4.1 checkValidity显示验证

  表单中的各元素可以利用pattern与required属性验证元素内容的有效性,每个元素都可以通过checkValidity(),校验本身是否与验证条件匹配。如果一致,返回true,否则返回false。

    
Index

4.2 取消验证

  取消表单验证的两种常用方法:

  (1)利用form元素的novalidate属性,关闭整个表单的验证;

  (2)利用input元素或submit元素的formnovalidate属性,让表单对单个input元素取消验证。

4.3 setCustomValidity自定义错误信息

  在表单与相应规则验证时,由于使用的是系统内置的验证方法,因此在出错提示也是由系统自带的。修改验证出错信息内容调用元素或表单的setCustomValidity()方法。

    
Index

转载于:https://www.cnblogs.com/libingql/p/4438442.html

你可能感兴趣的文章
实验三
查看>>
Vue 项目构建
查看>>
[Ruby on Rails系列]2、开发环境准备:Ruby on Rails开发环境配置
查看>>
在反射中如何调用类中的Setter()AndGetter()方法
查看>>
android studio adb
查看>>
框架源码系列二:手写Spring-IOC和Spring-DI(IOC分析、IOC设计实现、DI分析、DI实现)...
查看>>
asp.net编译 懒人脚本
查看>>
二分答案经典入门题:)
查看>>
为什么你需要将代码迁移到ASP.NET Core 2.0?
查看>>
思杰的雄心——软件定义的工作空间
查看>>
Servlet的多线程和线程安全
查看>>
存储树形的数据表转为Json
查看>>
CAN 总线通信控制芯片SJA1000 的读写
查看>>
oauth授权协议的原理
查看>>
OutputCache说明
查看>>
sdl2.0示例
查看>>
数学 --- 高斯消元 POJ 1830
查看>>
Ejabberd源码解析前奏--集群
查看>>
[ZHUAN]Flask学习记录之Flask-SQLAlchemy
查看>>
【转】Install SmartGit via PPA in Ubuntu 13.10/13.04/12.04/Linux Mint
查看>>