【表单标签】

1.表单标签

1.1 表单标签 有哪些 ?

标签名	用于
① <form>	定义供用户输入的 HTML 表单。
② <input>	定义 输入 控件。
③ <textarea>	定义 多行文本 输入控件。
④ <button>	定义 按钮。
⑤ <select>	定义 下拉列表。
⑥ <optgroup>	选项 分组. 定义选择列表中 相关 选项的组合。
⑦ <option>	定义 选择列表中的 选项。
⑧ <label>	定义 input 元素的 标注。
⑨ <fieldset>	表单元素 分组. 定义围绕 表单中元素的 边框。
⑩ <legend>	表单元素分组 标题(说明). 定义 fieldset 元素的 标题。
⑪ <isindex>	已弃用。为输入查询字符串 提供单行文本输入。发送时，服务器将返回 与查询匹配的页面列表。它的支持依赖于 浏览器和服务器 对查询的响应。<isindex>在HTML 4.01中被弃用，因为同样的行为 可以在HTML表单中实现。

---

1.2 HTML5 中的表单标签 有哪些 ?

标签名	用于
① <datalist>	定义 数据列表。
② <keygen>	已弃用. 定义 生成 密钥。
③ <output>	结果容器. 定义 输出 的一些类型。

---

1.3 ★ form 供用户输入 创建 HTML 表单 (交互+收集 用户信息,表明 我是表单)

• 收集 用户信息

  • 如何 为用户输入 创建 HTML 表单 ?
    • 使用 <form> 表单标签 (表明 “我是表单”)
    • 和用户交互 + 传输数据: <form>元素表示 一个文档区，所有的表单元素,一般 都写在这个form标签中.
    • 主要用于: 向服务器传输数据, 收集 用户信息,跟用户 交互,比如,常见的注册页面:
    • 

• <form> 表单标签 能包含哪些标签 ?

  • <input> 元素
    • 比如文本字段、复选框、单选框、提交按钮 等等。
  • textarea、fieldset、legend 和 label 等元素。

• 块级元素(块标签)

  • <form> 表单标签是 块级元素吗 ?
    • 是的，元素前后会换行.

---

1.3.1 form 表单标签的常用属性

• <form> 表单标签 的属性 有哪些 ?

属性名	属性值	用于
① accept	MIME_type	已废弃. HTML 5 中 不支持 。一个逗号分隔的列表，包括 服务器 能接受的 内容类型。作为替代，使用 <input> 元素中的 accept 属性。
② accept-charset	charset_list	服务器支持的 字符集: 规定服务器 可处理的 表单数据 字符集。
③ action	URL	处理表单的程序 url (服务器页面): 规定当提交表单时 向何处发送 表单数据。
④ enctype	见说明	提交内容的 编码类型: 规定在发送表单数据之前 如何对其 进行 编码。
⑤ method	get ,post	数据 提交方法: 规定用于 发送 表单数据的 HTTP方法。
⑥ name	form_name	规定 表单的 名称。这个form的名字。在HTML4中，这个用法 不被推荐(作为替代，应该使用id). 唯一性: HTML5中，一个文档中 有 多个表单form时，name必须唯一,而且必须规定,这样,提交的时候,才能区分 是哪个表单在提交数据。
⑦ target	_blank,_self,_parent,_top,framename	目标显示位置: 规定 在何处打开 action URL。

---

⑴ enctype 属性: 表单数据 编码类型

• 说明
• ⑴ <form> 表单标签 的 enctype编码类型 属性
  • 如何指定 在发送表单数据之前 如何对其 进行 编码 ?(enctype 属性可能的值)：
    • enc
    • encode,编码
      • application/x-www-form-urlencoded
      • multipart/form-data
      • text/plain

---

⑵ accept-charset 属性: 服务器 接受的字符编码 集合

• ⑵ **<form> 表单标签 的accept-charset 服务器 接受字符集
  • 用于
    • 如何规定 服务器处理 表单数据 用哪种 字符集 ?
      • 使用 form- accept-charset 接受字符集 属性
      • 空格 或逗号分隔: 一个空格分隔 或逗号分隔的列表
      • 服务器支持的 字符编码: 这个列表 包括了 服务器支持的字符编码。
      • 使用顺序: 浏览器 以这些编码 被列举的顺序 使用它们。
      • 默认支持的字符编码: 默认值是一个 保留字符串“UNKNOWN”。这个字符串 指的是，和包含这个form元素的 文档 相同的编码。
    • 服务器可处理 多个字符集 吗 ?
      • 可以
    • 如果需要规定 一个以上的字符集，使用什么 分隔字符集 ?
      • 使用 逗号 或者空格
      • 空格 分隔符: 在之前版本的HTML中，不同的字符编码 可以用 空格或逗号分隔。在HTML5中，只有空格 可以允许 作为分隔符。
  • form- accept-charset 接受字符集 属性的语法
    • <form accept-charset="value">
  • form-accept-charset 接受字符集 属性 的属性值
    • 常用值：
    • 如何表示 Unicode 字符 编码 ?
      • UTF-8
    • 如何表示 拉丁字母表 的字符编码 ?
      • ISO-8859-1
    • 如何表示 简体中文 字符集 ?
      • gb2312

---

⑶ ♣ action 属性: 服务器页面 地址 (处理表单信息的 程序url )

• ⑶ <form> 表单标签 的 action 处理表单程序url 属性
  • 用于
    • 如何指明 表单数据 提交给谁 ?
    • 使用 action 处理表单程序url 属性
    • 处理表单的 程序url: 一个处理这个form表单信息的 程序所在的URL。
    • 属性覆盖: 这个值可以被<button>或者<input>元素中的 formaction 属性重载（覆盖）。
  • action 处理表单程序url 属性的属性值
    • url
      • form-action="url"
    • 可能的值：
      • 绝对 URL
        • 指向 其他站点（比如 src=“www.example.com/example.htm”）
      • 相对 URL
        • 指向 站点内 的文件（比如 src=“example.htm”）

<form action="/example/html5/demo_form.asp" accept-charset="ISO-8859-1">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="提交" />
</form>

---

⑷ enctype 属性: (表单数据 发送前的) 编码类型

• ⑷ <form> 表单标签 的 enctype 编码类型 属性
  • 用于
    • 如何规定 在发送到服务器之前 应该如何编码 表单数据 ?
    • 使用 enctype 编码类型 属性
    • 提交表单 的内容 编码类型: 当 form-method="post"时，enctype是用于 向服务器提交表单的 内容的 MIME类型。可能的值是:
  • 默认地，表单数据会编码为 什么 ?
    • 全部编码: application/x-www-form-urlencoded
    • 在发送到服务器之前，所有字符 都会进行编码 吗 ?
      • 是的
      • 编码转换
        • 编码会将 空格 转换为 什么 ?
          • "+" 加号
        • 编码会将 特殊符号 转换为 什么 ?
          • ASCII HEX 值
  • form-enctype 编码类型 属性的属性值 有哪些 ?

    • form-enctype="application/x-www-form-urlcoded | multipart/form-data | text/plain"

    • ① 默认: 编码 所有字符: 在发送前 编码 所有字符（默认）,用什么属性值 ?

      • application/x-www-form-urlencoded属性值

    • ② 不编码 字符 : 使用什么属性值 ?

      • multipart/form-data 属性值
      • 在使用 包含 文件上传控件 的表单 时，必须使用 什么属性值 ?
        • multipart/form-data 属性值
        • 用于一个 type 属性设置为"file"的 <input> 元素: input-type="file".

    • ③不编码 特殊字符: 空格转换为 +加号，但 不对特殊字符 编码,使用什么属性值 ?

      • text/plain 属性值
      • 注意: 作为调试辅助 (添加到规范中);不应该 用于 真正的表单提交。

    • 属性覆盖: 这个值可以被 <button> 或者 <input> 元素中的 formenctype 属性重载（覆盖）

---

⑸ ♣ method 属性: (表单数据) 发送方法 (提交方法)

• ⑸ <form> 表单标签 的 method 发送方法 属性
  • 用于
    • 发送数据方法: 如何规定浏览器 如何发送 表单数据 (给服务器)?

      • 使用 method 发送数据方法 属性: method="post | get | dialog"

      • 浏览器使用这种 HTTP 方式 来提交form表单. 可能的值有:

      • ① 请求体 ( 分段传输 ) post: 指的是 HTTP POST 方法 ;

        • 表单数据 会包含在 表单体内 然后发送给服务器.
        • 表单中的数据 在发送到服务器时 包含在 HTTP请求的主体中。
        • 当表单包含 密码等 不应该公开的信息时，请使用 此方法。

      • ②附在url 后面 ( 一次性传输 ) get: 指的是 HTTP GET 方法;

        • 表单数据 会附加在action 属性的URI中，
          • 并以 ‘?’ 作为分隔符, 然后这样得到的 URI再发送给服务器.
          • 如果这样做（数据暴露在URI里面）没什么副作用，或者表单 仅包含 ASCII字符时，再使用这种方法吧。如搜索表单，请使用 此方法。
          • 如果 有密码信息,显示出来,就非常不安全,所以密码等 重要的信息,不能用 get 方法.

      • ③关闭对话框 dialog:

        • 当表单位于 <dialog>对话框 元素中 时使用，以在提交时 关闭对话框。

      • 属性覆盖: 这个值 可以被<button>按钮 或者<input>输入 元素中的 formmethod属性重载（覆盖）。

  • form-method 发送数据方法 属性 有哪两种方法 ?
    • POST 方法和 GET 方法。
    • （表单数据 发送到 哪里? form-action 数据提交操作 属性所规定的页面）
  • 表单数据的 发送方式
    • 可以作为 URL 变量（method=“get”）
    • 或者 HTTP post （method=“post”）的方式来发送

---

• 知识拓展: ASCII 字符 详细介绍
  • ASCII ((American Standard Code for Information Interchange): 美 /ˈæski/, 美国 信息交换 标准代码
    • 目前为止共定义了 128个字符
      • 包括大小写字母、数字0-9、标点符号、非打印字符（换行符、制表符等4个）以及控制字符（退格、响铃等）组成。
      • 针对英语: 但是，由于它是针对英语设计的，当处理带有 音调标号（形如汉语的拼音）的亚洲文字时 就会出现问题。
    • ASCII 产生原因
      • 二进制数, 存储和运算: 在计算机中，所有的数据 在存储和运算时 都要使用二进制数表示（因为计算机用 高电平和低电平 分别表示 1和0）
        • 二进制代码 和 计算机信息: 计算机内部 处理的信息，都是用二进制代码 表示的，汉字也不例外。而二进制代码 使用起来是不方便的，于是需要采用 信息交换码。
        • 例如，像a、b、c、d 这样的52个字母（包括大写）以及0、1等数字
        • 还有一些常用的符号（例如*、#、@等）在计算机中 存储时 也要使用二进制数来表示.
      • 注意: 汉字不是 ASCII 编码的,这个一般是英文,西方字符 使用的编码.
      • 汉字常用编码 UTF-8 的介绍
    • 编码: 而具体 用哪些二进制数字 表示哪个符号，当然每个人 都可以约定自己的一套（这就叫编码），而大家如果要想 互相通信而不造成混乱，那么大家就必须使用 相同的编码规则.
    • ASCII编码: 于是美国有关的标准化组织 就出台了 ASCII 编码，统一规定了 上述常用符号用 哪些二进制数来表示 。
      • ASCII 编码 制定者: 美国标准信息交换代码 是由美国国家标准学会(American National Standard Institute , ANSI )制定的，是一种标准的 单字节 字符编码方案，用于基于文本的数据。
      • ASCII → 国际标准 ISO 646: 它最初是 美国国家标准，供不同计算机 在相互通信时 用作共同遵守的 西文字符编码标准，后来它被 国际标准化组织（International Organization for Standardization, ISO）定为国际标准，称为 ISO 646 标准。适用于 所有拉丁文字字母 。

---

• post 和get 方法详解
  • º⑴ method 发送数据方法 属性的属性值 为 post = 采用 POST 方法
    • 浏览器会如何 发送数据 ?
      • 总结: 联系服务器,发送数据,分段传输.
      • ① 浏览器 和服务器 建立联系:
        • 首先，浏览器将与 服务器 建立联系.
        • 浏览器和哪个服务器 建立联系 ?
          • 浏览器与 action 表单提交操作 属性中指定的表单处理 服务器
      • ② 浏览器 发送数据 到服务器:
        • 一旦建立连接之后，浏览器就会按 分段传输 的方法将 数据发送给 服务器。
        • 浏览器 以什么方法 传送数据给服务器 ?
          • 分段传输
    • 在服务器端 会对表单值进行哪些操作 ?
      • 总结: 读取和解码参数,然后 接受参数
      • ① 读取参数: (POST 样式的应用程序) 开始执行时, 会读取参数
      • ② 解码参数: 使用这些表单值以前，必须对这些 参数进行解码
      • ③ 接受参数: 明确指定应用程序 如何接受这些参数
  • º⑵ method 发送数据方法 属性的属性值 为 get = 采用 GET 方法
    • 总结: 联系服务器,一次性传输所有数据( 附在表单的 form-action的url 后面 )
    • ① 建立联系: 浏览器会与表单处理服务器 建立连接
    • ② 一次传送所有数据: 在一个 传输步骤中 发送 所有的表单数据
    • form-method=GET 为属性值的方法 , 浏览器会怎样传送数据 ?
      • 数据附在表单的 action URL 之后。
        • 数据和 action URL 之间 如何分隔 ?
          • 用 问号 进行分隔
• form-method 发送数据方法 属性的POST 分段传输 和GET 附在url 一次性传输方法 分别在 什么时候使用 ?
  • ① form-method = GET方法的使用
    • 传输性能,表单之外 传输参数给服务器
    • 数据少: 如果发送只有 少数简短字段 的小表单 使用什么方法 ?
      • 用 GET 附 url 一次性传输 方法
    • 服务器页面 处理程序简单: 如果不怎么会 编写服务器端的 表单处理应用程序 ，应该选择 什么方法 ?
      • 用 GET 附 url 一次性传输 方法
      • 为什么 ?
        • 因为用 POST 多段传输 方法，要在 读取和解码 方法做些额外的工作
    • 表单之外 调用服务器程序: 如果想在 表单之外 调用服务器端的 应用程序，并向服务器 传递参数 用什么方法 ?
      • 用 GET 一次性传输 方法
      • 为什么 ?
        • 因为GET 一次性传输 方法 允许把表单参数 包括进来作为 URL 的一部分。
  • ② form-method= POST方法的使用
    • 数据较多,安全性
    • 限制参数的 数目和长度: 当服务器限制 参数的数目和长度，对于有许多字段 或是 很长的文本域 的表单, 应该使用什么方法 传送数据 ?
      • 用 POST 多段传输 方法
    • 更安全: 如果 很注重 安全性 问题，使用什么方法 ?
      • 用 POST 多段传输 方法
      • 为什么 ?
        • GET 一次传输 方法 将 表单参数 直接 放在 应用程序的 URL 中
        • 网络窥探者 可以很轻松地捕获 参数，还可以从服务器的 日志文件中进行 摘录。
      • ▲ 总结: GET附 url 一次性传输 方法的参数 = 被捕获和摘录 = 不安全
        • 如果参数中 包含了 信用卡帐号这样的 敏感信息，就会在不知不觉中 危及用户的安全。
      • POST 应用程序 为什么没有安全方面的漏洞 ?
        • 因为会将参数 作为 单独的事务 传输给服务器进行处理时，还可以采用 加密 的方法。
      • ▲ 总结: POST 多段传输方法的参数传送 = 单独的事务 + 加密 = 安全

---

<form action="demo_form.asp" method="get" autocomplete="on">


<form action="form_action.asp" enctype="text/plain">

• 简单的表单，包含几个参数 ?
  • 只包含 x 和 y 这两个参数。
• 对元素的值 进行编码时，格式是怎样的 ?
  • 如下.
• 编码时+参数间隔符: 编码的参数之间 使用什么分隔 ?
  • & 符号

x=28&y=66

• 如果表单采用GET一次性传输 方法, method=GET，用来引用 服务器端应用程序 的 URL 会怎样显示 ?
• 如下：
• 连接符: url 和参数之间 用什么分隔 ?
  • ? 问号 ,是连接符.

http://www.example.com/example/program?x=28&y=66

• 用<a> 超链接 标签, 调用 带有参数值的表单，格式是怎样的 ?
  • 如下：( 为什么 GET 一次性传输 方法的 “传输的内容” ,不能作为 <a> 标签的href 属性的属性值 ?)
  • (把特别的 url 作为 href 属性的属性值),会产生什么问题 ?

<a href="http://www.example.com/example/program?x=28&y=66">

• 把 “传参数值的 url” 作为 href超链接 属性的属性值,会产生什么问题 ?

  • 为什么 不能在 URL 中使用 & 符号 ?

    • 分隔参数 所用的 & 符号,也是 字符实体的 插入符号。
      • 如果在 <a> 标签的 href 属性中放入一个 & 符号，浏览器会怎样处理 ?
        • 转换成 字符实体: 会将& 符号 后面的字符 替换成相应的字符实体 ( 其实并不是 字符实体 )。

  • ▲ 总结: get方法 传输的内容 不能作为传统 <a> 超链接 标签 的href 超链接 属性的属性值 = 不能用<a> 超链接 标签, 调用 带有参数值的表单.

<a href="http://www.example.com/example/program?x=28&amp;y=66">

---

⑹ target 属性: (响应页面) 打开位置

• ⑹ <form> 表单标签 的的target 目标位置 属性

  • 用于

    • 如何规定 在何处打开 action URL ?
      • 使用 form- target目标位置 属性
      • 显示位置(打开位置): 一个名字 或者说关键字，用来指示 在提交表单之后，在哪里显示 收到的响应页面.
        • 在 HTML 4 里, 这是一个用于frame框架 的名字/关键字.
        • 在 HTML5 里, 这是一个用于 浏览器内容 的名字/关键字 (举例来说, 标签页 tab, 窗口 window, or 或者行内 frame).
    • 属性覆盖: 这个值可以被 <button>按钮 或者 <input>输入元素中的 formtarget属性重载（覆盖）。

  • form- target目标位置 属性,兼容性注释

    • 在 HTML 4.01 中，不赞成 使用 <form> 元素的 target 目标位置 属性；
    • 在 XHTML 1.0 Strict DTD 中，不支持 该属性。
    • 总结: 这个属性使用的很少.

  • form- target目标位置 属性的语法

    • <form target="_blank | _self | _parent | _top | frame-name">

属性值	用于
_blank	在 新窗口 中打开。
_self	默认。在 相同的框架 中打开。在当前HTML4或HTML5文档页面 重新加载返回值。这个是默认值。译注：也就是说如果这个文档 在一个frame框架中的话，self是在当前frame框架（document）中重新加载的，而不是整个页面（window）。
_parent	在 父框架 集中打开页面 (加载返回值)，如果没有父级的frame框架，行为和_self一致。
_top	在 整个窗口 中打开。如果是HTML 4文档: 清空当前文档，加载 返回内容；HTML5: 在当前文档的最高级内 加载返回值，如果没有父级，和_self的行为一致。
framename	在 指定的框架 中打开。

---

• <form> 表单 标签 HTML5 中的新属性 有哪些 ?

属性名	属性值	用于
① autocomplete	=on,off	浏览器 自动补全: 规定 是否启用 表单的 自动完成 功能。
② novalidate	=novalidate	提交时 不验证: 如果使用 该属性，则 提交表单时 不进行验证。

---

⑺ autocomplete 属性: 自动完成 (on | off)

• ⑺ <form> 表单标签 的autocomplete 自动完成 属性
  • 用于
    • 如何规定 表单是否应该 启用 自动完成 功能 ?
      • 使用form- autocomplete 自动完成 属性
      • 浏览器 自动补全: 用于指示<input>元素 是否能够拥有一个默认值，这个默认值 是由浏览器自动补全的。
      • 属性覆盖: 这个设定 可以被属于这个form的子元素的 autocomplete 属性重载（覆盖）。
      • 可能的值有:autocomplete="on | off"
        • ① 浏览器 不自动补全: off.
          • 在每一个用到的 输入域里，用户必须 显式的输入 一个值，或者文档 以它自己的方式 提供自动补全；浏览器 不会自动补全输入。
        • ② 浏览器 自动补全: on .
          • 浏览器能够 根据用户之前在form表单里 输入的值 自动补全。
      • 注意: 文档自动补全 和属性设置: 如果你在一个表单里 把 autocomplete 设置成 off,即关闭浏览器自动补全, 是因为 文档 提供了它独有的自动补全，那么你也应该 把这个表单里 每一个 input 元素的 autocomplete 设成 off 来让 document 能够自动补全.
      • 自动登录: 和自动完成属性 不冲突. 大多数现代浏览器 (包括Firefox 38, Google Chrome 34岁(11) 设置自动完成属性 , 并不会阻止 浏览器的密码管理器 询问用户 是否想要存储登录字段(用户名和密码), 如果用户 允许存储, 用户下次访问该页面时, 浏览器 将自动填充登录信息 。
    • 预测输入: 如何允许 浏览器预测 对 字段的输入?
      • 使用 form-autocomplete 自动完成 属性
      • 显示历史输入值: 当用户在字段开始键入时，浏览器基于 之前输入过的值 ，显示出 在字段中填写的选项 .
      • 有效范围: 此属性 对 不返回 数字或文本数据的 输入类型无效。(如复选框 或图像)
  • form-autocomplete 自动完成 属性的语法
    • <form autocomplete="on|off">
  • 注释：
    • autocomplete自动完成 属性适用于 什么标签 ?
      • 适用于 <form>表单标签
      • 以及下面的 <input> 输入标签：
        • 会有历史输入值 的类型: text, search, url, telephone, email, password, datepickers, range 以及 color。

<form action="/example/html5/demo_form.asp" method="get" autocomplete="on">
	First name:<input type="text" name="fname" /><br />
	Last name: <input type="text" name="lname" /><br />
	E-mail: <input type="email" name="email" autocomplete="off" /><br />
	<input type="submit" />
</form>

<p>请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p>
<p>请注意，表单的自动完成功能是打开的，而 e-mail 域是关闭的。</p>

• 填写表单,并提交后,再次重载页面填写,会出现以前填写过的提示
• autocomplete自动完成 属性的继承性
  • 父业子承: 继承自动完成功能, <form>表单标签 设置为自动完成,它的子元素 <input>标签 不设置这个属性,也会自动完成.
  • 父停子停: 如果 <form>表单标签 关闭自动完成,表单标签的子元素 也会关闭自动完成的功能

---

⑻ novalidate 属性: 不验证 (表单输入)

• ⑻ <form> 表单标签 的novalidate 不验证 属性
  • 用于
    • 如何规定 当提交表单时 不对其进行验证 ?
      • 使用 form-novalidate不验证 属性
      • 提交时 不验证表单: 此布尔属性 指示 提交时不验证表单。如果没有指定此属性, 会验证表单.
      • 属性覆盖:会被<button>按钮 or <input>输入 元素的 formnovalidate属性 覆盖.
      • 不验证 表单的输入 .
  • form-novalidate不验证 属性 适用于什么标签 ?
    • 需要验证的标签.
    • <form>表单 标签
    • 以及以下类型的 <input> 输入标签：
    • text, search, url, telephone, email, password, date pickers, range 以及color。
• form-novalidate 不验证 属性的语法
  • <form novalidate="novalidate">

<form action="/example/html5/demo_form.asp" method="get" novalidate="novalidate">
	E-mail: <input type="email" name="user_email" />
	<input type="submit" />
</form>

• 子承父业: 继承不验证. form表单标签 设置为 不验证的话,子元素 <input> 输入标签 也不会进行验证
  • 比如,邮箱格式不对,也可以提交成功

---

1.4 ★ input 收集 用户输入的信息

• 收集 用户信息

  • 如何 收集 用户信息 ?
    • 使用 <input> 输入标签
    • 接收 用户数据: 元素用于 为基于web的表单 创建交互控件，以便从用户 接收数据;
      • 根据设备和用户代理，可以使用 多种类型的输入数据 和控件工具。
  • <input> 输入标签如何 切换成 多种形式 ?
    • 根据<input> 输入标签的 不同的 type 类型 属性的属性值

• input-type类型 属性的属性值 可以是什么 ?

  • 文本字段、复选框、密码框(掩码后的文本控件)、单选按钮、按钮等等。

• 单标签(空标签) 正确关闭: 关于<input> 输入标签 ,HTML 与 XHTML 之间有什么差异 ?

  • 在 HTML 中，<input> 输入 标签 没有结束标签。
  • 在 XHTML 中，<input> 输入 标签 必须被正确地关闭。

---

• 定义标签: 如何为某个 表单控件 定义 标签 ?
  • 使用 <label> 标注 标签
  • <label> 优先于 <placeholder>使用:
    • 优先使用<label>标签的 原因: 如果可以避免，就不要使用placeholder占位符属性。如果需要 标注<input>元素，请使用<label>标签 元素。
      • 利于阅读:<input>和<label>元素的语义配对 对于屏幕阅读器等 辅助技术 非常有用。
      • 绑定输入字段: 通过使用<label>标签的for属性 对它们进行配对，您可以 将标签绑定到 输入字段，从而让屏幕阅读器 能够更准确地 向用户描述输入。
      • 快速聚焦: 通过将<label>与<input>配对，单击其中任何一个 都将聚焦于<input>。如果使用 纯文本“标注”输入标签 (比如<p>标签)，则不会发生 这种便利的情况。
      • 傻瓜式的说明: 作为web开发人员，重要的是 我们永远不要假设 人们会知道 我们所知道的所有事情。
    • 避免使用 占位符 placeholder的原因:
      • 消失: 占位符,输入值时就会消失,有的用户,记不清提示.
      • 不翻译: 占位符 属性值如果做 解释性提示,在需要翻译的页面 不会翻译,因为是属性,属性值一般不会被翻译.没有清晰和正确的标签, 会导致用户理解错误.
    • 关联关系: label-for="input-id"

<label for="name">Name (4 to 8 characters):</label>

<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">

---

1.4.1 input 输入标签 的常用属性

• <input> 输入标签 有哪些常用属性 ?

属性名	属性值	用于
① accept	=mime_type	规定 上传文件的 文件的类型。
② alt	=text	定义图像输入的 图片替代文本。
③ checked	=checked	规定此input 元素 首次加载时 应当 被选中。
④ disabled	= disabled	当 input 元素加载时 禁用 此元素。
⑤ type	= button,checkbox,file,hidden,image,password,radio,reset,submit,text...	规定 input 元素的 类型。
⑥ value	= value	规定 input 元素的 值。

---

⑴ accept 属性: 上传文件类型

• ⑴ <input> 输入标签的 accept 属性

  • 用于
    • 如何规定 上传文件 的文件类型 ?
      • 使用 accept 上传文件接受类型 属性
    • input-accept 上传文件接受类型 属性 只能与什么 配合使用 ?
      • 只能与 <input type="file"> 文件输入标签 配合使用,type 类型属性的属性值为 file 文件的<input>输入元素
  • 提示：
    • 为什么要 避免使用 input-accept 上传文件类型 属性 ?
      • 应该在 服务器端 验证文件上传
  • input-accept 上传文件类型 属性 的语法
    • <input accept="value">
  • 用 什么隔开的 MIME 类型列表 ?
    • 逗号
    • MIME 类型 = (文件的后缀名)
      • MIME 百度百科介绍
      • MIME 参考手册
  • accept 上传文件类型 属性 哪些浏览器支持 ?
    • IE9 以及更早的版本 不支持 <input> 输入标签的 accept 上传文件 属性。

• 如何 在文件上传中，让输入字段 可以接受 GIF 和 JPEG 两种图像：

  • 使用 accept 上传文件类型 属性,逗号分隔
    • accept="image/gif,image/jpeg"

<form>
  <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

• 如果不限制图像的格式，可以写为：accept="image/*",用星号 *表示任意。
• 只接受 gif 类型的图像
  • 属性之间 用空格分隔,属性值之间 用逗号分隔

<form action="demo_form.asp">
  <input type="file" name="pic" accept="image/gif">
  <input type="submit">
</form>

• 在选择文件的时候,只出现 gif 类型的图像

---

⑵ alt 属性: 图像替代文本 ( 图像不显示时 )

• ⑵ <input> 输入标签的alt 图像替代文本 属性
  • 用于
    • 如何规定 图像的替代文本 ?
      • 使用 alt 图像替代文本 属性
    • 当用户由于某些原因 无法查看图像时 ,如何提供了 备选的信息 ?
      • 使用 input-alt 图像替代文本 属性
    • input-alt 属性 只能与哪个输入类型 搭配使用 ?
      • 只能与 <input type="image">图像类型 输入标签 配合使用
  • 注释：
    • 为什么当 type="image"时,alt 图像替代文本 属性 是必需的属性，建议设置 alt 图像替代文本 属性 ?
      • 使用障碍: 因为 如果不使用该属性，有可能对 文本浏览器 或 非可视 的浏览器造成 使用障碍。
        • 不能显示图像 的浏览器 ,非可视 的浏览器,需要知道 图片的替代信息
• 哪些浏览器 支持 alt 图像替代文本 属性 ?
  • 除了 Safari，所有主流的浏览器 都支持 alt 图像替代文本 属性。
• 图像类型 输入标签: input-type,src,alt
  • 偏移量发送(相对于 左上方):
    • 当用户单击图像时，浏览器将以像素为单位，将鼠标 相对于 图像边界的偏移量 发送到服务器,其中包括
      • 从图像 左边界开始的水平偏移量
      • 以及从图像 上边界开始的垂直偏移量。
• 属性搭配
• input-type="image"和 src,alt属性搭配
  • 图片提交按钮,图片资源url,图片的替代提示信息

<form action="/example/html/form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="image" src="/i/eg_submit.jpg" alt="Submit" />
</form>

• 空文本,直接点击图片提交
  
  

• 结果: 服务器收到 两个空值,2个 相对于左上方的偏移量 x,y

• 填写文本后,再点击图像提交
  
  

• 四个值: 2个文本输入值,2个偏移量值

---

⑶ checked 属性: 选中 ( 选择项 )

• ⑶ <input> 输入标签的 checked 选中 属性
• 用于
  • 如何规定 在页面加载时 被预先选定的 input 元素 ?
    • 使用 input-checked 选中属性
• 配合使用
  • input-checked 选中 属性 与谁 配合使用 ?
    • <input type="checkbox"> 或 <input type="radio">
    • 类型是,能被选中的元素
    • 复选框和单选框 类型 输入标签
• 在页面加载后，如何设置 checked 选中 属性 ?
  • 可以用 JavaScript 代码进行设置.

<form action="/example/html/form_action.asp" method="get">
  <p><input type="checkbox" name="vehicle" value="Bike" /> I have a bike</p>
  <p><input type="checkbox" name="vehicle" value="Car" checked="checked" /> I have a car</p>
  <input type="submit" value="Submit" />
</form>

• 选中的项目,会打上勾号

---

⑷ disabled 属性: 禁用元素 ( 不可点击 )

• ⑷ <input> 输入标签的 disabled 禁用属性
  • 用于
    • 如何规定 被禁用 的 input输入 元素 ?
    • 使用 input- disabled 禁用属性
  • 被禁用的 input 输入元素 可以用和点击吗 ?
    • 不可用，也 不可点击。
  • input-disabled 禁用属性 一般用在哪里 ?
    • 一般设置 disabled 属性 禁用元素，当满足某些条件后，用 JavaScript 删除 disabled禁用值，将 input 输入 元素的值 切换为 可用。
    • 禁用–>可用
• 注释：
  • disabled 禁用属性无法与什么 type类型的 属性值一起使用 ?
    • 无法与<input type="hidden"> 隐藏类型的 输入标签一起使用。
    • 因为已经隐藏了,所以无所谓禁用与否了吗

<form action="/example/html/form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname"  disabled="disabled"/></p>
  <input type="submit" value="Submit" />
</form>

• 被禁用的元素: 无法获取焦点,不能点击,也不能输入内容
  • 显示为: 灰色区域

---

⑸ value 属性: 按钮显示标签 + 文本默认值 + 选择项关联值

• ⑸ <input> 输入标签的value 值属性
  • 用于
    • 如何为 input输入标签 设定值 ?
      • 使用value值 属性
  • 对于不同的输入类型，value 属性的 用法 一样吗 ?

    • 不一样.三类: 按钮显示文本 + 文本默认值 + 选择项关联值

    • ① 如何定义 按钮上的 显示的文本 ?

      • 当 type="button", "reset", "submit",使用 value值属性
        • 总结: 按钮,提交按钮,重置按钮 = 按钮上的显示文本
        • 输入值: 输入控件的值。
        • 默认值: 在HTML中指定时，是初始值(默认值).

    • ② 如何定义 输入字段的 初始值 ( 默认值) ?

      • 当type="text", "password", "hidden",使用 value值属性
        • 总结: 文本,密码,隐藏 = 初始值

    • ③ 如何定义 与输入 相关联的值 ?

      • 当 type="checkbox", "radio", "image",使用 value值属性
        • 总结: 复选框,单选框,图像 = 相关联的值
  • 注释：
    • 什么类型的输入,必须设置 value 值属性 ?
      • 复选框和单选框
      • <input type="checkbox"> 和 <input type="radio"> 中 必须设置value 属性。
      • 选中项的 值: 提交表单数据时,提交的就是 选中项的value的属性值
    • value 值属性无法与什么类型的输入 一起使用 ?
      • 文件上传.无法与 <input type=" file "> 一同使用。
• 有初始值的 邮箱和密码输入框 ( 载入后,默认就填写好的,可以删除和修改)

<form action="/example/html/form_action.asp" method="get">
  Email: <input type="text" name="email" value="1079@qq.com"/><br />
  Password: <input type="password" name="pwd" maxlength="8" value="abcde123"/><br />
  <input type="submit" value="Submit" />
</form>

• 和placeholder提示占位符不同的是 ,点击后,value初始值也不会消失,可以删除和修改

---

⑹ tabindex 属性: tab 键 聚焦

• ⑹ <input> 输入标签的tabindex属性
  • 值: 一个数值(可选的)
  • tab键 聚焦: 它定义了 输入是否应该 通过使用 Tab键进行聚焦，以及元素是否 参与了 连续的聚焦导航。
  • 访问元素 顺序: 这个值 还建立了 使用Tab键访问元素的顺序。
  • tabindex的属性值 (根据符号 有特殊的含义):
    • 负值-1: tabindex="-1"
      • 用户可聚焦+ 不能连续导航: 如果tabindex为负值，则表示 该元素应该是 用户可聚焦的，但不能使用 连续的键盘导航。
      • 建议始终使用-1值，因为使用其他值 可能比较复杂。
    • 值 0: tabindex="0"
      • 可聚焦 + 可被连续导航 (访问到): tabindex为0 意味着 元素应该是可聚焦的，并且可以 通过连续的键盘导航 访问，但是 顺序 由用户代理决定，它应该应用用户的平台约定.
      • 当希望元素 具有可聚焦性 并参与键盘导航，而不是试图 自己管理 tab 顺序时，这通常是使用的最佳值。
    • 正数:
      • tab 顺序: tabindex的正数 表示元素的 tab顺序。
      • 聚焦顺序: 每当用户按 Tab键时，下一个更高的tabindex值的元素 就会被聚焦。
      • 反顺序: 大多数平台 都提供了一个 反tab特性，通常使用 Shift + Tab 的组合，从而 颠倒 制表符tab的顺序。
    • 注:省略 和无效值: 如果省略了tabindex或tabindex不是 有效的整数，用户代理 将遵循 平台约定 来确定该做什么。

---

1.4.2 input 输入标签 新增的 html5 属性

• HTML5 中,<input> 输入 标签 新增的属性 有哪些 ?

属性名	属性值	用于
① autocomplete	=on,off	规定是否使用输入字段的 自动完成 功能。实现自动完成功能的 两个前提: ❶ 需要自动完成的标签,必须设置name属性,这样才能 完成提交. ❷ 必须提交过一次,第二次输入的时候,才会有 自动完成提示.
② autofocus	=autofocus	规定输入字段 在页面加载时是否 获得焦点。（不适用于 type="hidden",因为隐藏字段 不显示,肯定无法获得焦点）
③ form	=formname	规定输入字段 所属 的一个或多个 表单 。
④ formaction	=URL	覆盖 表单的 action 属性。（适用于 type="submit" 和type="image"）
⑤ formenctype	见注释	覆盖 表单的 enctype 属性。（适用于 type="submit" 和 type="image"）
⑥ formmethod	=get,post	覆盖 表单的 method 属性。（适用于 type="submit" 和 type="image"）
⑦ formnovalidate	=formnovalidate	覆盖 表单的 novalidate 属性。如果使用该属性，则提交表单时 不进行验证。
⑧ formtarget	=_blank,_self,_parent,_top,framename	覆盖 表单的 target 属性。（适用于 type="submit" 和 type="image"）
⑨ height	=number pixels,%	定义 input 字段的 高度。（适用于 type="image"）
⑩ list	=datalist-id	关联 数据列表datalist. 引用 包含输入字段的 预定义选项的 datalist 。
⑪ max	=number,date	规定输入字段的 最大值。与 min 属性配合使用，来创建 合法值的 范围。
⑫ maxlength	=number	规定输入字段中的字符的 最大长度。
⑬ min	=number,date	规定输入字段的 最小值。与 max 属性配合使用，来创建 合法值的范围。
⑭ multiple	=multiple	多值. 如果使用该属性，则允许 一个以上的 值。
⑮ name	=field_name	定义 input 元素的 名称。
⑯ pattern	=regexp_pattern	规定输入字段的 值的 模式或格式。例如 pattern="[0-9]"表示输入值必须是 0 与 9 之间的数字。
⑰ placeholder	=text	占位符 (示例值). 规定 帮助用户填写输入字段的 提示。
⑱ readonly	= readonly	规定输入字段为 只读。
⑲ required	=required	指示输入字段的值是 必需的。
⑳ size	=number_of_char	可见宽度. 定义输入字段的 宽度。(以字符 为单位)
㉑ src	=URL	定义 以提交按钮形式 显示的 图像的 URL。搭配type="image"使用.
㉒ step	=number	间隔值.规定输入字的 合法数字 间隔。
㉓ width	=pixels,%	定义 input 字段的 宽度。（适用于 type="image"）

---

⑴ autofocus 属性: 自动对焦 ( 获得焦点)

• ⑴ <input> 输入标签 的autofocus 属性
  • 用于
    • 如何规定 当页面加载时 input 输入元素 自动获得焦点 ?
      • 使用 autofocus自动对焦 属性
    • 使用限制:
      • 指定在页面加载时 表单控件应该具有 输入焦点。
      • 仅限一个: 文档中 只有一个与表单相关的元素 可以指定此属性.
  • 关于autofocus自动对焦 属性 , HTML 4.01 与 HTML 5 之间的差异
    • autofocus 自动对焦 属性是 HTML5 中的 新属性。
  • input-autofocus自动对焦 属性的语法
    • <input autofocus="autofocus">
• 哪些浏览器 支持 input-autofocus自动对焦 属性 ?
  • IE 9+ 以及更早的版本 不支持 input 标签的 autofocus 属性

<form action="demo_form.asp">
  First name: <input type="text" name="fname" autofocus="autofocus"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

• 获得焦点: 没有设置 自动对焦的,要输入数据,需要点击一下,获得焦点,光标才会在那个位置
  • 默认光标不在需要输入的位置的.
    
    
• 自动对焦 和光标位置: 设置自动对焦的,光标默认就在需要输入的位置,可以直接输入.

---

⑵ src 属性: 图片地址 url

• ⑵ <input> 输入标签的src 图像地址 url 属性
  • 用于
    • 如何规定 作为 图像提交按钮的 图像的URL。
      • 使用 src 图像资源 url 属性
  • 使用
    • input-src图像地址 url 属性必须与谁一起使用 ?
      • 图像类型输入: 与 <input type="image"> 同时使用。
  • input-src 图像地址 url 属性的语法
    • <input src="url">
  • input-src图像地址 url 属性的属性值
    • URL
    • 作为图像形式的提交按钮 图像的 URL。
• 一个图像形式的提交按钮：
• 搭配属性
• input-type="image" 图片输入 提交标签 和input-src图片资源 url 属性 搭配使用

<form action="/example/html/form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="image" src="/i/eg_submit.jpg" alt="Submit" />
</form>

• 图片类型的提交输入标签,点击后,会发送偏移量给服务器

---

⑶ step 属性: 间隔值

• ⑶ <input> 输入标签的step 间隔 属性
  • 用于
    • 如何规定 输入字段的 合法 数字间隔 ?
      • 使用 step间隔值 属性
      • （假如 step=“3”，则合法数字 应该是 -3、0、3、6，以此类推）。
  • 使用
    • input-step间隔 属性可以与 什么属性搭配使用 ?
      • 可以与 max 最大值 以及 min 最小值 属性配合使用，以创建 合法值的范围。设置 最大值/最小值 和间隔值.
  • step、max 以及min 属性适用于什么 类型的输入 ?
    • 以下 类型的<input> 输入标签：
      • number, range, date, datetime, datetime-local, month, time 以及 week。
      • 时间和日期
  • input-step间隔 属性的语法
    • <input step="number">
  • 属性值
    • number ;数字
    • 数字 间隔。
• 设置数字间隔为 3 的 数字输入：

<form action="demo_form.asp" method="get">
  <input type="number" name="points" step="3" />
  <input type="submit" />
</form>

• 不满足 数字间隔要求的输入,提交时,会提示有效值
  

• 没有设置数字间隔的数字输入框,点上下加减时,一般是一个一个的加减
  

• 间隔值: 设置了数字间隔的 数字输入,点上下加减时,会按照 数字间隔加减,间隔是 3 ,则每次加减 3

  • 如果没有设置min最小值,默认从 0 开始
  • 如果设置了min最小值,默认从 最小值开始
    

• 设置min最小值为 2, step数字间隔为 3,到最小值后,不能再向下减
  
  

---

⑷ form 属性: 所属表单

• ⑷ <input> 输入标签的 form表单 属性
  • 用于
    • 如何规定 input输入 元素所属 的(一个或多个) 表单 ?
      • 使用 form 表单属性
  • input-form 表单 属性的值 有什么规定 ?
    • ① 必须是input 元素所属的 表单的 id。
    • ② 如果要引用 一个以上的表单，使用什么分隔 ?
      • 使用 空格分隔
      • 注意:目前, 一个输入 只能与一个表单相关联。
• HTML 4.01 与 HTML 5 之间的差异
  • form 属性是 <input> 标签在 HTML5 中的新属性。

---

• 关联关系: 绑定 所属表单. 让位于 表单元素 外部的元素,依然是表单的一部分.
• 嵌套关系
  • <form> action method id
    • <input> type name value
  • <input> type name form
  • 关联关系: input-form="form-id"

<form action="/example/html5/demo_form.asp" method="get" id="form1">
	First name: <input type="text" name="fname" /><br />
	<input type="submit" value="提交" />
</form>

<p>下面的 "Last name" 字段位于 form 元素之外，但仍然是 表单的一部分。</p>

Last name: <input type="text" name="lname" form="form1" />

• 绑定所属表单: 不在 <form>表单元素内部的 <input>输入元素,通过 input-form="form1"仍然是 表单的一部分,提交时,数据也会一起提交
• 待解决: 测试,用空格分隔的列表,同时绑定两个 表单时,都绑定不成功了…

---

⑸ formaction 属性: (表单提交到的) 服务器页面

• ⑸ <input> 输入标签的 formaction 表单数据提交操作 属性
  • 用于
    • 如何覆盖 form 表单元素的 action服务器处理页面 属性 ?
      • 使用 formaction 表单 服务器页面 属性
  • formaction 表单数据提交操作 属性 适用于什么 type类型 输入标签 ?
    • 提交和图片 类型的输入标签: type="submit" 以及 type="image"。
  • 使用 formaction 表单服务器页面 属性的属性值
    • URL
    • input-formaction="url"
    • 向何处发送 表单数据
• 指定 不同服务器页面: 带有 两个提交按钮 的表单,如何把表单数据,提交到不同的服务器 ?（不同的 action 值）：

<form action="/example/html5/demo_form.asp" method="get">
	First name: <input type="text" name="fname" /><br />
	Last name: <input type="text" name="lname" /><br />
	<input type="submit" value="提交" /><br />
	<input type="submit" formaction="/example/html5/demo_admin.asp" value="以管理员身份提交" />
</form>

---

⑹ formenctype 属性: (表单数据) 编码类型

• ⑹ <input> 输入标签的 formenctype 表单编码类型 属性
  • 用于
    • 如何覆盖form 表单 元素的 enctype 编码类型 属性 ?
      • 使用 formenctype表单编码类型 属性
    • formenctype表单编码类型 属性 常与什么 type类型的输入标签 配合使用 ?
      • 提交和图片: 与 type="submit" 和 type="image" 配合使用。
  • formenctype表单编码 属性的属性值 有哪些 ?
    • 发送前,表单数据编码类型
    • ① 编码 所有字符: application/x-www-form-urlencoded
      • 在发送前 对 所有字符 进行编码（默认） .
    • ② 不编码 字符: multipart/form-data
      • 不对字符 编码
        • 什么时候 必须设置 不对字符 编码 ?
          • 当使用有 文件上传 控件的表单时
    • ③ 不编码 特殊字符: text/plain
      • 将 空格 转换为 “+” 符号，不编码 特殊字符 .
• 指定 不同的编码方式: 如何对 带有两个 提交按钮 的表单,采取不一样的编码方式 ?（拥有 不同的 编码方式）：

<form action="demo_post_enctype.asp" method="post">
  First name: <input type="text" name="fname" /><br />
  <input type="submit" value="Submit" />
  <input type="submit" formenctype="multipart/form-data" value="Submit" />
</form>

---

⑺ formmethod 属性: (表单数据) 发送方法

• ⑺ <input> 输入标签的formmethod 表单数据 发送方法 属性
  • 用于
    • 如何覆盖 form 元素的 method 属性 如何设置 发送表单数据的方法 ?
      • 使用formmethod表单方法 属性
  • 可以通过哪些方式 发送 表单数据 ?
    • ① 以 URL 变量 (使用method="get")一次性传输 的形式 来发送
    • ② 以 HTTP post (使用 method="post")多段传输 的形式来发送
  • 使用
    • formmethod表单数据 发送方法 属性,常与什么 type属性值 配合使用 ?
      • 提交 和图片提交的 输入标签: 与 type="submit" 以及 type="image" 配合使用。
      • 因为这两个是提交按钮,会向服务器 发送数据.
  • formmethod表单数据发送 方法 属性的语法
    • <input formmethod="get|post">
  • formmethod表单数据发送 方法 属性的属性值
    • get
      • 以 URL 变量 (使用method="get") 的形式 来发送表单数据name=value&name=value
    • post
      • 以 HTTP post 事务 的形式 发送表单数据（form-data）
• 指定 两种发送方法: 如何让部分提交按钮 设置其他的发送表单数据的方法 ?覆盖了表单的 get 方法

<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" />
</form>

---

⑻ formnovalidate 属性: 不验证 表单数据

• ⑻ <input> 输入标签的formnovalidate 表单不验证 属性
  • 用于
    • 如何覆盖 form 表单 元素的 novalidate 属性 ?
      • 在 input 输入 元素中使用 formnovalidate 表单不验证 属性
    • 如果使用该属性，则提交表单时按钮 不会执行验证过程。
  • formnovalidate 表单不验证 属性 适用于哪些标签 ?
    • <form>表单 标签 以及以下类型的 <input>输入 标签( 需要 验证数据 的输入类型)：
      • text, search, url, telephone, email, password, date pickers, range 以及 color。
  • formnovalidate 表单不验证 属性的 语法是怎样的 ?
    • 自重复: <input formnovalidate="formnovalidate">
• 如何设置,带有两个提交按钮的表单（一个进行验证，另一个不验证）：
  • form 表单 元素中不设置 不验证,在 提交类型的输入元素中 设置 formnovalidate="formnovalidate"
• 指定 验证和不验证 两种模式

<form action="demo_form.asp" method="get">
	E-mail: <input type="email" name="userid" /><br />
	<input type="submit" value="Submit" /><br />
	<input type="submit" formnovalidate="formnovalidate" value="Submit" />
</form>

• 在表单元素的子元素中,进行单独设置"不验证",格式不正确 也可以提交成功.

---

⑼ formtarget 属性: (响应页面) 打开位置

• ⑼ <input> 输入标签的formtarget 表单目标位置 属性
  • 用于
    • 如何覆盖 form 表单 元素的 target 打开位置属性 ?
    • 使用 formtarget表单打开位置 属性
  • 使用
    • formtarget表单目标位置 属性 常用于 什么样的 type 类型的 输入 标签?
      • 提交和图片提交 标签: 与 type="submit" 以及 type="image" 配合使用。都会提交表单,需要指明 服务器响应页面的 打开位置.
  • 注释：
    • HTML5 支持 框架和框架集 吗 ?
      • 不支持
    • 现在，parent, top 和 frame-name 值大多用哪里?
      • iframe。
  • formtarget表单目标位置 属性的语法
    • <input formtarget="value">
  • formtarget表单目标位置 属性的属性值
    • _blank
      • 在 新窗口/选项卡 打开响应页面.
    • _self
      • 在 同一框架 中 打开响应页面.（默认）
    • _parent
      • 在 父框架 中打开响应页面.
    • _top
      • 在 整个窗口 中打开响应页面.
    • framename
      • 在 指定的框架 中打开响应页面.

---

• 指定 不同的打开位置: 如何让 带有两个提交按钮的表单，响应页面 在不同的窗口打开 ?

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formtarget="_blank" value="Submit" />

• 第一个在 本窗口打开,第二个在一个 新的窗口中打开.

---

⑽ height 属性: 图片高度

• ⑽ <input> 输入标签的height 图片高度 属性
  • 用于
    • 如何规定 <input type="image"> 图片提交按钮 标签的的 高度 ?
      • 使用 height 图片高度 属性
  • height 图片高度 属性在 input 中 适用于 什么type 类型的 输入标签 ?
    • 图片: 只适用于 图片提交按钮 类型的输入 标签 <input type="image">
  • 提示：
    • 为什么 要为图片指定 高度和宽度 ?
      • 预留空间: 因为设置了高宽, ,当页面加载时 会为图片 预留 需要的 空间。
      • 如果没有为图片 设置高宽会怎样 ?
        • 页面布局变化: 浏览器 就 无法了解 图像的尺寸，无法为图片 预留合适的空间。
        • 当页面和图片加载时，页面布局 会发生变化。
  • input-height 图片高度 属性的语法
    • <input height="pixels|%">
  • input-height 图片高度 属性的属性值
    • pixels
      • 以 像素 计的高度。（比如 “100px” 或仅仅是 “100”）。
    • %
      • 以 包含元素 的 百分比 计的高度（比如 “50%”）
• 如何用图片 作为提交按钮 ?
  • <input> type="image"常搭配使用的属性: src, alt, width, height (图片地址,替代文本,宽高)
  • 当时图片类型的输入 标签时,一般是这 5个属性

<form action="/example/html5/demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="image" src="/i/eg_submit.jpg" alt="Submit" width="128" height="128"/>
</form>

• 提交 和发送值: 直接点击 图片提交按钮,会发送 x,y值(相对于左上的值)

---

⑾ list 属性: 绑定 datalist 数据列表

• ⑾ <input> 输入标签的list 列表绑定 属性
  • 用于
    • 预定义 选项值 (建议值 选项列表): 如何引用 datalist 数据列表，作为 输入字段 的 预定义选项 ?
    • 使用 list 列表绑定 属性
    • 支持类型: 注意 (hidden, password, checkbox, radio, file ) 隐藏、密码、复选框、单选、文件或任何按钮类型 都不支持list属性。(因为,这些一般不需要 预定义的建议值)
  • input-list 列表绑定 属性的属性值
    • input-list="datalist-id"
    • datalist-id
      • 文档中的 绑定的 数据列表 datalist 的 id。
      • list=“datalist 的 id”
  • 搭配 ,datalist 数据列表 标签使用
• 嵌套关系
  • <form>表单
    • <input> type, list ,name
    • <datalist> id 数据列表
      • <option> label value 选项
      • 关联关系: input-list=datalist-id

<form action="demo_form.asp">
	Webpage: <input type="url" list="url_list" name="link" />
	<datalist id="url_list">
		<option label="W3Schools" value="http://www.w3schools.com" />
		<option label="Google" value="http://www.google.com" />
		<option label="Microsoft" value="http://www.microsoft.com" />
	</datalist>
	<input type="submit" />
</form>

• 数据列表的value选项值 = 关联 <input> 输入标签的 建议值选项列表

---

⑿ max 属性: 最大值

• ⑿ <input> 输入标签的max 最大值 属性

  • 用于
    • 如何规定 输入字段 所允许的 最大值 ?
    • 使用 max 最大值 属性
  • 使用
    • 如何创建 合法值范围 ?
      • max最大值 属性与 min 最小值 属性配合使用
  • max 最大值 属性与 min 最小值 属性 适用于 什么标签 ?
    • 以下 <input> 输入标签的 type类型( 有输入值的类型,这些才需要 限定值的范围)：
      • number, range, date, datetime, datetime-local, month, time 以及 week。
      • 输入数字和日期的字段(8个类型的标签 可以使用)
  • input-max最大值 属性的语法
    • <input max="number|date">,根据 输入标签 type类型不同,格式略有不同.
  • input-max最大值 属性的属性值: 一般是 数字和日期
    • number
      • 数字值。最大数值.
    • date
      • 日期。最大日期.

• 如何设置 带有指定范围 的 数字输入 ?

  • input-type="number" 数字输入 类型的标签,必须是整数值

Points: <input type="number" name="points" min="0" max="10" />

• 无效提示: 不满足要求,在提交时,会出现提示

---

⒀ maxlength 属性: (正整数,允许输入的 最大字符数)

• ⒀ <input> 输入标签的maxlength 最大 字符数长度 属性
  • 用于
    • 如何 (以字符个数,即以字符为单位)的形式 规定输入字段的 最大长度 ?
    • 使用 maxlength最大 字符数长度 属性
  • 使用
    • maxlength 最大长度 属性与什么type类型的输入标签 配合使用 ?
    • 单行文本和密码框 的输入 标签: 与 <input type="text"> 或 <input type="password"> 配合使用。这两种 一般需要限定 输入字符的长度.
  • input-maxlength 最大长度 的属性值
    • input-maxlength="number"
    • number 数字
    • 输入字段中允许的 最大字符数
• 把文本输入区的最大长度 分别设置为: 5 和 9 个字符

<form action="form_action.asp" method="get">
  <p>Name: <input type="text" name="fullname" maxlength="5" /></p>
  <p>Address: <input type="text" name="Address" maxlength="9" /></p>
  <input type="submit" value="Submit" />
</form>

• 长度限制 和不允许输入: 部分浏览器, 当输入值 超过 指定的最大长度后,后面不能再输入一个字符.
  • 再输入字符 会没反应,因为已经到最大长度了.

---

⒁ multiple 属性: 多个值

• ⒁ <input> 输入标签的multiple多值 属性
  • 用于
    • 如何规定 输入字段 可选择多个值 ?
      • 使用multiple 多值属性
    • 如果使用该属性，则字段可接受 多个值。
  • 注释：
    • multiple 多值 属性使用与什么类型的输入标签 搭配使用 ?
      • 以下 <input> 类型,邮件和文件上传 类型的 输入标签：email 和 file。可以选择多值 的类型 (比如,多个邮件,多个上传文件)
• 如何设置 可接受多个值的 文件上传字段：

<form action="/example/html5/demo_form.asp" method="get">
	选择图片：<input type="file" name="img" multiple="multiple" />
	<input type="submit" />
</form>
<p>请尝试在浏览文件时选取一个以上的文件。</p>

• 选择 多个上传文件: 在文件类型的输入标签中,使用多值属性,可以一次性选择 多个文件

---

⒂ name 属性: 名称

• ⒂ <input> 输入标签的name 名称 属性
  • 用于
    • 如何规定 <input> 输入 元素的名称 ?
      • 使用 name 名称 属性
    • 数据标识+ 数据引用: 如何对 提交到服务器后的 表单数据 进行标识，或者在客户端通过 JavaScript 引用表单数据 ?
      • 使用 input-name 名称 属性
      • 指定名称 + 传递值: 指定 输入控件的 名称的字符串。提交表单数据时，这个名称 和控件的值value 一起提交.
        • △ 特别的name值: name="_charset_",有一个特殊的含义。
          • <input type="hidden" name="_charset_" />
          • 表单数据 字符编码: 如果用作 没有值vame属性的 隐藏控件的名称，那么在 提交期间，值属性 将自动给出 一个包含 提交字符编码的值。,仅针对type="hidden"。
        • name="isindex"不允许使用.
  • 注释：
    • 传递值: 只有设置了 input-name 名称 属性的表单元素 才能在 提交表单时 传递它们的值 .(要传递值,就必须设置 名称 name 属性)
    • 不提交值: 如果 没有指定名称name，或者名称 为空，则不会 将输入的值 与表单一起提交。
  • 有效值: 如果指定了name属性，则值不能为 空字符串或isindex。
  • 不能使用isindex的原因:
    • 曾有 特殊支持:
      • 许多用户代理 以前都实现了对具有isindex名称值的 第一个 表单文本控件的 特殊支持，而这个规范 以前为它定义了 相关的用户代理需求。
      • 但是，一些用户代理 随后取消了 这种特殊支持，相关的需求 也从这个规范中 删除了。因此，为了避免 遗留用户代理中的问题 重新解释，不再允许 使用isindex名称。
      • ▲ 总结: 表单元素 利用name 名称 属性 来传递值.
• 带有两个文本字段 和一个提交按钮的 HTML 表单：

<form action="/example/html/form_action.asp" method="get">
  <p>Name: <input type="text" name="fullname" /></p>
  <p>Email: <input type="email" name="email" /></p>
  <input type="submit" value="Submit" />
</form>

<p>请在提交按钮上单击，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

• 返回的值对,input-name=输入值

---

⒃ pattern 属性: 格式设置 ( 正则表达式 )

• ⒃ <input> 输入 标签的pattern 正则模式 属性
  • 用于
    • 如何验证 输入字段的 模式 ?
      • 使用 input-pattern 正则模式属性
        • [ˈpætərn]
    • 模式 指的是 什么 ?
      • 正则表达式。
  • 注释：
    • input-pattern正则 模式 属性适用于什么类型的标签 ?
    • 以下 类型的<input>输入标签 (需要 限定 内容格式的类型)：
      • text, search, url, telephone, email 以及 password 。
  • 提示：
    • 如何对正则模式 要求的格式,进行描述和提示 ?
      • 使用标准的 title 工具提示 属性来提示
      • 这个title的 属性值内容提示,在一些浏览器中 会跟着无效提示消息 一起展示给用户,所以很有用.
  • input-pattern正则模式 属性的语法
    • <input pattern="regexp">
  • input-pattern正则模式 属性的属性值
    • input-pattern="regexp"
      • regexp
    • 指定 验证输入值的 格式.
• 指定格式: 把文本输入,设置为 只能包含三个字母的模式（数字或特殊字符）：
  • input-pattern="[A-z]{3}"
• 搭配属性
  • input-pattern和 input-title一起使用 ,设置指定格式 和要求格式的提示.

<form action="/example/html5/demo_form.asp" method="get">
	国家代码：<input type="text" name="country_code" pattern="[A-z]{3}"
	title="三个字母的国家代码" />
	<input type="submit" />
</form>

• 结果:
  • 不符合要求,提交时,会出现提示,让重新填写,直到符合要求,才能提交成功
  • 提示显示:
    • 鼠标移动到输入框 位置上时,会显示title描述提示 信息
    • 跟着无效提醒信息 一起显示.

---

⒄ placeholder 属性: 占位符 ( 示例值 )

• ⒄ <input> 输入 标签的placeholder 提示占位符 属性

  • 用于
    • 如何提供 输入字段 示例值的 提示信息（hint） ?
      • 使用 input-placeholder 提示占位符 属性
    • 占位符提示的显示
      • 显示和消失: 提示 会在输入字段 为空时 显示，并会在字段 获得焦点时消失。
  • 注释：
  • placeholder 提示占位符 属性 适用于哪些标签 ?
    • 以下的类型的 <input> 输入标签( 输入前, 需要 示例值的 标签)：
    • text, search, url, telephone, email 以及 password。
  • placeholder 占位符 属性 的语法
    • <input placeholder="text">

• 带有 placeholder占位符 文本的搜索字段：

<form action="/example/html5/demo_form.asp" method="get">
	搜索 <input type="search" name="user_search" placeholder="Search W3School" />
	<input type="submit" />
</form>

• 提示占位符 消失的时机
  • 测试: 360浏览器,谷歌浏览器,在获得焦点的时候,提示占位符,没有消失,输入字符后,提示占位符才消失
  • IE 浏览器中,获得焦点,没有输入字符,提示占位符就消失了

---

⒅ readonly 属性: 只读属性 ( 不能编辑 )

• ⒅ <input> 输入标签的readonly 只读属性
  • 用于
    • 如何规定 输入字段为 只读 ?
    • 使用 input-readonly 只读属性
  • input-readonly 只读 属性 的特性有哪些 ?
    • 只读:不能修改,能选中和拷贝
    • 只读字段 可以修改吗 ?
      • 不能修改
    • 可以使用 tab 键 切换到只读字段 吗 ?
      • 可以
    • 可以 选中或拷贝 只读字段的文本 吗?
      • 可以
    • 禁用 和只读的区别:
      • 只读控件 仍然可以工作，而禁用的控件 通常在启用之前 不能作为控件工作。
      • 禁用: 值不会被提交: 一些浏览器中,禁用的元素 是不可选的(且其值 不能 被提交) (在除 firefox 以外的浏览器中，如 chrome，禁用的 textarea 内容 是 可选择和可复制的。)
      • 只读: 可选中+可复制+值可被提交: 而readonly元素是 可选择的，其内容 可复制(且其值 可被提交);你就是 不能编辑内容。
    • 只读 和不能为空: 在指定readonly属性的 输入标签上 不允许使用required不为空 属性。(因为只读属性 不能输入值,所以不能要求 不为空)
    • 只读 使用范围: 文本控件. 只有文本控件 可以设置为只读，因为对于 其他控件(如复选框和按钮)来说，只读和禁用之间 没有有用的区别，所以readonly属性不适用。
  • 使用
    • 如何防止用户 对值 进行修改，直到满足某些条件为止（比如选中了一个复选框）。
      • 使用 input-readonly 只读 属性 ,使用 JavaScript 消除readonly 值，将输入字段切换到可编辑状态。
    • readonly只读 属性可与哪些标签 搭配使用 ?
    • 单行文本和密码框 的输入 标签. <input type="text"> 或 <input type="password"> 配合使用。
  • input- readonly只读 属性的语法
    • <input readonly="readonly">
  • input- readonly只读 属性的属性值
    • readonly
• 把输入字段 设置为只读
  • readonly="readonly"

<form action="/example/html/form_action.asp" method="get">
  
  <p>Name:<input type="text" name="email" /></p>

  <p>Country:<input type="text" name="country" 
  value="China" readonly="readonly" /></p>
  
  <input type="submit" value="Submit" />
</form>

• 使用 value当前值属性,设置文本的默认值
• 设置readonly只读的文本,可以复制和选中,但不能修改.

---

⒆ required 属性: 不能为空

• ⒆ <input> 输入标签的required 必需 属性
  • 用于
    • 如何规定 输入字段 在提交之前 必须填写,不能为空 ?
      • 使用 input-required必需 属性
    • 如何设置字段为 必填或必选的 ?
      • 使用 required必需 属性
  • 注释：
    • input-required 必需属性 适用于以下哪些 类型的 <input>输入标签 ?
      • text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。(需要输入值 的标签)
    • 不能为空 使用范围: 所有输入类型 都支持required属性，但以下类型除外:
      • 颜色,隐藏,范围,提交,图像提交按钮,重置, 按钮.( color, hidden, range, submit, image, reset, button),一般不需要输入值的类型.
      • 不能为空 和伪类:
        • 当输入标签 具有required属性时，:required伪类 也将应用于它。
        • 相反，没有required属性的输入将应用:optional伪类 , 美 /ˈɑːpʃənl/ 可选择的; (不支持它的元素除外)。
  • required 必需 属性的语法
    • <input required="required">
• 设置文本输入 为必填.

<form action="demo_form.asp" method="get">
  Name: <input type="text" name="usr_name" required="required" />
  <input type="submit" />
</form>

• 不能为空: 设置为required必需的文本,不能为空,必需填写
• 如果没有填写,值为空,无法提交成功.会有需要填写的提示

---

⒇ size 属性: 可见宽度

• ⒇ <input> 输入标签的size尺寸 属性
  • 用于
    • 如何规定 输入字段的 宽度 ?
      • 使用 input-size尺寸 属性
      • 以字符 为单位
  • 使用
    • ▼ input-size尺寸属性=可见字符数+输入框的宽度(像素为单位)
      • ① 如何指定 单行文本和密码框 可见的字符数 ?
        • 对于 <input type=" text"> 和 <input type=" password">，使用 size尺寸 属性
      • ② 对于其他类型的输入，size 属性定义的是什么 ?
        • 以 像素为单位的 输入字段的宽度。
  • size 尺寸 属性语法
    • <input size="number">
  • size尺寸 属性的属性值
    • 单位: 以字符 或者像素 为单位. characters/pixels
    • input输入 元素的宽度。
  • 兼容性提示
    • 由于 size 属性是一个 可视化的设计属性，推荐使用 CSS 来代替它。
    • 所以,尽量不要使用 size 属性,等同于 css 的 width 宽度属性
    • CSS 语法：<input style="width:100px" />
• 可见宽度: 设置文本和密码 输入标签的可见字符数,显示的宽度会随size尺寸改变

<form action="/example/html/form_action.asp" method="get">
  <p>邮箱: <input type="text" name="email" size="10" /></p>
  <p>密码: <input type="password" name="psw" maxlength="10" size="10" /></p>
  <input type="submit" value="Submit" />
</form>

• 把邮箱输入框的 可见宽度 变长.
  
• 可见宽度 和字符左移: 设置了size尺寸属性,文本和密码的可见字符数,是固定的,输入更多的时候,前面的字符会左移,以便显示后面的字符
• size尺寸属性改变,文本和密码框的 可见宽度,也会改变.

---

1.4.3 type 属性: 输入的类型

• 因为type属性 涉及的知识点和细节 比较多,另写了一个博客,详情请见 【input 标签的 type 属性详解】

---

1.5 ★ textarea 定义 多行文本输入

• ⑴ 用于
  • 多行 文本: 如何定义一个 多行的 文本输入控件 ?
    • 使用 <textarea> 多行文本域 标签
    • 元素表示一个 多行纯文本 编辑控件，在希望允许用户 输入大量 自由格式文本时非常有用 (例如, 用户的评论)。
• ⑵ 不限数量 文本: 文本区中 可容纳多少数量的文本
  • 默认 不限数量 (也可以自定义 允许输入的最大字符数 长度,maxlength)
• ⑶ 默认字体: textarea多行文本域 标签 的文本的 默认字体是什么 ?
  • 等宽 字体, 通常是 Courier['kʊrɪɚ] 字体。

---

• ⑷ 多行文本 宽高: <textarea> 多行文本域 标签的 尺寸怎么规定 ?

  • ① 行列 属性: 可以通过 cols 和 rows 属性来规定 文本域 的 尺寸
  • ② ▲ 优先 宽高 属性: 建议使用 CSS 的 height 高度和 width 宽度属性。

• ⑸ 多行文本 默认值:

  • 本标签之间: 如果想设置 多行文本<textarea>的默认内容，可以在 开始和结束标记之间 输入它。
  • 注意: <textarea>不支持value属性。

---

• ⑹ 多行文本 基线的 不一致

  • 未定义: HTML规范 没有定义<textarea>的基线位置，因此不同的浏览器 将其设置为 不同的位置。
    • 对于Gecko， <textarea>基线是在textarea第一行的基线上 设置的，在另一个浏览器上，它可能是在<textarea>框的底部 设置的。
    • 多行文本 不要使用 基线垂直对齐: vertical-align: baseline, 这种行为 是不可预测的。

• ⑺ 换行模式

  • 换行属性: 可以通过 <textarea> 标签的 wrap换行 属性设置 文本输入区内 的 换行模式。

---

• ⑻ (多行文本) 可调整大小:
  • 在大多数浏览器中，<textarea>默认是 可调整大小的
  • 调整大小手柄: 在右下角的拖动手柄，它可以用来改变页面上元素的大小。
    • 
  • 调整大小属性:
    • 默认 可调整大小: 这是由 CSS属性resize 控制的——默认情况下 大小调整 是启用的.
    • 设置为 不可调整大小: 可以使用resize: none;显式地禁用它.

---

• 行间 分隔: 在<textarea>多行文本 输入区内的 文本行间 分隔

  • 回车换行 (十六进制): 用"%OD%OA" （回车/换行）进行 分隔。

• 知识补充

  • ▼十六进制 和回车/换行
  • 十六进制 是什么 ?
    • 在数学中, 是一种逢16进1的进位制.
  • 十六进制 怎么表示 ?
    • 数字和字母: 一般用数字 0到9 和字母 A到F（或a -f）表示
    • A-F(a-f)表示: 10~15，这些称作十六进制数字
  • 回车和换行
    • ① 回车是什么意思 ?
      • 本行 开始处: 光标移动到 同一行的开始处
      • “0D”是把光标移到 同一行的顶头——回车(CR)。
      • 回车: Carriage returns
    • ② 换行是什么意思 ?
      • 下一行: 光标移动到 下一行
      • “0A”是把光标移到 下一行——换行(LF)。
      • 换行: line-feeds
    • ③ 怎样使 光标移动到 下一行的开始处 ?
      • 回车和换行一起使用.
      • 16 进制代码中“0A”是换行，如果只有“0D”回车，光标只会回到 这一行的开始处，只有“0A“、”0D”一起用，才能使光标到 下一行的开始处。

---

• 示例1: 设置 多行文本的最大长度 ,不能为空,当值无效 和有效时 设置不同的边框样式
  • 利用 css 伪类: :valid, : invalid
• html

        <div>
            <label for="story" style="display: block;">请写下您创作的故事:</label>
            <textarea name="story" id="story" cols="30" rows="10" maxlength="15" required="required">我是默认值,请输入您的故事...</textarea>
        </div>


        <input type="submit" value="提交表单" />

• css

    textarea:valid {
        /*设置值有效时 边框的样式 */
        border: 2px solid green;
    }
    textarea:invalid {
        /*设置值无效效时 边框的样式 */
        border: 2px dashed red;
    }

• 值有效时
  • 
• 值无效时
  • 
• 部分浏览器,当达到最大长度限制时,不再允许输入 字符,所以不会超出数目.

---

1.5.1 textarea 多行文本域 标签 的属性 有哪些 ?

• <textarea> 多行文本域 标签的常用属性 有哪些 ?

属性	属性值	用于
① rows	= number	规定文本区内的 可见行数。
② cols	= number	规定文本区内的 可见宽度(列数)。
③ disabled	=disabled	规定 禁用该文本区。
④ name	=name_of_textarea	规定文本区的 名称。
⑤ readonly	= readonly	规定文本区为 只读。

---

⑴ rows 属性: (多行文本) 可见行数

• ⑴ <textarea> 多行文本域 标签rows 属性
  • 用于
    • 如何规定 textarea 的 可见行数 ?
      • rows 行数属性
      • 控件的 可见文本行数。
  • 语法
    • <textarea rows="number">
  • 属性值
    • number
    • 数字.规定文本区的高度(以行数计)

---

⑵ cols 属性: (多行文本) 可见列数

• ⑵ <textarea> 多行文本域 标签cols 属性
  • 用于
    • 如何规定 textarea 的可见列数 ?
      • 使用cols 列数属性
      • 文本控件的 可见宽度，以平均字符宽度 表示。
      • 正整数: 如果指定它，它必须是一个 正整数。
      • 默认值: 如果未指定，则默认值为20。
  • 语法
    • textarea cols="number">
  • 属性值
    • number
    • 规定 文本区的宽度（以 平均字符数 计）。
• 一个 10个 字符宽, 3 行高的文本区：
  • 高3个字符,占据3行
  • 宽10个字符,占据10列

		<textarea name="" id="" cols="10" rows="3">我是textarea 标签的内容.</textarea>

• 可见的只有三行
• 10 个字符宽,没有滚动条的时候,一行六个汉字,有滚动条时, 一行5个汉字

---

1.5.2 textarea 多行文本域 标签 的 html5 新属性

• <textarea> 标签的 html5中的新属性有哪些 ?

属性	属性值	用于
① wrap	= hard,soft	如何换行. 规定当在表单中提交时，文本区域中的文本 如何换行。
② autofocus	=autofocus	规定在 页面加载后文本区域 自动获得焦点。
③ form	= form_id	规定文本区域 所属 的一个或多个 表单。
④ maxlength	=number	规定文本区域的 最大字符数。如果 未指定此值，则用户可以输入 无限个字符。
⑤ placeholder	=text	规定描述文本区域 预期值 的简短 占位符提示。
⑥ required	=required	规定文本区域 是必填的。

---

⑴ wrap 属性: 如何换行

• ⑴ <textarea> 多行文本域 标签wrap 属性
  • 用于
    • 如何规定当在表单中 提交时，文本区域（text area）中的 文本如何换行 ?
    • 使用 wrap换行 属性
  • 哪些浏览器支持 wrap换行 属性 ?
    • 所有主流浏览器 都支持 wrap 属性。
  • 语法
    • <textarea wrap="soft|hard">
  • 属性值
    • ① 不自动 换行: soft
      • 当在表单中提交时，textarea 中的文本 不换行。默认值。
      • CR+LF 换行回车对: 浏览器 确保值中的 所有换行符都由一个CR+LF对 组成，但 不插入 任何额外的换行符。
      • 自动换行 失效,没有换行符.
    • ② 自动 换行: hard
      • 自动换行: 浏览器 自动插入换行符(CR+LF),使每一行的宽度 不超过控件的宽度;
      • 包含在 数据中: 当在表单中提交时，textarea 中的文本 换行（包含换行符）。
      • 必须 搭配属性: 当使用 “hard” 时，必须规定 cols 属性,才能生效. ( 指定了清晰 具体的可见列数,所有浏览器 才知道该在哪里自动换行.)
      • 自动换行有效,自动换行位置 插入换行符.
    • 默认值: 如果 未指定此属性，则使用 不自动换行soft 作为其 默认值。
  • 当提交表单时，wrap="hard"的文本区域中的文本会 包含换行符（如果有换行符）：

<form action="/demo/demo_form.asp">
	<textarea rows="2" cols="20" name="usrtxt" wrap="hard">
	 At W3School you will find free Web-building tutorials.
	</textarea>
	<input type="submit">
</form>

• find ,building 前面都有一个 回车换行,结尾处 . 的后面有一个回车换行
  • 回车换行:%0D%0A
• 自动换行: 提交数据时, 自动换行符号 也会被提交.
• 如果 textarea-wrap="soft"
  
• find 和 building 前的自动换行,不会保留

---

• wrap 属性?(存疑)
• 通常情况下，当用户在输入文本区域中 键入文本后，浏览器会将它们按照 键入时的状态 发送给服务器。只有用户按下 Enter 键 的地方 生成换行。
• 如何启动 自动换行功能 ?（word wrapping）
  • 将 wrap 属性设置为 virtual 或 physical。
  • 当用户键入的一行文本 长于文本区的宽度时，浏览器会自动将 多余的文字 挪到下一行，在文字中最近的那一点 换行。
• ① 虚拟换行: wrap="virtual"
  • 实现文本区内的自动换行，改善对用户的显示
    • 设置 wrap="virtual",虚拟换行.
    • 在传输给服务器时，文本只 在用户按下 Enter 键的地方进行 换行，其他地方 没有换行的效果。
    • 总结: 虚拟换行 = 自动换行 + 只保留 enter 键换行

    <form action="http://www.w3school.com.cn//demo/demo_form.asp">
        <input type="button" onclick="msg()" value="Click me" />
        <textarea name="" id="" cols="10" rows="3">我是textarea 标签的内容.</textarea>
        <textarea rows="4" cols="20" name="usrtxt" wrap="virtual">
            At W3School you will find free Web-building tutorials.
        </textarea>
        <input type="submit">
    </form>

• 单词 will 前有一个 enter 键入的换行,其他的是自动换行,所以 building 前的自动换行,没有保留
  

• ② 物理换行: wrap="physical"

  • 实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的
    • 设置 wrap="physical" 物理换行
    • 因为文本要 以用户在文本区内 看到的效果 传输给服务器，使用自动换行是非常有用的方法。
    • 总结: 物理换行 = 自动换行 + 保留 所有换行

• textarea-wrap="physical"物理换行,保留了 所有的换行.

  • will 和web 单词前,是 enter 键入的换行,tutorials 前是自动换行

• 
  

• ③ 如果把 wrap 设置为 off: text-wrap="off"(实验中的属性,未标准化)

  • 不自动换行,保留 enter 键入的换行.
    • 文本区会包含一行文本，用户必须将光标 移动到右边 才能看到全部文本，这时将把一行文本 传送给服务器。
    • 360和谷歌 浏览器中 测试,没有换行了,所有文本在 一行上.

• text-wrap="off",在单行的文本中 使用 enter 在find 前 键入一个换行,发送给服务器,保留了 enter 键入的换行
  
  
• 如果设置为 wrap="wrap"
  • 自动换行,保留 enter 键入的换行.
    • 文本区中,会进行自动换行,但是传输给服务器,没有保留自动换行,保留了enter 键入的换行

• will 前 是 enter 键入的换行
  

---

1.6 ★ button 定义一个 按钮

• ⑴ 用于
  • 可单击按钮: 如何定义一个 按钮 ?
    • 使用 <button>按钮 标签
    • 使用范围:
      • 文档 或者表单中 需要 按钮的地方. 元素表示 可单击按钮，可在 需要简单、标准按钮功能的 表单或文档中的任何地方 使用该按钮。
    • 按钮 默认外观+可更改: 默认情况下，HTML按钮 通常以类似于 用户代理运行的主机平台的样式 显示，但是您可以 使用CSS 更改按钮的外观。

---

• ⑵ 标签内容: 在 button 按钮+元素内部,可以放置什么内容 ?
  • 文本或图像等
• ⑶ 不允许的 标签内容: <button>按钮 标签中 不能放置的内容有哪些 ?
  • 图像映射
  • 干扰行为: 因为它对鼠标和键盘敏感的动作 会干扰 表单按钮的行为(比如单击按钮)。

---

• ⑷ 两种按钮的 区别: <button> 按钮标签 与 <input type="button"> 输入按钮标签 相比
  • 能否放置 标签内容: 使用 input 元素创建的按钮 input-type="button" 不可以放置内容,因为 <input>输入标签 是空标签.
    • 可以添加 内部HTML内容(例如 <em>,<strong>, or even <img>)，并
  • 更容易 设置样式: <button>元素比<input>元素 更容易设置样式。
    • 伪类: 使用::after和::before 伪元素 来实现复杂的呈现，而<input>只接受文本value属性。

---

• ⑸ 搭配属性 : 类型 type 属性
  • △注意: 必须为 按钮 指定 type类型 属性。(不同浏览器 默认按钮类型 不同,会造成不同,使浏览器兼容出现问题)
  • 默认类型的 区别
    • IE 的默认类型type是 " button"，而其他浏览器中（包括 W3C 规范）的默认值是 " submit"。
• ⑹ HTML 4.01 与 HTML 5 之间的差异
  • 新属性: HTML 5 中的新属性：
  • autofocus, form, formaction, formenctype, formmethod, formnovalidate 以及 formtarget。

---

• ⑺ 被提交值 的区别: 如果在 HTML 表单中使用 <button> 按钮元素，不同的浏览器会 提交相同的按钮值吗 ?
  • 提供 不同的 按钮值。
    • 表单中 优先使用谁: 在 HTML 表单中创建按钮,建议用什么创建按钮 ?
      • 使用 <input> 输入元素
    • 被提交值 的区别
      • IE 将提交
        • <button> 按钮 标签的文本
      • 其他浏览器 将提交
        • 按钮 value 值 属性的内容。
    • ▲ 总结:
      • 所以,建议 在 HTML 表单中使用<input>元素来 创建按钮。
      • 或者,button-value 属性的内容 = <button> 标签的文本.

---

• ⑻按钮<button>的 浏览器兼容性问题
  • ① 类型: 必须为 按钮 指定 type类型 属性。(不同浏览器 默认按钮类型 不同)
  • ② 值属性 和标签内容: button-value 属性的内容 = <button> 标签的文本. (不同的浏览器会 提交不同的)

---

1.6.1 button 按钮标签的 属性

属性名	属性值	用于
① autofocus	=autofocus	html5. 规定当 页面加载时 按钮应当 自动获得焦点。(文档中只有一个元素 可以具有此属性。)
② disabled	=disabled	规定应该 禁用 该按钮。
③ form	=form_name	规定按钮属于一个或多个表单。
④ formaction	=url	覆盖 form 元素的 action 属性。注释：该属性与type="submit"提交按钮 配合使用。
⑤ formenctype	=application/x-www-form-urlencoded,multipart/form-data,text/plain	覆盖 form 元素的 enctype 属性。注释：该属性与type="submit"提交按钮 配合使用。
⑥ formmethod	=get, post	提交方法. 覆盖 form 元素的 method 属性。注释：该属性与 type="submit" 提交按钮 配合使用。指定 浏览器用于 提交表单的 HTTP方法.
⑦ formnovalidate	=formnovalidate	覆盖 form 元素的 novalidate 属性。注释：该属性与 type="submit"提交按钮 配合使用。
⑧ formtarget	=_blank,_self,_parent,_top,framename	覆盖 form 元素的 target 属性。注释：该属性与 type="submit" 提交按钮 配合使用。
⑨ name	= button_name	规定按钮的 名称。
⑩ type	=button,reset,submit	规定按钮的 类型。
⑪ value	=text	规定按钮的 初始值。可由脚本进行修改。

⑴ autofocus : 自动获得焦点

• ⑴ <button>按钮标签的autofocus自动获得焦点 属性
  • 自动获得焦点的按钮

<button type="button" autofocus="autofocus">点击这里</button>

• 按钮文本: 按钮上显示的文本 怎么设置 ?
  • = <button>按钮的 标签内容

---

⑵ disabled: 禁用

• ⑵ <button>按钮标签的disabled禁用 属性
  • 一个被禁用的按钮

<button type="button" disabled="disabled">Click here!</button>

• 输出:显示成 灰色的,无法点击

---

⑶ form: 绑定表单

• ⑶ <button>按钮标签的form表单绑定 属性
  • 引用一个多个表单，使用 空格 分隔的列表
  • button-form=form-id
  • 仅绑定一个: 目前,一个元素,仅支持 绑定一个表单
• 位于表单之外的 提交按钮：

<form action="/example/html5/demo_form.asp" method="get" id="nameform">
	姓：<input type="text" name="lname" /><br />
	名：<input type="text" name="fname" /><br />
</form>

<p>下面的按钮位于 form 元素之外，但仍是表单的一部分。</p>

<button type="submit" form="nameform" value="Submit">提交</button>

• 输出:
  • 在表单外的 <button> 提交按钮,也能提交 表单内的数据

---

⑷ formaction: 服务器页面 地址(覆盖form 的 action)

• ⑷ <button> 按钮 标签的formaction服务器页面 地址 属性
  • 搭配 按钮类型: 提交 type="submit"
    • button-formaction和 button-type="submit"搭配使用,因为这个属性 主要针对 数据提交的,所以和提交按钮 搭配使用
• 带有两个提交按钮的表单（带有不同的 action）：

<form action="/example/html5/demo_form.asp" method="get">
	First name: <input type="text" name="fname" /><br />
	Last name: <input type="text" name="lname" /><br />
	<button type="submit">提交</button><br />
	<button type="submit" formaction="/example/html5/demo_admin.asp">以管理员身份提交</button>
</form>

• 输出:
  • 默认,表单数据提交到 form-action中的服务器页面中
  • button-formaction让点击本按钮时的提交,可以提交到 按钮中 指定的其他服务器页面.

---

⑸ type: 按钮类型 (submit | button | reset)

• ⑸ <button> 按钮 标签的 type类型 属性
  • 用于
    • 按钮类型: 如何规定 按钮的类型 ?
    • 使用 button- type 类型 属性
  • 提示：
  • 为什么始终要为<button> 按钮标签 规定 type 类型属性 ?
    • 默认 按钮类型不同: 不同浏览器,默认的按钮类型 不同.
      • IE 的默认按钮类型 是什么 ?
        • 按钮 "button" (默认提交的值,是按钮的 标签内容)
      • 其他浏览器中（包括 W3C 规范）的默认值是什么 ?
        • 提交"submit" (默认提交的值, 是value属性值)
  • button- type 类型 属性的语法
    • <button type="submit | button | reset">
  • 按钮 类型值: <button> 按钮标签 的 type 类型属性 的属性值
    • ① 提交: submit
      • 该按钮是 提交 按钮（除了 IE，该值是其他浏览器的默认值）。
    • ② 按钮: button
      • 该按钮是 可点击 的按钮（IE的默认值）。
    • ③ 重置: reset
      • 该按钮是 重置按钮（清除表单数据）。
• △ 三种 提交按钮
  • ① 提交 按钮: <button type="submit">
  • ② 图片提交 输入标签 : <input type="image">
  • ③ 提交 输入标签: <input type="submit">
• 两个 button 元素，一个是 提交按钮，另一个是 重置按钮：

<form action="/example/html/form_action.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
</form>

• value属性值=标签内容: 为什么 button-value的值 = button 标签的内容

  • 默认情况下,不同的浏览器 会提交不同的按钮值,
  • IE会提交 button 按钮标签的内容
  • 其他浏览器,会提交 button-value 属性的值
  • 所以设置成一样的 可以解决因为浏览器造成的 提交不同按钮值的问题

• 默认 按钮文本: 提交和重置按钮,按钮上显示的文本 默认是什么 ?

  • 是"提交"和"重置"

• 更改 按钮文本: 如果要 更换文本,怎么做 ?

  • 改变 提交和重置按钮的标签内容(和 value属性值,为了兼容),按钮上显示 = 标签内容
  • 同时更改: value属性值 ,要和标签内容,一起修改 (修改其中一个,另一个也要修改,为了兼容浏览器.)

<form action="/example/html/form_action.asp" method="get">
  名字: <input type="text" name="name"></br>
  请选择您喜爱的项目：
  <button name="subject" type="submit" value="HTML">HTML-bt</button>
  <button name="subject" type="submit" value="CSS">CSS-bt</button>
</form>

• 360 和谷歌 浏览器中测试,提交的是 带值的提交按钮的value值属性的属性值,不是标签内容
  
• IE 11.0 浏览器中测试,提交的也是 提交按钮的value值属性的属性值,可能是老版本的 IE提交的 按钮标签的内容
  
  

---

• ⑹ <button> 按钮 标签的 name名称 属性
• 用于
  • 名称: 如何为按钮 规定名称 ?
  • 使用 name名称 属性
• 名称 用途: name 名称属性一般用在哪里 ?
  • ① 引用 元素: 在JavaScript 中 对元素进行引用
  • ② 引用 数据: 在表单提交之后，对表单数据进行引用。
• 名称的 不唯一
  • 不同的 button 按钮元素可以使用 相同的名称吗 ?
    • 可以
  • 两个提交按钮带,有相同的名称，在单击它们时 提交不同的值：

<form action="demo_button_name.asp" method="get">
  名字: <input type="text" name="name"></br>
  Choose your favorite subject:
  <button name="subject" type="submit" value="HTML">HTML</button>
  <button name="subject" type="submit" value="CSS">CSS</button>
</form>

• 不给 <input>输入元素 设置name名称属性,传送值的时候,不传送 该输入元素的值

• 给输入标签 设name名称属性,点击提交按钮,输入标签的输入值,会和提交按钮的值,一起传送
  
  

---

1.7 ★ select 创建 (单选或多选) 的下拉列表

• 用于
  • 下拉列表: 如何创建 (单选或多选) 下拉列表 ?
  • 使用 <select> 下拉列表 标签
  • 选项菜单: 元素 提供 选项菜单的控件.
• 下拉列表的 选项: 如何定义 下拉列表中的 选项 ?
  • 在 <select> 下拉列表 元素中,嵌套 <option> 选项 标签

---

• 组合 下拉列表的选项: (选项组)
  • 可以进一步将<option>元素嵌套在<optgroup>元素中，以在下拉菜单中 创建单独的选项组。
• <select>下拉列表 提交的值
  • ① <option>的 value属性值: 选择 该选项时 提交给服务器的数据值;如果没有包含 值value属性
  • ② <option>的 标签内容: 则值默认为 <option>元素中 包含的文本。

---

• 预选值(默认值): option-selected选中 属性
  • 如何设置 带有 预选值的下拉列表 ?
    • 预选值是什么意思 ?
      • 指 预先选中的项目。
      • <option>选项 标签中 , 使用 selected="selected"选中属性,让选项被选中.
    • 属性 区分:
      • 请注意,不是checked属性哦,单选按钮,复选框,默认选择项 用的才是checked属性
      • select标签 的选中项 很特别,用的就是 seleced属性,和标签 很搭配的名字.

---

• 下拉列表的 样式化:
  • 删除 默认外观: 可以使用appearance属性 来删除 默认的系统外观。
  • 样式化 工具: <select>元素的内部结构复杂，难以控制。如果想获得 完全的控制，应该考虑使用 一个 良好的 表单 小部件样式化工具的库(如jQuery UI)，或者尝试使用 非语义元素、JavaScript 来滚动 下拉菜单 和 WAI-ARIA 以提供语义。

---

• 示例1: 一个简单的 下拉列表
• 嵌套关系
  • <select> 选中 标签
    • <option> value 标签文本选项 标签

<select>
  <option value="volvo">Volvo</option>
  <option value="saab" selected="selected">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

• 输出:
  • 下拉列表 显示内容: 下拉列表显示的内容,是用什么设置的 ?
    • <option>的 标签内容
    • 空白项: 只设置value属性,不设置标签内容,会显示会空白项.
    • value属性 和 标签内容: 所以,<option>一定要同时 value属性和 标签内容,一个为了传递值 给服务器,一个为了显示 给用户看.
  • 默认显示数目: 载入后,默认显示几项 ?
    • 默认 只显示 一项
  • 默认 选择项:
    • ① 预选值: 优先显示的是 设置了selected选中属性的选项
    • ② 第一个选项: 没有设置 selected默认选中 选项的话,默认显示 什么内容 ?
      • 第一个选项的 标签内容
        
• 也是默认只显示一项

---

• 示例2: 一个带分组的 下拉列表

        <label>请选择一个或多个宠物:
            <select name="pets" multiple="multiple" size="4">
                <optgroup label="四腿类的宠物">
                    <option value="dog">狗狗</option>
                    <option value="cat">猫咪</option>
                    <option value="hamster" disabled>仓鼠</option>
                </optgroup>
                <optgroup label="飞行类的宠物">
                    <option value="parrot">鹦鹉</option>
                    <option value="macaw">金刚鹦鹉</option>
                    <option value="albatross">信天翁</option>
                </optgroup>
            </select>
        </label>

• 下拉列表 选项分组: 使用<optgroup>选项分组 标签
• 选项分组的 组名: 使用<optgroup>选项分组 标签的label属性
• 输出
  • 多选: 多个选项是 可选择的，因为我们已经包含了multiple属性。
    • 鼠标用户可以按住Ctrl、Command或Shift键(取决于 操作系统)，然后单击 多个选项来 选择或取消选择。
  • 显示 多行: size属性一次可 显示4行;可以滚动查看 所有选项。
  • 分组+组名: 我们已经包含了<optgroup>元素 来将选项 分成不同的组。这是一个 可视分组，其可视化 通常包括 加粗的组名 和缩进的选项。
  • 禁用 单个选项: “仓鼠”选项包含一个禁用disabled属性，因此 无法被选中。

---

1.7.1 select 下拉列表的 属性

属性名	属性值	用于
① autofocus	=autofocus	规定在页面加载后 文本区域 自动获得焦点。(文档中 只有一个表单元素 可以具有autofocus属性,不能同事聚焦两个属性。)
② disabled	= disabled	规定禁用该下拉列表。如果未指定 此属性，则控件从 包含的元素(例如fieldset)继承 其设置;(比如,父元素禁用了,子元素也会被禁用)
③ form	=form_id 规	定文本区域所属的一个或多个表单。
④ multiple	=multiple	多值. 规定可选择 多个选项。
⑤ name	=name	规定下拉列表的名称。
⑥ required	=required	规定文本区域是必填的。
⑦ size	=number	规定下拉列表中可见选项的数目。

---

⑴ autofocus 属性: 自动获得焦点

• <select> 标签的 autofocus自动获得焦点 属性
  • select-autofocus自动获得焦点 属性是逻辑属性。
  • 自动 获得焦点: 如何规定 在页面加载后 下拉列表 应该自动获得焦点 ?
    • 使用 select-autofocus自动获得焦点 属性
• 自动获得焦点的 下拉列表

<select autofocus="autofocus">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="opel">Opel</option>
   <option value="audi">Audi</option>
</select> 

• 输出: 显示内容: 下拉列表 显示的选项内容 = <option>的 标签内容

---

⑵ disabled 属性: 禁用

• <select> 标签的 disabled禁用 属性
  • 一个被禁用的下拉列表
    • <select disabled="disabled">
      
• 输出: 被禁用的下拉列表: 不可用,不能点击

---

⑶ form 属性: 所属表单

• ⑶ <select> 标签的 form绑定 所属表单 属性
  • 规定<select>元素所属的 form 表单 元素。
  • form的属性值: 该属性的值 必须是 同一文档中的某个 <form>表单 元素的 id 属性。
  • select-form="form-id"
• 一个 位于表单之外的 下拉列表,但是 仍然属于表单
• 嵌套关系
  • <form> action id
    • <input> type name
  • <select> name form
    • <option>value
  • 关联关系:select-form="form-id"

<form action="/demo/demo_form.asp" id="carform">
  名字：<input type="text" name="fname">
  <input type="submit">
</form>
<br>
<select name="carlist" form="carform">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

• 输出:
  • 提交 表单之外的 选项值: 按钮是表单内的,下拉列表是位于 表单之外的
    • 下拉列表绑定表单后,点击提交按钮,位于表单外的 下拉列表的选中值,也会提交给服务器
  • 传递值: 要传递值,必须给元素 指定name名称值
    • (下拉列表是给 select下拉列表 指定name],而不是内部的option选项)
    • 值对: select-name="option-value"

---

⑷ multiple 属性: 多选

• <select> 标签的 multiple 多选 属性
  • 用于
    • 多个 下拉选项值: 如何规定 可同时 选择多个选项 ?
      • 使用 multiple多选 属性
    • 多选: 在下拉列表中 可以进行多选吗 ?
      • 可以,设置multiple多选 属性
  • 下拉列表的 多选操作: 在不同操作系统中，如何选择多个选项 ?
    • 对于 windows：
      • 按住 Ctrl 按钮 来选择多个选项
    • 对于 Mac：
      • 按住 command 按钮 来选择多个选项
    • 由于上述差异的存在，同时由于需要 告知用户可以 使用多项选择，对用户更友好的方式 是使用复选框。
• 提示：
  • 可见选项 数目(下拉列表): 如何定义 可见选项的数目 ?
    • size 属性
    • 多选 和多项可见: 可以 把 multiple 属性与 size 属性 配合使用.
• 可以多选的下拉列表
  • <select multiple="multiple" size="2">

• 输出:
  • 给 <select>下拉列表设置了 多选属性,则内部的 选项,可以同时选择多个

---

⑸ size 属性: 可见项的 数目

• <select> 标签的 size 可见数目大小 属性
  • 用于
    • 可见选项 数目: 如何规定 下拉列表中 可见选项的数目 ?
    • 使用 size可见选项 数目 属性
  • 可见数目 和滚动条: 如果 size 可见数目大小 属性的值
    • 大于 1，但是小于列表中选项的 总数目，浏览器会显示出 滚动条
    • 滚动条表示: 可以查看 更多选项。
• 把下拉列表的 可见选项数目,设置为3个
  • select-size="3"

<select multiple="multiple" size="3">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

• 可见选项 数目: 默认可见选项是 一个,可以通过<select>下拉列表 标签的size可见数目大小 属性来设置 可见选项的数目

---

1.8 ★ optgroup 对选项 进行分组

• 用于
  • 如何 对选项 进行分组 ?
  • 使用 <optgroup>选项分组 标签
  • 下拉列表的 选项分组: 在下拉列表 <select>元素中 创建选项分组。
• <optgroup>选项分组标签 的属性 有哪些 ?

属性名	属性值	用于
① label	=text	组名+必需属性.为选项组 规定描述(分组后 小组的名称 标注)。
② disabled	=disabled	可选属性.规定禁用该选项组。

⑴ label 属性: 分组的名称

• <optgroup>选项分组 标签的label 组名名称 属性
  • <optgroup>选项分组 标签 必需的属性 有哪些 ?
    • 组名: optgroup-label 组名名称 属性
    • 属性值
      • text
    • 如何对选项组合 进行描述(就是分组后,小组的组名) ?
      • label="text"

---

⑵ disabled 属性: 禁用

• <optgroup>选项分组 标签 disabled 禁用属性
  • <optgroup>选项分组 标签 可选的属性 有哪些 ?
    • disabled 禁用属性
    • 属性值
      • disabled
    • 如何禁用 选项组 ?
      • disabled="disabled"
• 必需 属性
  • <optgroup>选项分组,必须搭配 optgroup-label组名标注 属性
  • 必须有 组名: 分组 必须有组名,不设置组名,组名会显示成 空白,给人造成困惑.
• 通过 <optgroup> 选项组 标签把相关的选项 分成两个小组：
• ▲ 嵌套关系
  • <select> 下拉列表选择 标签
    • <optgroup> label选项分组 标签
      • <option> value 选项标签

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

• 输出:
  • 默认显示: 第一个分组的 第一个选项,点击下拉键后,展示所有的分组
  • 选中: label设置的分组名 不可以选中,只能选中选项.
• 把第二分组禁用,不可选中,不可以点击
  • <optgroup label="German Cars" disabled="disabled">
    
• 输出:
  • 禁用: 被禁用的分组,显示灰色,不能点击和选中

---

1.9 ★ option 定义 下拉列表中的 一个选项

• 用于

  • 如何定义 下拉列表中的 一个选项 ?
    • 使用 <option>选项 标签

• 使用范围

  • 下拉列表+选项分组+数据列表: 用于 定义包含在<select>、<optgroup>或<datalist>元素中的项。作为这三个元素的选项,子元素.
    • ① 下拉列表<select>的 选项
    • ② 选项分组<option>的 选项
    • ③ 数据列表<datalist>的 选项

• 正确关闭: <option> 选项标签,在 HTML 与 XHTML 之间的差异

  • 在 HTML 中，<option> 没有 结束标签。
  • 在 XHTML 中，<option> 必须被 正确关闭。

• 传递值(提交的值): 如何指定 <option> 选项标签 被送往服务器的内容 ?

  • 使用 option-value 值属性

• <option>选项 标签的属性 有哪些 ?

属性名	属性值	用于
① disabled	= disabled	规定此选项应在首次加载时被禁用。
② label	=text	规定 短选项标注更短版本的选项。
③ selected	=selected	规定选项（在首次显示在列表中时）表现为选中状态。如果<option>元素是未设置multiple属性的<select>元素的后代，则此<select>元素中 只有一个<option>可能具有 此属性。
④ value	= text	定义 送往服务器的选项值。

---

• ⑴ <option> 标签的 disabled禁用属性
  • 禁用 指定选项 。
  • 被禁用的选项 不可用，也不可点击。
  • 继承性: 如果未设置此属性，则如果元素的一个祖先 是已禁用的<optgroup>元素，则仍然可以禁用该元素。可从祖先继承 禁用,祖先被禁用,本元素也会被 禁用.
• 禁用 下拉列表中 指定的一个选项

<select>
  <option>Volvo</option>
  <option>Saab</option>
  <option disabled="disabled">Mercedes</option>
  <option>Audi</option>
</select>

• 输出:
  • 被禁用的选项 显示: 为灰色,不能 点击和选中.

---

• ⑵ <option> 标签的 label 短选项标注 属性

  • 用于

    • 规定 选项的短一点的版本.
    • 替代内容: 标签内容: 指示 选项含义的标签的文本。如果没有定义label属性，那么它的值就是 元素文本内容 的值。

  • 显示

    • 下拉列表中 不会显示出 所规定的更短版本。
    • 下拉列表 中 选项显示内容的 是什么 ?
      • <option> 选项标签之间 的文本内容

  • <option> 选项 标签的 label 短选项 属性的浏览器支持

    • 只有 IE 7以上 支持 label 属性。

• 在 option 选项 元素中使用 label短选项 属性：

<select>
  <option label="Volvo">Volvo (Latin for "I roll")</option>
  <option label="Saab">Saab (Swedish Aeroplane AB)</option>
  <option label="Mercedes">Mercedes (Mercedes-Benz)</option>
  <option label="Audi">Audi (Auto Union Deutschland Ingolstadt)</option>
</select>

• 输出:
  • 360和谷歌 浏览器,下拉列表中 都显示的是 标签的内容,不是短选项
    
• IE11.0中,下拉列表中 显示的label短选项 属性中的选项短版本
  
• 输出:
  • 慎用 option 选项标签的 label短选项 属性,因为有浏览器兼容问题
  • 选项 显示的内容:
    • ① <option>标签内容,优先使用
    • ② label属性内容( 尽量不要使用,选项的这个属性,有浏览器兼容问题)

---

• ⑶ <option> 选项 标签的 value 值属性
  • 用于
    • 提交值: 如何规定 在表单被提交时 被发送到服务器的值 ?
      • ① value 的属性值.
        • 表示 被选中的项 与表单一起 提交的值。
      • ② 标签内容. 如果省略未设置 value属性，则该值 取自<option>元素的 标签内容。
  • 浏览器 显示在下拉列表中 的内容是什么 ?
    • = 标签内容 = <option> 与 <option/> 标签之间的 文本内容,不是 value的值.
  • 注释：
  • 如果没有指定 value 值属性，选项的值 将设置为什么 ?
    • <option> 标签的内容
• ▲总结:
  • 发送到服务器的值 = value 值属性的值(或者标签内容,当value未设置时)
  • 浏览器 显示在下拉列表中 的内容 = <option> 标签内容 (或者label属性内容,当设置label属性时,部分浏览器显示的是此属性的内容)
  • 没有value 属性,选项的值 = <option> 标签的内容
• 带有发送到服务器的值 的下拉列表：

<select>
  <option value="volvo">Volvo XC90</option>
  <option value="saab">Saab 95</option>
  <option value="mercedes">Mercedes SLK</option>
  <option value="audi">Audi TT</option>
</select>

• 输出:
  • 服务器接收的值,是选中项的value值属性的值

---

1.10 ★ label 为 输入input 元素 定义 标注(说明/相关联的 文本)

• 用于
  • 如何为 input 输入元素 定义 标注 ?
  • 使用 <label>标注 标签
  • 元素的 说明: 表示 用户界面中 某个元素的说明

---

• <label>与<input>元素 相关联的 优点:
  • ① 利于 获得焦点: 点击 <label>标注标签的内容,浏览器就会自动将 焦点转到 和标签相关的表单控件上。
    • 这个增加的命中区域 为任何试图激活输入的人 提供了一个优势，包括那些 使用触摸屏设备的人。
  • ② 利于 理解: 当用户专注于 表单输入时，屏幕阅读器 将读出<label>标签，使辅助技术用户 更容易理解 应该输入什么数据。

---

• 关联 表单元素: 如何把<label>标注标签 关联到表单元素 ?

  • ① 显式 关联: for属性
    • <label>标注 标签的 for关联 属性 , 与 相关元素的 id 属性值 相同。
    • label-for="input-id""
  • ② 隐式 关联: 直接 把标签 嵌套在 label标签中.
    • 将<input>元素直接 嵌套在<label>中，这种情况下 不需要for和id属性，因为关联是隐式的.

• 浏览器支持

  • 

• 示例1: 点击文本,选中 单选按钮 ( 不是 直接选择单选按钮).

<form>
  <!-- 显式 关联 -->
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />

  <!-- 隐式 关联 -->
  <label>Male
      <input type="radio" name="sex" />
  </label>
  <br />
  <label>Female
      <input type="radio" name="sex" />
  </label>
  <input type="submit" value="提交表单" />

---

⑴ for 属性: 绑定 关联标签 (搭配 标签的 id )

• <label> 标签的 for 关联属性
  • 如何让 label标注标签的内容 与 表单元素绑定 ?
    • 关联: 使用 for 关联属性
      • ① 隐式 关联
        • 将表单元素,放在 <label> 标签内部,作为标签的内容
          • 不需要for 属性，它的相关控件也不需要 id属性
        • <input> 标签 放在 <label> 标签中,作为<label> 标签的内容
      • ② 显式 关联
        • <label> - for属性的属性值 = 关联控件 的id。
• 关联 数目:
  • 只关联一个. 一个<label> 关联到 一个标签 1:1,( 但 一个输入<input> 可以 与多个标签<label>相关联,1:n) 。
  • 匹配第一个: 文档中id与for属性值 匹配的第一个元素 是这个label元素的 带标签控件(如果它是一个可标注的 元素)。
  • 不匹配的
    • 不可标注: 如果它不是可标注的，那么for属性就没有作用。
    • 不是第一个匹配的: 如果还有其他元素 也匹配id值，那么不是第一个,在文档的后面元素，将不考虑它们。
• 关联 单击事件: 当单击<label>时，关联的标签 也会出发 相应的单击事件。
• <label>的使用 和访问性
  • 干扰激活: 不要 将交互式元素(如锚点<a>或按钮<button>) 放 在标签中。这样做 使用户 很难激活 与标签相关的表单输入。
  • 干扰 辅助技术: 不要 将标题元素<h1>,<h2>... 放置在<label>中, 会干扰许多 辅助技术，因为标题通常用作 导航辅助。
    • 表单 标题: 如果表单 或表单的某个部分 需要标题，可以放置在<fieldset>中的<legend>元素中。

<p>请点击文本标记之一，就可以触发相关控件：</p>

<form>
	<b>显式的联系</b>：label_for=input_id</br>
	<label for="SSN">安全代码:</label>
	<input type="text" name="SocSecNum" id="SSN" /></br>
	
	<b>隐式的联系</b>：input 元素 放在 label标签内部</br>
	<label>出生日期: <input type="text" name="DofB" /></label>
</form>

• 输出:
  • 两种方式下,点击关联文本,都会让 关联标签 获得焦点
• <label>的另一个属性: form 所属表单(已弃用)
  • 属性值: 如果指定，属性的值 是同一文档中<form>元素的id。
  • 任意 位置: 可以将<label>元素 放置在文档中的任何位置，而不仅仅是 它们的 表单元素的后代。
  • 使用: 最好别 使用这个属性,已弃用.

---

1.11 ★ fieldset 将 表单的 相关联元素 分组

• 用于

  • 如何将 表单的相关联的元素 分组 ?(表单元素分组)
  • 组合 相关元素
    • 使用 <fieldset>表单元素分组 标签
    • 表单元素 分组:在表单中 对多个控件 和标签(<label>)进行分组

• 分组 显示外观: <fieldset>表单元素分组 标签的显示

  • 当一组表单元素 放到 <fieldset>表单元素分组 标签内时，一般有特殊的边界、3D 效果，或者甚至可创建 一个子表单 来处理这些元素。
  • 凹槽边框 和内边距: 默认情况下，内容周围有 2px的凹槽边框 和少量的默认内边距。
    元素的 默认大小: 为 min-inline-size: min-content。

• 表单分组 标题(说明): 如何为 fieldset 表单元素分组 组合的那些表单元素 定义一个标题 ?

  • 使用 <legend>表单分组标题(说明) 标签
  • legend ,美 /ˈledʒənd/ 说明,作为<fieldset>的子元素

• 新属性:HTML 4.01 与 HTML 5 之间的差异

  • HTML5 拥有如下属性：disabled、form、name，HTML 4.01 中 不支持这些属性

• 示例1: 给表单中的相关元素 进行分组：

• 嵌套关系

  • <form>表单 标签
    • <fieldset>表单分组 标签
      • <legend>表单分组标题
      • <input> type 输入标签

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

• <fieldset>表单元素分组 标签的属性 有哪些 ?

• 表单分组 标签: 新属性,HTML 4.01 与 HTML 5 之间的差异

  • HTML5 拥有如下属性：disabled、form、name，HTML 4.01 中不支持这些属性。

属性名	属性值	用于
① disabled	= disabled	规定应该禁用 fieldset。
② form	=form_id	规定 fieldset 所属的一个或多个表单。
③ name	=value	规定 fieldset 的名称。

• 示例2: 一个禁用的 表单元素分组

<form>
	  <fieldset disabled="disabled">
		    <legend>个人信息:</legend>
		    名字: <input type="text" /><br />
		    邮箱: <input type="text" /><br />
		    出生日期: <input type="text" />
	  </fieldset>
</form>

• 输出:
  • 可选中的 文本: 禁用的表单元素分组,只有 分组的标题文本 可以选中
  • 不可选中的 文本: 分组内的元素和文本,都无法选中和点击 (部分浏览器中,禁用的元素文本 也可以被选中)
• 禁用disabled 属性
  • 不可编辑 可被提交: 如果设置了 这个布尔属性，那么<fieldset>的后代 的所有表单控件 都将被禁用，这意味着它们不可编辑，但是与表单控件上的disabled属性相比，它们将与<form>一起提交。
  • 不禁用 表单分组的标题(说明)<legend>元素中的表单元素 不会被禁用。

---

• 示例3: 一个位于表单外的 表单元素分组,绑定在表单上

<form action="/example/html5/demo_form.asp" method="get" id="hobbyform">
你最喜欢的小吃是什么? <input type="text" name="icecream" /><br />
<input type="submit" />
</form>

<p>下面的 fieldset 位于 form 元素之外，但仍然是表单的一部分。</p>

  <fieldset form="hobbyform">
    <legend>个人信息:</legend>
    名字: <input type="text" name="name"/><br />
    邮箱: <input type="text" name="email"/><br />
    出生日期: <input type="text" name="birthdate"/>
  </fieldset>

• 测试
  • 理论上,点击表单内的提交按钮,应该也会提交表单元素分组内的 输入内容
  • 在 360和谷歌,IE 浏览器中测试,并没有提交 表单元素分组 中的输入内容(因为暂不支持 fieldset-form属性 吗 ?)

---

• 示例4: 一个简单的综合案例-学生档案信息

    <form action="">
        <fieldset>
            <legend>学生档案</legend>
            <label for="stuname">姓&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;名:</label>
            <input type="text" id="stuname" />
            <br />
            <br />

            <label for="tel">手&nbsp; 机 &nbsp;号:</label>
            <input type="tel" id="tel" />
            <br />
            <br />

            <label for="email">邮 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 箱:</label>
            <input type="email" id="email" />
            <br />
            <br />

            <label for="collegename">所属学院:</label>
            <input type="text" id="collegename" list="college" />

            <datalist id="college">
                <option value="金融学院">金融学院</option>
                <option value="计算机学院">计算机学院</option>
                <option value="体育学院">体育学院</option>
                <option value="设计学院">设计学院</option>
            </datalist>
            <br />
            <br />

            <label for="birthdata">出生日期:</label>
            <input type="date" id="birthdata" />
            <br />
            <br />

            <label for="grade">成 &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;绩:</label>
            <input type="number" id="grade" />
            <br />
            <br />

            <input type="submit" value="提交表格" />
            <input type="reset" value="清空填写数据" />

        </fieldset>
    </form>

---

1.12 ★ datalist 定义 一组 数据列表 (搭配 option 标签)

• 用于
  • 如何定义 一组数据列表 ?
    • 使用 <datalist>数据列表 标签
    • 一组 可用的值: 元素包含一组<option>元素，这些选项标签表示 其他控件 可用的值。
• 使用
  • 可能的值: 如何定义 input输入标签 可能的值 ?
    • 使用 <datalist>数据列表 标签
• 显示
  • datalist 数据列表 和子元素<option> 选项标签的内容 会显示吗 ?
    • 不会显示: 仅仅显示value属性值。
    • 会显示: 有的会浏览器 把 option标签内容,一起显示给用户.
  • 不要指定 数据列表的 选项<option>标签内容: 所以,最好不要给 数据列表<datalist> 规定 标签内容,因为会显示不同,有浏览器差异.

---

♣ 绑定 数据列表 id 属性(搭配 input 标签的 list 属性)

• 绑定 数据列表: 如何把 <input>输入标签 和 数据列表datalist 绑定在一起 ?

  • <input type="text" list="cars" /> = <datalist id="cars">
    • input-list = datalist-id

• 示例1: 下面是一个<input>输入元素，<datalist> 数据列表中 描述 这个文本框 可能的值：

  • 没有绑定这个<input>输入元素的话,数据列表<datalist> 中的选项不会显示的,绑定了,才会显示.

<input type="text" list="cars" placeholder="选择一种车"/>
<datalist id="cars">
	<option value="BMW">宝马</option>
	<option value="Ford">福特</option>
	<option value="Volvo">沃尔沃</option>
</datalist>

• 测试
  • 位置:数据列表 会像下拉列表一样 点击后,显示在输入框的下方
  • 颜色样式: datalist数据列表中 option 选项,粗体显示 option-value的值,option 选项标签的内容,显示在后面,灰色 字体比较细
  • 自动完成 提示: 在文本框输入,会出现数据列表中 近似值的提示,比如,输入 f,提示 Ford

---

• 总结:<select>下拉列表 和<datalist>数据列表的区别 有哪些 ?
  • ① 选项 显示
    • 默认 显示: 下拉列表select中的 标签文本,会默认 显示出来
    • 绑定 才显示: 数据列表的选项,默认不显示的,只有 <input>输入标签 绑定了数据列表,才会在被绑定的元素上显示,作为预选值.
  • ② 选项
    • 下拉列表和数据列表选项,都是用 <option>选项 标签
    • select>option,datalist>option
• <select>,<datalist> 中的 选项<option>的区别: value属性 和标签内容
  • ① 显示给用户的是 标签内容: <select>中的 <option>,一般 value属性和 标签内容,都会设置,显示给用户的是 标签内容.
  • ② 显示给用户的是 value属性值: <datalist>中的<option>,一般只设置value属性,不设置标签内容, 显示给用户的就是value的属性值,标签内容 一般不显示给用户,部分浏览器 也会把标签内容放在 选项的后面 显示给用户.

---

1.13 ★ keygen(已弃用) 如何规定 用于表单的 密钥对 生成器字段 ?

• 已弃用
  • 不再推荐 使用此功能。尽管一些浏览器 可能仍然支持它，但它可能 已经从相关的 web标准中删除，可能正在被删除，或者可能只是 为了兼容性 而保留它。
  • 避免使用它，并在可能的情况下 更新现有的代码;
  • 请注意，此功能 可能在任何时候 停止工作。
• 用于
  • 如何规定 用于表单的 密钥对 生成器字段 ?
  • 使用 <keygen>密钥 标签
    • Keygen 为 Key Generator ([计] 密钥生成器)的简写形式, 又称 注册机
    • 作用:是为软件注册 生成所需的注册码 的一种程序；密钥生成器 = 注册码生成器
    • 生成密钥+提交公钥: 为了方便 生成密钥材料，并将公钥 作为HTML表单的一部分提交。
    • 结果: 带有签名的证书: 按照预想，<keygen> 元素将用于 HTML 表单与其他的所需信息一起 构造一个证书请求，该处理的结果将是 一个 带有签名的证书。
• 当提交表单时,如何处理密钥 ?
  • 私钥: 存储在本地
  • 公钥: 发送到服务器
• <keygen>密钥 标签的浏览器支持
  • 
• form> keygen 密钥标签的属性 有哪些 ?

属性名	属性值	用于
autofocus	=autofocus	使 keygen 字段在页面加载时获得焦点。
challenge	=challenge	如果使用，则将 keygen 的值设置为 在提交时询问。与公钥一起提交的 质询字符串。如果未指定，则默认为 空字符串。
disabled	=disabled	禁用 keytag 字段。
form	=formname	定义该 keygen 字段所属的一个或多个表单。
keytype	=rsa	定义 keytype。生成密钥的类型。默认值是RSA。
name	= fieldname	定义 keygen 元素的唯一名称。控件的名称，它与表单数据 一起提交。。

• 属性

  • ① <keygen>密钥 标签的challenge 提交询问 属性
    • 属性值
      • keygen-challenge="challenge"
    • 用于
      • 如果使用，则将 keygen 的值 设置为 在提交时询问.
  • ② <keygen>密钥 标签的 keytype 密钥生成算法 属性
  • 用于
    • 如何规定 应该使用哪种 密钥生成算法 ?
    • 不同的浏览器 对密钥生成算法的支持 会有所变化,不同的浏览器 支持不同的密钥类型。
    • keytype参数 用于指定 要生成的 密钥类型。有效值为“RSA”(默认值)、“DSA”和“EC”。
    • 使用需求: 密钥类型 属性 对于 RSA密钥生成 是可选的，对于DSA和EC密钥生成是必需的。
    • DSA和EC密钥生成需要: keyparams属性，RSA密钥 生成则忽略它。
    • PQG是 keyparams的同义词: 也就是说，您可以指定keyparams="pqg-params"或pqg="pqg-params"。
    • RSA 密钥强度: 对于RSA密钥，不使用keyparams参数(如果存在则忽略)。用户可以选择 RSA密钥强度。目前，用户可以在“高”强度(2048位) 和“中等”强度(1024位)之间进行选择。
    • 当按下submit提交按钮时，将生成具 有所选大小的密钥对。私钥: 被加密并存储 在本地密钥数据库中。
  • 属性值
    • rsa
      • 规定 RSA 安全算法（如支持，则是默认值）。
    • 其他
      • 规定一个 安全算法。

• 带有 keygen 密钥字段的表单：

<form action="/example/html5/demo_form.asp" method="get">
	用户名：<input type="text" name="usr_name" />
	加密：<keygen name="security" />
	<input type="submit" />
</form>

• 测试
  • 显示:在360,谷歌 IE 浏览器中,密钥字段 没有显示(就像不存在)
• 用 RSA 算法 生成密钥的表单：

<form action="demo_keygen.asp" method="get">
	Username: <input type="text" name="usr_name" />
	Encryption: <keygen name="security" keytype="rsa" />
	<input type="submit" />
</form>

---

1.14 ★ output 定义 输出结果的 容器

• 用于

  • 如何定义 不同类型的输出 ?比如 脚本的输出
    • 使用 <output> 输出 标签
    • 结果的 容器 (计算 结果+ 用户操作 结果): 是一个容器元素，站点或应用程序 可以将 计算结果 或用户操作的结果 注入其中。

• 浏览器支持

  • 

• form> output 输出标签的属性 有哪些?

属性名	属性值	用于
for	= element_id	定义输出域 相关的一个或多个元素。
form	=form_id	定义输入字段 所属的一个或多个表单。
name	= name	定义对象的唯一名称。（表单提交时 使用）

---

⑴ for 属性: 绑定 输出关联的 标签 (搭配 标签 id)

• <output>输出 标签的 for 关联属性
  • 属性值
    • output-for="element_id "
    • id 列表:
      • 空格 分隔的列表
      • 提供 输入值: 表示 这些id的元素 为计算 提供了输入值(或影响了 计算)。
• 执行计算然后在 <output> 输出元素中显示结果：
• 嵌套关系
  • <form> oninput
    • <input> type id value
    • <output> name for
  • 嵌套关系
    • output-for="input-id input-id"

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
	0<input type="range" id="a" value="50">100
	+<input type="number" id="b" value="50">
	=<output name="x" for="a b">输出结果的位置</output>
</form>

• 测试
  • IE中 不支持 output输出标签,结果不会显示在 输出标签中
  • 支持的浏览器,结果会在 output 输出 标签中显示结果,替代原本的 标签内容
• 知识拓展
• oninput 事件: 在用户 输入时(值改变时)触发。
  • 触发: 值改变时: 该事件在 <input> 或<textarea>元素的值 发生 改变时触发。
  • 触发 区别: 该事件类似于 onchange事件。不同之处在于oninput 事件在元素 值发生变化时 立即触发， onchange 在元素 失去焦点时触发。

---

• ⑵ <output>输出 标签的 form表单绑定 属性
  • 位于表单之外的 output 输出标签(绑定表单后,不在表单内部,也会显示 输出结果)

<form action="/demo/demo_form.asp" id="numform" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
	0<input type="range" id="a" name="a" value="50">100
	+<input type="number" id="b" name="b" value="50"></br>
	<input type="submit">
</form>

<p>下面的一个 <output> 元素位于表单之外的，但仍然属于表单的一部分：</p>
<output form="numform" name="x" for="a b" style="color:red">输出结果的位置</output>

---

• 捐助: 喜欢这篇文章吗? 创作不易,捐助此文,向团团 表示鼓励和支持吧~❤
  
• 捐助二维码:
  

---

• 参考文档
  • W3School 教程
  • MDN HTML 教程

---

• 友情链接
  • ① 【HTML 标签的 参考列表 (按字母排列)】
  • ② 【HTML 标签的 参考列表 (按 功能分类 排列)】

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

---

• 转载 请注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/89679669
  • 版权声明：本文为博主原创文章，转载请附上博文链接！