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：当验证不通过时触发

H5--新增表单元素控件属性事件相关推荐

H5新增表单元素、控件
表单-新增控件类型 • HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下. • ①email.②url.③number.④range • ⑤Date pick ...
新增表单元素属性事件
表单-新增控件类型 HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下. ①email.②url.③number.④range ⑤Date pickers (d ...
（14）H5新增表单属性
一.required属性演示 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
新增表单元素和表单属性
一.表单元素包含访问协议的完整路径的输入域,在提交表单时,自动验证url域的值 <input type="url" placeholder="请输入地址" ...
html5新增了哪些表单元素,HTML5新增表单元素
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? HTML5新增表单元素主要有 input标签其type类型主要有有以下几种:type="tel"用 ...
asp.net夜话之三：表单和控件
在今天我主要要介绍的有如下知识点: HTML表单的提交方式 HTM控件获取HTML表单内容乱码问题 SQL注入服务器端表单 HTML服务器控件 HTML表单的提交方式对于一个普通HTML表单来说 ...
python嵌套html开发gui_python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例...
PyQt5布局控件QFormLayout简介 QFormLayout是label-field式的表单布局,顾明思议,就是实现表单方式的布局,表单是提示用户进行交互的一种模式,主要有两列组成,第一列用于 ...
input眼睛显示 vue_修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标...
一.修改input元素placeholder属性样式在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholde ...
非表单元素如何使用焦点事件
在前端开发中,常用的焦点事件有focus和blur. 来看看在菜鸟教程(https://www.runoob.com/jsref/met-html-focus.html)中的介绍: focus() 方 ...

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