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

红太狼 2023-10-10 09:55 46阅读 0赞

# H5网站重构 #

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

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

# 表单—新增控件类型 #

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

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

### 1、type=“email” ###

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

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

### 2、type=“url” ###

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

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

### 3、type=“number” ###

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

> 注意：iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）

### 4、type=“range” ###

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

### 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”，可以将输入的文本清除  
![在这里插入图片描述][20190924192640579.png]

### 7、type=“color” ###

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

### 8、type=“tel” ###

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

### 9、浏览器兼容 ###

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

# 表单—新增标签 #

### 1、< datalist >< /datalist > ###

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

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

### 2、< output >< /output > ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]

### 3、< optgroup >< /optgroup > ###

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

### 4、< fieldset >< /fieldset > ###

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

# 表单—新增属性 #

接下来介绍下H5新增的表单属性：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]

### 1、required属性 ###

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

![在这里插入图片描述][20190924194720237.png]

### 2、placeholder属性 ###

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

![在这里插入图片描述][20190924194809454.png]

### 3、autofocus属性 ###

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

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

![在这里插入图片描述][20190924195029201.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]

### 4、list属性 ###

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

![在这里插入图片描述][20190924195204612.png]

### 5、multiple属性 ###

文件上传多选或多个邮箱地址 ，可以选择多个文件；在email中，可以输入多个邮箱地址，以逗号分隔  
![在这里插入图片描述][201909241952502.png]

### 6、pattern属性 ###

规定用于验证 input 域的模式，模式为**正则表达式**，验证表单元素  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 6]

### 7、autocomplete属性 ###

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

### 8、novalidate属性 ###

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

### 9、formnovalidate 属性 ###

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

### 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：当验证不通过时触发  
![在这里插入图片描述][20190924200500499.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190924190639507.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20190924191333697.png]: https://img-blog.csdnimg.cn/20190924191333697.png
[20190927142201395.png]: https://img-blog.csdnimg.cn/20190927142201395.png
[20190924191505948.png]: https://img-blog.csdnimg.cn/20190924191505948.png
[20190924191819886.png]: https://img-blog.csdnimg.cn/20190924191819886.png
[20190924192640579.png]: https://img-blog.csdnimg.cn/20190924192640579.png
[20190924192904676.png]: https://img-blog.csdnimg.cn/20190924192904676.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190924193041802.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[2019092419325036.png]: https://img-blog.csdnimg.cn/2019092419325036.png
[20190924193414826.png]: https://img-blog.csdnimg.cn/20190924193414826.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190924193835171.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190924194026257.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20190924194143319.png]: https://img-blog.csdnimg.cn/20190924194143319.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190924194510758.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20190924194720237.png]: https://img-blog.csdnimg.cn/20190924194720237.png
[20190924194809454.png]: https://img-blog.csdnimg.cn/20190924194809454.png
[20190924195029201.png]: https://img-blog.csdnimg.cn/20190924195029201.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20190924195113501.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20190924195204612.png]: https://img-blog.csdnimg.cn/20190924195204612.png
[201909241952502.png]: https://img-blog.csdnimg.cn/201909241952502.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20190924195351380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20190924195747787.png]: https://img-blog.csdnimg.cn/20190924195747787.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/2019092419584041.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20190924200012667.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20190924200500499.png]: https://img-blog.csdnimg.cn/20190924200500499.png