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

本文共 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

你可能感兴趣的文章
css3和jquery实现的可折叠导航菜单(适合手机网页)
查看>>
POJ 1696 Space Ant(点积的应用)
查看>>
storyboard ID
查看>>
怎样用Google APIs和Google的应用系统进行集成(1)----Google APIs简介
查看>>
Leetcode: Number of Connected Components in an Undirected Graph
查看>>
Leetcode: Maximum Size Subarray Sum Equals k
查看>>
C#语言实现ArcGIS数据源重置之Set Data Source功能
查看>>
Codeforces Round #344 (Div. 2) A. Interview 水题
查看>>
Premiere Pro & After Effects插件开发调试方法
查看>>
墨西哥短暂生活杂谈
查看>>
第四篇:R语言数据可视化之折线图、堆积图、堆积面积图
查看>>
异步编程之Javascript Promises 规范介绍
查看>>
EnumRemarkAttribute,获取属性值
查看>>
GCC扩展(转--对看kernel代码有帮助
查看>>
MVC3中使用RadioButtonFor()
查看>>
单元测试的概念
查看>>
Android特效 五种Toast详解
查看>>
phpcms(4) V9 栏目管理
查看>>
php多进程pcntl学习(采集新浪微博)
查看>>
[转]ListView学习笔记(一)——缓存机制
查看>>