H5--新增表单元素&控件&属性&事件

H5网站重构

先简单回顾一下H5新标签:结构性标签、功能性标签

结构性标签:负责web上下文件结构的定义
功能性标签:功能性内容的表达
在这里插入图片描述

表单—新增控件类型

HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容:

接下来依次介绍下H5 新增的表单控件类型,所有案例均用谷歌浏览器展示

1、type=“email”

限制用户输入为邮箱类型(即输入内容必须含有@符号,并且@前后内容不能为空)。email提供了邮箱的完整验证,必须包含@和后缀,如果不满足验证,会阻止表单提交
在这里插入图片描述

注意:iPhone 中的 Safari 浏览器支持 email 输入类型,并通过改变触摸屏键盘来配合它(添加 @ 和 .com 选项)。

2、type=“url”

限制用户输入为网址,即输入内容必须含有"http:",并且后面内容不能为空.提供了网址的合法格式验证。必须包含 http:// 或者 https://
在这里插入图片描述

注意:iPhone 中的 Safari 浏览器支持 url 输入类型,并通过改变触摸屏键盘来配合它(添加 .com 选项)

3、type=“number”

限制用户输入为数字类型,只能输入数字和小数点,不能输入其他字符,并且输入框最右边有上下调节按钮
在这里插入图片描述

注意:iPhone 中的 Safari 浏览器支持 number 输入类型,并通过改变触摸屏键盘来配合它(显示数字)

4、type=“range”

显示为滑动条,会以一个滑块形式表现,包含一定范围内数值输入域
在这里插入图片描述

5、type=“Date Pickers”(日期选择器)

  • date–选取日、月、年
  • month–选取月、年
  • week–选取周和年
  • datetime–选取时间、日、月、年(UTC时间)
  • dateTime-local–选取时间、日、月、年(本地时间)

GMT与UTC知识点普及:

  • GMT,即格林尼治标准时间,也就是世界时。GMT的正午是指当太阳横穿格林尼治**子午线(本初子午线)**时的时间。但由于地球自转不均匀不规则,导致GMT不精确,现在已经不再作为世界标准时间使用。
  • UTC,即协调世界时,UTC现在作为世界标准时间使用,一般认为UTC与GMT基本上等同,误差不超过0.9秒
  • 整个地球分为二十四时区,每个时区都有自己的本地时间。在国际无线电通信场合,为了统一起见,使用一个统一的时间,称为通用协调时(UTC, Universal Time Coordinated)。

6、type=“search”

作用:用于搜索域,比如站点搜索或 Google 搜索
渲染结果:显示为常规的文本域,在输入框输入文本后右边显示“x”,可以将输入的文本清除
在这里插入图片描述

7、type=“color”

颜色选择器,选择颜色的面板

8、type=“tel”

tel并不是来验证手机号码的,因为全球手机号码格式的标准不同。它的目的是能够在移动端打开数字键盘,而数字键盘就限制了用户只能填写数字而不能填写其他字符。(在PC端无法展示)
在这里插入图片描述

9、浏览器兼容

在这里插入图片描述
注释:Opera 对新的输入类型的支持最好。不过目前已经可以在所有主流的浏览器中使用了。即使不被支持,也可以显示为常规的文本域。

表单—新增标签

1、< datalist >< /datalist >

简介:数据列表标签,定义输入框的选项列表,选项列表是通过该元素内的option元素进行创建的。该元素与input元素配合使用,来定义input可能的值。
用法:要把这个datalist元素定义的选项列表绑定到输入框,将input元素的list属性的值设置为datalist元素的id属性值
在这里插入图片描述
兼容问题:
在这里插入图片描述

小结&注意事项:
①绑定形式:通过id指向datalist元素,配合input元素的list属性进行双向绑定
②显示时机:datalist元素类似于选择框,在文本框获得焦点的时候以提示输入的方式显示
③选择方式:当用户要的值不存在选择列表中,就让用户自行填写,如果有存在用户就可以选择
④本质:本质上可以理解为一个ui小部件,用户可以从中检索附加信息

2、< output >< /output >

输出标签,标记定义一些输出类型,计算表单结果。注意:oninput 事件是在用户输入时触发的事件
属性解析
①for 规定一个或多个元素的 id 列表,以空格分隔。这些元素描述了计算中使用的元素与计算结果之间的关系
②name 规定 元素的名称
写法:output不能再写在其他任意位置,只能在form里面才有效果

在这里插入图片描述

3、< optgroup >< /optgroup >

optgruop元素在html4已经存在,在HTML5进行了拓展。
简介:选项组标签,将select元素中的选项进行逻辑分类,在select元素中直接定义,不允许嵌套,既不能进行第二次分组
属性
①disabled:加载时禁用该选项组
②label: 用来定义分组显示的标签名
在这里插入图片描述

4、< fieldset >< /fieldset >

  • 表单元素分组标签,将表单内容的一部分打包,生成一组相关表单字段。
  • 显示:当一组表单元素放到 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。
  • 常与legend 元素配合使用:为 fieldset 元素定义标题
    在这里插入图片描述

表单—新增属性

接下来介绍下H5新增的表单属性:
在这里插入图片描述

1、required属性

  • 约束该表单元素在提交前必须输入值,提交文档时,限制文本框必须输入内容,否则无法提交,即如果未输入将阻止表单提交。
  • 通俗理解:表明该元素是必填项,当提交表单的时候会自动验证该元素的内容是否不为空。

在这里插入图片描述

2、placeholder属性

占位符,当用户还没有输入值的时候,输入型控件可以通过 placeholder 属性向用户显示描性说明或者提示信息。使用 placeholder属性只需要将说明性文字作为该属性值即可。

在这里插入图片描述

3、autofocus属性

在打开页面时使元素自动获取焦点,只有当一个页面是以使用某个控件为主要目的时,才对该控件使用 autofocus 属性。一个页面只能有一个控件有该属性

例如小程序发布评论页面,页面加载完毕后一般应自动聚焦,用户直接输入即可:

在这里插入图片描述
在这里插入图片描述

4、list属性

指定一个datalist作为下拉提示单,输入框通过 list 属性和 datalist 关联起来;value 为选中后输入框的内容(可以不加),label 为 value 的辅助描述性内容。

在这里插入图片描述

5、multiple属性

文件上传多选或多个邮箱地址 ,可以选择多个文件;在email中,可以输入多个邮箱地址,以逗号分隔
在这里插入图片描述

6、pattern属性

规定用于验证 input 域的模式,模式为正则表达式,验证表单元素
在这里插入图片描述

7、autocomplete属性

  • 规定表单是否应该启用自动完成功能,适用于 ,部分输入框和form都可以设置自动提示 off关闭,on开启(默认是on)
  • 自动补全属性,当表单元素设置了自动完成功能后,会记录用户输入过的内容,双击表单元素会显示历史输入。
  • 取值:on:打开 ,off:关闭
    在这里插入图片描述

8、novalidate属性

取消表单验证,规定当提交表单时不对其进行验证,如果使用该属性,则表单不会验证表单的输入。
在这里插入图片描述
作用:通过将novalidate属性放置到form元素上,form元素的原生校验特征就会忽略,这样就可以防止它同你的自己写的JavaScript的校验方法起冲突。

9、formnovalidate 属性

< input > 标签使用该属性,则提交表单时按钮不会执行验证过程
在这里插入图片描述

10、禁用属性:disabled

11、只读属性:readonly(只读文本框): true false

12、长度属性:size=“初始长度”

13、选中属性:selected(默认选中项) 【列表】

14、选中属性:checked (单选按钮选中状态)【单选、复选】

15、输入的最大字符数 :maxlength:type为text或password时

16、指定按钮是否被选中:checked:type为radio或checkbox时

17、setCustomValidity:修改 pattern 校验失败时,默认提示信息

表单—新增事件

H5新增表单事件主要如下
①oninput:当元素中的内容改变时触发
②oninvalid:当验证不通过时触发
在这里插入图片描述

  • 1
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值