【表单标签（知识点超全版本）】

1.表单标签

• 快速搜索：涉及知识点比较多，看过之后忘了很正常，想查询时，请按 Ctrl+F 快速搜索关键字哦。搜索后，多次按下 enter 键 ,或搜索框后的 上下箭头，就能在关键词之间 快速跳转。

1.1 表单标签 有哪些 ?

标签名	用于
① <form>	定义供用户输入的 HTML 表单。
② <input>	定义 输入 控件。
③ <textarea>	定义 多行文本 输入控件。
④ <button>	定义 按钮。用户激活后，可执行某个操作。❶ type 属性必需。❷ value属性值要 = 按钮的标签内容）。
⑤ <select>	定义 下拉列表。
⑥ <optgroup>	选项 分组. 定义选择列表中 相关 选项的组合。label 必需属性。（属性值是 分组后的小组的名称。不写为一行空白。）
⑦ <option>	定义 一个 选项。 用于 定义包含在<select>、<optgroup>或<datalist>元素中的项。作为这三个元素的选项。即 子标签。
⑧ <label>	定义 某些控件的标注说明。用 for 属性 关联控件。 （搭配7个标签。按钮 <button>,输入标签 <input> (except for type="hidden"，类型为隐藏值的不需要标注), <meter>, <output>, <progress>, 下拉列表 <select> and 多行文本 <textarea>.）
⑨ <fieldset>	表单元素 分组. 定义围绕 表单中元素的 边框。
⑩ <legend>	表单元素分组 标题(说明). 定义 fieldset 元素的 标题。

---

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

标签名	用于
① <datalist>	定义 数据列表。<datalist>标签中的<option>标签，只设置 value属性值，而且value属性可用于传递值。label属性和标签内容，都不设置，因为value和它俩一起设置，浏览器显示会出现差异。
② <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 type=file> 元素中的 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表单数据 编码类型 属性
  • 将表单里的数据发到服务器时，浏览器对表单数据使用的编码类型。
    • enc
    • encode,编码
    • 如果 method 属性的值为 post，则 enctype 是表单提交的 MIME 类型。可能的值:

      • ① application/x-www-form-urlencoded（默认值，表单不包含type=file的<input>元素，则可使用此选项）

        • 发送表单时，将收集 所有名称和值，并对最终字符串 执行 URL编码。
        • 此时，在发送数据前， 编码 所有字符，表单数据被编码为 名称/值对，这是默认的编码类型。
        • ❶ 当 method 属性的值为get时，且浏览器用 x-www-form-urlencoded 的编码方式时，
          • 会把表单数据 转换成一个字串，采用"&"分割开值对，（name1=value1&name2=value2…），
          • 以 ‘?’ 作为分隔符, 把表单数据 附加在 action 属性值的url中，
            • 然后把这样得到的 url ，再发送给服务器。
        • ❷ 当 method 属性的值为post时，且浏览器用 x-www-form-urlencoded 的编码方式时，
          • post 格式跟 get 同样使用 URLencode 转码，区别在于：
          • → get 把转换、拼接完的字符串用?隔开，直接把这个字串附加到到 url 后面，所以 请求体里没有数据；
          • → 而 post 把转换、拼接后的字符串，放在了请求体里，不会在浏览器的地址栏显示，因而更安全一些。
            • js中 URLencode 转码方法。
              • 将 name、value中 的 空格替换为加号+；
              • 将 非 ascii 字符 做 百分号编码；
                • 非数字, 字母用 %HH 格式进行替换, 其中 HH 是两位16进制数字, 即 ASCII HEX值，表示被替换字符的 十六进制 ASCII 码；
                • 如"?“会被替换成”%3F", 对应十六进制是 0x3f；
                • 换行符：用CR LF字符对表示, 对应的值是"%0D%0A";
              • 将 input 的 name、value 值对，用‘=’连接；
              • 不同的 input 之间用‘&’连接。
        • 总结：这种 url 的编码方式，method属性值，为get和post时，都能用，
          • 区别在于，编码后的数据的字符串 放在了不同的地方，一个放在 url 后面（get），一个放在了 请求体里（post，更安全）。
        • 查看代码 在线编辑器
        • 

      • ② multipart/form-data（如果表单包含type=file的<input>元素，则使用此选项）

        • 不编码 字符 ，当 method 的属性值为post时候，浏览器把 表单数据封装到 http 的请求体（body）中，然后发送到服务器。（上传文件时，建议 form的method属性应该设置为post，传输安全。）
        • 表示以 二进制的形式 上传内容；
          • 即，指定传输数据为 二进制类型，比如 图片、mp3、文件。
            • 指表单数据有 多部分构成，既有文本数据，又有文件等 二进制数据 的意思。发送二进制文件，这可确保不改变比特流。
          • 需要注意的是：默认情况下， enctype="application/x-www-form-urlencoded"，不能用于文件上传，
            • 只有使用了enctype="multipart/form-data"，才能 完整的传递文件数据。
            • application/x-www-form-urlencoded 不是不能上传文件，是只能上传 文本格式的文件，multipart/form-data 是将文件以 二进制的形式上传，这样可以实现 多种类型的文件上传。
          • 如果加了enctype="multipart/form-data"，普通表单域的内容，就是以流的形式传输了
            • 如，在 java 中，接收的时候不是简单的用request.getParameter();方法
        • 表单数据被封装在 一条消息中，页上的每个控件 对应消息中的一个部分，这个一般 文件上传时用。
        • 浏览器会把整个表单，以控件为单位分割，并为每个部分加上
          • Content-Disposition( form-data或者file),
          • Content-Type(默认为 text/plain),
          • name(控件name)等信息，并加上分割符(boundary)。

      • ③ text/plain（由 HTML5 引入，用于调试。）

        • 数据以 纯文本 形式进行编码，其中 不含任何控件或格式字符。
        • 空格被转换，但不再执行编码。
          • 空格转换为 + 加号，但 不对特殊字符 编码；
        • 注意: 作为调试辅助 (添加到规范中);不应该 用于 真正的表单提交。
    • 注意：enctype 的属性值，可被覆盖
      • 这个值可以被 按钮<button>， 提交<input type="submit">，或 图像 <input type="image">元素的 formenctype 属性覆盖。

---

• 知识拓展
• 什么是 MIME 类型？
  • MIME(Multipurpose Internet Mail Extensions)多用途互联网 邮件扩展类型。
  • 其实，本质上，就是用来指明 文件类型。比如，是文本文件，还是音乐，还是视频文件等。跟文件的 后缀名相关联。每个 MIME 类型，都会有相对应的后缀名。如，
    • 普通文本 .txt 文件，对应的MIME 类型： text/plain
    • PDF文档 .pdf 文件，对应的MIME 类型：application/pdf
  • 用处： 指定了 MIME类型，就是指定了打开 相关后缀名文件的应用程序。
    • 设定某种扩展名的文件，用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用 指定应用程序来打开。
    • 多用于指定一些客户端自定义的 ❶ 文件名，以及一些 ❷ 媒体文件打开方式。
  • MIME 类型，是一个互联网标准，扩展了电子邮件标准，使其能够支持:
    • 非 ASCII 字符文本;
    • 非文本格式附件(二进制、声音、图像等);
    • 由多部分(multiple parts)组成的消息体;
    • 包含非 ASCII 字符的头信息(Header information)。
  • 一些非英语字符消息和二进制文件，图像，声音等 非文字消息，原本都不能在电子邮件中传输(MIME 可以)。
    • MIME 规定了用于 表示 各种各样的数据类型的 符号化方法。 此外，在万维网中使用的 HTTP 协议中也使用了 MIME 的框架，标准被扩展为 互联网 媒体类型。
    • 在 HTTP 中，MIME 类型被定义在 Content-Type header 中
  • 示例：例如，假设你要传送一个Microsoft 的 Excel 文件到客户端。那么这时的 MIME 类型就是“application/vnd.ms-excel”。
    • 在大多数实际情况中，这个文件然后将传送给 Excel 来处理（假设我们设定 Excel 为处理特殊 MIME 类型的应用程序）。
    • 在 ASP 中，设定 MIME 类型的方法是通过 Response 对象的 ContentType 属性。
• 常用后缀名，和对应的 MIME类型
  • 前面为后辍名，后面为对应的 MIME 型
  • rar application/x-rar-compressed → 表示.RAR对应的是 application/x-rar-compressed
  • zip application/zip
  • 普通文本 .txt text/plain
  • PDF文档 .pdf application/pdf
  • 3gp video/3gpp
  • asp application/x-asap
  • avi video/x-msvideo
  • bmp application/x-MS-bmp
  • css text/css
  • html text/html
  • htm text/html
  • xhtm application/xhtml+xml
  • xhtml application/xhtml+xml
  • xsl text/xml
  • dir application/x-director
  • doc application/msword
  • ppt application/vnd.ms-powerpoint
  • exe application/octet-stream
  • gif image/gif
  • jar application/java-archive
  • jpeg image/jpeg
  • jpg image/jpeg
  • png image/png
  • svg image/svg-xml
  • swf application/x-shockwave-flash
  • js application/x-javascript
  • mp3 audio/x-mpeg
  • mp4 video/mp4
• MIME 媒体数据类型中x- 是什么意思？
  • Internet中有一个专门组织 IANA （abbr. 互联网地址编码分配机构（Internet Assigned Numbers Authority））来确认标准的 MIME 类型，但 Internet 发展的太快，很多应用程序等不及 IANA 来确认他们使用的 MIME 类型为标准类型。
    • 因此他们使用在类别中以 x- 开头的方法，标识这个类别 还没有成为标准，例如：x-gzip，x-tar等。事实上这些类型运用的很广泛，已经成为了事实标准。
  • 只要客户机和服务器共同承认这个MIME类型，即使它是不标准的类型也没有关系，客户程序就能根据MIME类型，采用具体的处理手段来处理数据。
  • 由于 MIME 类型与文档的后缀相关，因此服务器使用文档的后缀，来区分不同文件的MIME 类型，服务器中，必须定义文档后缀和 MIME 类型之间的对应关系。
    • 客户程序从服务器上接收数据的时候，它只是从服务器 接受数据流，并不了解文档的名字，因此服务器必须使用附加信息，来告诉客户程序数据的 MIME 类型。
      • 服务器在发送真正的数据之前，就要先发送标志数据的 MIME 类型的信息，这个信息使用 Content-type 关键字进行定义，
    • 例如对于 HTML 文档，服务器将首先发送以下两行 MIME 标识信息,这个标识并不是真正的数据文件的一部分。

Content-type: text/html

• 注意，第二行为一个空行，这是必须的，使用这个空行的目的是： 将 MIME 信息与真正的数据内容 分隔开。

• 参考文章

  • MIME_360百科
  • HTTP 中 application/x-www-form-urlencoded 字符说明
  • post 请求的两种编码格式：application/x-www-form-urlencoded和multipart/form-data

---

⑵ accept-charset 属性: 服务器 接受的字符编码 集合（空格分隔）

• ⑵ <form> 表单标签 的accept-charset 服务器 接受字符集
  • 用于
    • 如何规定 服务器处理 表单数据 用哪种 字符集 ?
      • 使用 form- accept-charset 接受字符集 属性
      • 空格: 一个空格分隔 的列表
      • 服务器支持的 字符编码: 这个列表 包括了 服务器支持的字符编码。
      • 使用顺序: 浏览器 以这些编码 被列举的顺序 使用它们。
      • 默认支持的字符编码: 默认值是一个 保留字符串“UNKNOWN”。这个字符串 指的是，和包含这个form元素的 文档 相同的编码。
    • 服务器可处理 多个字符集 吗 ?
      • 可以
    • 如果需要规定 一个以上的字符集，使用什么 分隔字符集 ?
      • 使用 逗号 或者空格
      • 空格 分隔符: 在 HTML5 中，只有 空格 可以允许 作为分隔符。
      • 服务器接受的 空格分隔的字符编码。浏览器 按照它们 被列出的顺序，使用它们。默认值表示与页面相同的编码。(在以前的HTML版本中，字符编码也可以用逗号分隔。)
  • 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 type="submit">，或<input type="image">元素的 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>

---

⑷ ♣ method 属性: 发送/提交 表单数据的 HTTP 方法

• ⑷ <form> 表单标签 的 method 提交数据方法 属性

  • 用于
    • 用于❶ 提交表单的 ❷ HTTP 方法。可能的值(不区分大小写):
    • 提交数据方法: 规定浏览器 如何发送 表单数据 (给服务器)?

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

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

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

        • 表单数据作为 ❶ HTTP 请求体（ request body），被发送。

          • Request 接口的只读 body 属性包含一个 可读流（ReadableStream），其中包含 已添加到请求中的 body 内容。注意，使用 GET 或 HEAD 方法的请求不能有主体，在这些情况下返回 null。

        • 当表单包含 密码等 ❷ 不应该 公开的信息时，请使用 此方法。

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

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

      • ③关闭对话框 dialog:

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

      • 属性覆盖: 这个值被<button>， <input type="submit">，或<input type="image">元素的 formmethod 属性覆盖。

• 表单数据 被发送到了 哪里?

  • form-action 服务器页面（数据处理程序）url 属性 所规定的页面

---

• 知识拓展: ASCII 字符 详细介绍
  • ASCII ((American Standard Code for Information Interchange):
    • 美 /ˈæski/, 美国 信息交换 标准代码
      • ASC：美国 标准码；II：信息交换；❶ 用于信息交换的 标准码；
    • 目前为止，共定义了 ❷ 128 个字符
      • 包括 大小写字母、数字0-9、标点符号、非打印字符（换行符、制表符等4个）以及控制字符（退格、响铃等）组成。
    • 信息交换标准码 ASCII 的缺点：
      • 它是 ❸ 针对英语设计的，当处理带有 音调标号（形如 汉语的拼音）的亚洲文字时 就会出现问题。
    • ASCII 产生原因
      • 二进制数, 存储和运算: 在计算机中，所有的 数据 在存储和运算时 都要使用 ❶ 二进制数表示（因为计算机用 高电平和低电平 分别表示 1和0）
        • 二进制代码 和 计算机信息: 计算机内部 处理的信息，都是用二进制代码 表示的，汉字也不例外。而二进制代码 使用起来是不方便的，于是需要采用 信息交换码。
        • 例如，像a、b、c、d 这样的52个字母（包括大写）以及0、1等数字
        • 还有一些常用的符号（例如*、#、@等）在计算机中 存储时 也要使用二进制数来表示。
      • 注意: 汉字不是 ASCII 编码的,ASCII 一般是英文,西方字符 使用的编码，才 128 个字符，用来表示 汉字，远远不够，表示英文字母 组成的西方语言是足够的，因为大小写在一起，才 52个字母。
      • 汉字常用的编码 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 一次传输 方法 将 表单参数 直接 放在 action 属性值 应用程序的 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 和参数之间 用什么分隔 ?
  • ? 问号 ,是 url 和 参数之间的间隔符。

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

• <a> 超链接 标签, 不能调用 使用get方法，带有参数值的表单
  • 即，GET 一次性传输 方法的 “传输的内容” ,不能作为 <a> 标签的href 属性的属性值
    • 因为，get方法 传输内容的分隔参数， 所用的 & 符号,也是 字符实体的 插入符号，会起冲突；
      • 一个&符号，没办法同时有两个作用，在a-href属性中，会被当作 字符实体的开始，而不是分隔符。
      • 转换成 字符实体: 会将& 符号 后面的字符 替换成相应的字符实体 ( 其实并不是 字符实体 )。

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

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

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

---

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

• ⑸ <form> 表单标签 的的target 打开位置 属性
  • 用于
    • 显示位置(打开位置): 一个关键字，用来指示 在提交表单之后，在哪里显示 收到的响应页面。
      • 在 HTML 4 里, 这是一个用于 frame框架 的名字/关键字。
      • 在 HTML5 里, 这是一个用于 浏览器内容 的名字/关键字 (举例来说, 标签页 tab, 窗口 window, or 或者行内框架 iframe)。
    • 属性覆盖: 这个值可以被<button>， <input type="submit">，或<input type="image">元素的 formtarget 属性覆盖。
  • form- target目标位置 属性的语法
    • <form target="_blank | _self | _parent | _top | frame-name">

属性值	用于
_blank	在 新窗口 中打开。在<form>元素上设置 target="_blank" 隐式提供了 与设置rel="noopener" 相同的 rel 行为，即，没有设置 window.opener。
_self	默认值。加载到当前页面 自身的位置（在当前文档页面 重新加载返回值。）；如果是在框架中，在 相同的框架 中打开。译注：也就是说如果这个文档 在一个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 自动完成 属性

        • autocomplete 的使用对象： 可用于接受 ❶ 文本或 ❷ 数字值作为 输入的<input>元素、<textarea>元素、<select>元素 和 <form>元素。 HTML5 中的新属性。

      • 浏览器 自动补全: 用于指示<input> 元素 是否能够拥有一个默认值，这个默认值 是由浏览器自动补全的。

      • 属性覆盖: 这个设定 可以被属于这个form的子元素的 autocomplete 属性重载（覆盖）。

      • 可能的值有:autocomplete="on | off"

        • ① 浏览器 不自动补全: off.
          • 在每一个用到的 输入域里，用户必须 显式的输入 一个值，或者文档 以它自己的方式 提供自动补全；浏览器 不会自动补全输入。
        • ② 浏览器 自动补全: on .
          • 浏览器能够 根据用户之前在form表单里 输入的值 自动补全。

      • 自动登录: 和自动完成属性 不冲突. 大多数现代浏览器 (包括Firefox , Google Chrome 设置自动完成属性 , 并不会阻止 浏览器的密码管理器 询问用户 是否想要存储登录字段(用户名和密码), 如果用户 允许存储, 用户下次访问该页面时, 浏览器 将自动填充登录信息 。

    • 预测输入: 如何允许 浏览器预测 对 字段的输入?
      • 使用 form-autocomplete 自动完成 属性
      • 显示历史输入值: 当用户在字段开始键入时，浏览器基于 之前输入过的值 ，显示出 在字段中填写的选项 。
      • 有效范围: 自动完成 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不验证 属性， HTML5 中的新属性。
      • 提交时 不验证表单: 此布尔属性 指示 提交时不验证表单。如果没有指定此属性, 会验证表单。
      • 属性覆盖:会被 <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 输入标签
    • 接收 用户数据: 元素用于 为基于网页的表单 ❶ 创建交互控件，以便从用户 ❷ 接收数据;
      • 根据设备和用户代理，可以使用 多种类型的输入数据 和控件工具。
  • <input> 输入标签如何 切换成 多种形式 ?
    • 根据<input> 输入标签的 不同的 type 类型 属性的属性值 。如果未指定此属性，则默认采用 text 文本类型。

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

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

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

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

---

• 定义标签: 如何为某个 表单控件 定义 标注标签 ?
  • 使用 <label> 标注 标签
  • <label> 优先于 <placeholder>使用:
    • 优先使用<label>标签的 原因: 如果可以避免，就不要使用placeholder占位符属性。如果需要 标注<input>元素，请使用<label>标签 元素。
      • 利于阅读:<input>和<label>元素的 语义配对 对于屏幕阅读器等 辅助技术 非常有用。
      • 绑定输入字段: 通过使用<label>标签的for属性 对它们进行配对，您可以 将标签绑定到 输入字段，从而让屏幕阅读器 能够更准确地 向用户描述输入。
      • 快速聚焦: 通过将<label>与<input>配对，单击其中任何一个 都将聚焦于<input>。如果使用 纯文本“标注”输入标签 (比如<p>标签)，则不会发生 这种便利的情况。
      • 傻瓜式的说明: 作为网页开发人员，我们永远不要假设 人们会知道 我们所知道的事，要尽可能地说明，让不懂技术的人，再笨也会用，这才是王道。
    • 避免使用 占位符 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> 输入标签 有哪些常用属性 ?

属性名	属性值	适用于类型 type=“”	用于
① accept	=mime_type	file	规定 上传文件的 文件的类型。
② alt	=text	image	定义图像输入的 图片替代文本。
③ checked	=checked	radio, checkbox	默认选中项。规定此input 元素 首次加载时 应当 被选中。
④ disabled	= disabled	almost all ，除了type=“hidden” 以外	当 input 元素加载时 禁用 此元素。
⑤ type	= button,checkbox,file...	all	规定 input 元素的 类型。
⑥ value	= value	almost all，除了 type=“file” 以外	规定 input 元素的 值。

---

⑴ accept 属性: 可接受的 上传文件类型（MIME 类型/文件后缀名，仅限 type=“file”）

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

  • 用于
    • 如何规定 上传文件 的文件类型 ?
      • 使用 accept 可接受的 上传文件类型 属性
    • input-accept 可接受的 上传文件类型 属性 只能与什么 配合使用 ?
      • 只能与 <input type="file"> 文件输入标签 配合使用,type 类型属性的属性值为 file 文件的<input>输入元素
      • accept 属性定义：在文件上传控件中，可选择哪些文件类型。
  • 提示：
    • 为什么要 避免使用 input-accept 上传文件类型 属性 ?
      • 应该在 服务器端 验证文件上传
  • input-accept 上传文件类型 属性 的语法
    • <input accept="mime_type">
  • 用 什么隔开的 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 属性: 图像替代文本 ( 图像不显示时 ，仅限 type=“image”)

• ⑵ <input> 输入标签的alt 图像替代文本 属性
  • 用于
    • 如何规定 图像的替代文本 ?
      • 使用 alt 图像替代文本 属性
    • 当用户由于某些原因 无法查看图像时 ,如何提供了 备选的信息 ?
      • 使用 input-alt 图像替代文本 属性
        • 如果图像包含信息，使用 alt 描述图像
        • 如果图像在 <a> 元素中，跳转到的链接更重要的话，使用 alt 描述该链接。
    • input-alt 属性 只能与哪个输入类型 搭配使用 ?
      • 只能与 <input type="image">图像类型 输入标签 配合使用
  • 注释：
    • 为什么当 type="image"时,alt 图像替代文本 属性 是必需的属性，建议设置 alt 图像替代文本 属性 ?
      • 使用障碍: 因为 如果不使用该属性，有可能对 文本浏览器 或 非可视 的浏览器造成 使用障碍。
        • ❶ 不能显示图像 的浏览器 ,非可视 的浏览器,需要知道 图片的替代信息。
        • 如，❷ 图像src 属性缺失、错误或 ❸ 无法加载，则显示该属性的值，用来告诉用户，缺失的图像是什么。
          • 网速太慢、浏览器禁用图像、用户使用的是屏幕阅读器，无法显示图像；
• 哪些浏览器 支持 alt 图像替代文本 属性 ?
  • 所有主流的浏览器 都支持 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 属性: 选中项 （布尔属性，仅限 type=“checkbox” 和 type=“radio”）

• ⑶ <input> 输入标签的 checked 选中 属性
• 用于
  • 如何规定 在页面加载时 被预先选定的 input 元素 ?
    • 使用 input-checked 选中属性
• 配合使用
  • input-checked 选中 属性 与谁 配合使用 ?
    • 复选框 <input type="checkbox"> 或 单选框 <input type="radio">
    • 类型是,能被选中的元素
    • 复选框和单选按钮的值，仅在当前选中checked时，才会被包含在提交的数据中。如果是 checked，则提交：所选控件的 名称 name 和值 value。
• 在页面加载后，如何设置 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 属性: 禁用元素 ( 不可点击，布尔属性 disabled=“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>

• 被禁用的元素: 无法获取焦点,不能点击,也不能输入内容。不会收到点击 click 事件，禁用的输入，不会随表单一起提交。
  • 显示为: 灰色区域。禁用输入，通常使用更暗的颜色，或使用一些其他形式的指示 字段不可使用。

---

⑸ value 属性: 输入控件的值（按钮显示标签 + 文本默认值 + 选择项关联值）

• ⑸ <input> 输入标签的value 值属性
  • 用于
    • 如何为 input输入标签 设定值 ?
      • 使用value值 属性
      • 输入控件的值。当在 HTML 中指定时，这是初始值，可以使用 JavaScript 访问相应的 htmlputelement 对象的 value 属性，随时修改或检索它。
      • 可选和强制： value 属性总是可选的，但是对于 复选框（checkbox）、单选（radio）和隐藏 （hidden）应该被认为是强制的。
  • 对于不同的输入类型，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值 所以 不能省略。
    • 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 键 聚焦导航 （整数值，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不是 有效的整数，用户代理 将遵循 平台约定 来确定该做什么。
    • 谨慎使用：因为，除了隐藏hidden类型的输入外，所有input输入类型 都是可聚焦的，所以尽量别在表单控件上使用此属性。
      • 因为这样做，将需要管理文档中 所有元素的焦点顺序，如果操作不当，可能会损害可用性和可访问性。

---

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

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

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

• ⑵ <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 属性: (表单提交到的) 服务器页面地址（限 type=“submit”，type=“image”）

• ⑸ <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 属性: (表单数据) 编码类型（限 type=“submit”，type=“image”）

• ⑹ <input> 输入标签的 formenctype 表单编码类型 属性
  • 用于
    • 如何覆盖 form 表单 元素的 enctype 编码类型 属性 ?
      • 使用 formenctype表单编码类型 属性
    • formenctype表单编码类型 属性 常与什么 type类型的输入标签 配合使用 ?
      • 提交和图片: 与 type="submit" 和 type="image" 配合使用。
  • formenctype表单编码 属性的属性值 有哪些 ?
    • 发送前,表单数据编码类型
    • ① 编码 所有字符: formenctype="application/x-www-form-urlencoded"
      • 在发送前 对 所有字符 进行 url 编码（默认） .
    • ② 不编码 字符: formenctype="multipart/form-data"
      • 不对字符 编码
        • 什么时候 必须设置 不对字符 编码 ?
          • 当使用有 文件上传 控件的表单时
    • ③ 不编码 特殊字符: formenctype="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 属性: (表单数据) 发送/传输方法 （限 type=“submit”，type=“image”）

• ⑺ <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 属性: 不验证 表单数据 （限 type=“submit”，type=“image”）

• ⑻ <input> 输入标签的formnovalidate 表单不验证 属性
  • 用于
    • 如何覆盖 form 表单 元素的 novalidate 属性 ?
      • 在 input 输入 元素中使用 formnovalidate 表单不验证 属性
    • 如果使用该属性，则提交表单时按钮 不会执行验证过程。
  • formnovalidate 表单不验证 属性 适用于哪些标签 ?
    • formnovalidate 表单不验证 属性,常与什么 type属性值 配合使用 ?
      • 提交 和图片提交的 输入标签: 与 type="submit" 以及 type="image" 配合使用。
      • 因为这两个是提交按钮,会在向服务器 发送数据时，进行对数据的验证.
  • 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 属性: (响应页面) 打开位置 （限 type=“submit”，type=“image”）

• ⑼ <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 属性: 图片高度 （限 type=“image”）

• ⑽ <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属性。(因为,这些一般不需要 预定义的建议值)
    • 支持类型，如 搭配 type="url",url 地址，可以设定预选值。
  • 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">
	网页: <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 属性: 最大值 （max=“number|date”）

• ⑿ <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 属性: (正整数,允许输入的 最大字符数 ，限 type=“text”，type=“password”)

• ⒀ <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 属性: 多个值 （限 type=“email”，type=“file”）

• ⒁ <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 属性: 名称 （name/value 值对， 传递值）

• ⒂ <input> 输入标签的name 名称 属性
  • 用于
    • 如何规定 <input> 输入 元素的名称 ?
      • 使用 name 名称 属性
    • 数据标识+ 数据引用: 如何对 提交到服务器后的 表单数据 进行标识，或者在客户端通过 JavaScript 引用表单数据 ?
      • 使用 input-name 名称 属性
      • 指定名称 + 传递值: 指定 输入控件的 名称的字符串。提交表单数据时，这个名称 和控件的值value 一起提交.
        • △ 特别的name值: name="_charset_",有一个特殊的含义。
          • <input type="hidden" name="_charset_" />
          • 表单数据 字符编码: 如果用作 没有值的隐藏控件的名称name ，那么在 提交期间，值属性 将自动给出 一个包含 提交字符编码的值。,仅针对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 属性: 只读属性 ( 不能修改，限 type=“text”，type=“password” )

• ⒅ <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必需 属性
      • 美[rɪˈkwaɪərd]
    • 如何设置字段为 必填或必选的 ?
      • 使用 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ɪɚ] 字体,不同浏览器中 默认字体可能会不同，但基本上都是等宽的。如谷歌中，默认是monospace字体，默认显示如下↓（默认的宽高和字体）
    • 

---

• ⑷ 多行文本 宽高:
  • 如果想 更改多行文本域的宽高，如何设置？
    • ① 行数和列数 属性: 在 <textarea> 标签中，可以通过 cols 和 rows 属性来规定 文本域 的 尺寸。
    • ② ▲ 优先CSS 宽高 属性: 建议使用 CSS 的 height 高度和 width 宽度属性。
    • 指定确切大小的好处是什么？
      • 设置这些是 保持一致性 的好办法，因为 各个浏览器的默认值 可能不同。

			<label for="comment">请输入您的评论：</label>
            <textarea  id="comment" name="" cols="30" rows="10"></textarea>

• 显示结果

  • 

• ⑸ 如何设置多行文本的 默认值？:

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

            <label for="comment">请输入您的评论：</label>
            <textarea  id="comment" name="" cols="30" rows="10" >我是评论区默认的内容...</textarea>

• 显示结果
  • 

---

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

  • 多行文本的 基线 在各个浏览器中 是一致的吗？
  • 不一致。
  • 原因： 规范未定义， 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: 如何设置 多行文本的最大长度 ？如何设置不能为空？当值无效 和有效时 ，如何设置不同的边框样式？
  • 搭配 最大字符数长度 maxlength 属性，不能为空 require属性。
  • 验证值的有效和无效：搭配 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 包含 全局属性（Global attributes ）。
  • 什么是全局属性？
    • 全局属性是所有 HTML 元素的 公共属性;它们可以 用于所有元素，尽管它们可能对某些元素 并没有起什么影响。
• <textarea> 多行文本域 标签的常用属性 有哪些 ?

属性	属性值	用于
① rows	= number，正整数。	规定文本区内的 可见行数。
② cols	= number，正整数。	规定文本区内的 可见列数。
③ disabled	=disabled	规定 禁用 该文本区。禁用后，呈灰色，没有插入光标，不可输入。
④ name	= string，一个字符串。	规定文本区的 名称。name 属性，用于设置提交表单时，提交给服务器的 关联数据的名称。
⑤ id	= string，一个字符串。	一个 id 属性，允许<textarea>与<label>元素相关联，以实现可访问性。
⑥ 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（默认）。❶ 默认值soft，浏览器不插入 额外换行符。❷ hard ：浏览器 自动插入换行符(CR+LF),即回车换行，遇到cols设置的边界就换。所以，hard属性值，必须搭配 cols属性。❸ 共同点1：在控件的界面中，浏览器 都会自动换行。共同点2：用户按下 enter 的地方，在提交值中，都会保留换行。❹ 区别：在提交到服务器的文本中，hard会保留自动换行，转化为 %0D%0A，soft 不会保留 浏览器自动的换行符。	提交表单时，在提交值中， 文本是否保留 浏览器的自动换行。
② autofocus	=autofocus	规定在 页面加载后文本区域 自动获得焦点。
③ form	= form_id	规定文本区域 所属 的一个或多个 表单。让标签可以写在 form 标签之外的位置。
④ maxlength，minlength	=number，非负整数，即 正整数。因为字符的数目，不可能是负值或浮点数。	规定文本区域的 最大和最小字符数。如果 未指定此值，则用户可以输入 无限个字符。
⑤ placeholder	=text	规定描述文本区域 预期值 的简短 占位符提示。
⑥ required	=required	规定文本区域 是必填的。

---

⑴ wrap 属性: 提交值中，文本是否保 留自动换行符

• ⑴ <textarea> 多行文本域 标签wrap 属性
  • 用于
    • 如何设置控件中的提交值中的 文本的换行方式 ?
    • 使用 wrap （ 美 /ræp/），换行 属性
  • 哪些浏览器支持 wrap换行 属性 ?
    • 所有主流浏览器 都支持 wrap 属性。
  • 语法
    • <textarea wrap="soft|hard">
  • 属性值
    • ① 不自动 换行: soft
      • 当提交数据时，textarea 中的文本 不保留 自动换行符。默认值。
      • CR+LF 换行回车对: 浏览器 确保值中的 所有换行符都由一个CR+LF对 组成，但 不插入 任何额外的换行符。
      • 自动换行 失效,没有额外换行符.
    • ② 自动 换行：遇到cols设置的边界换: hard
      • 自动换行: 如何实现自动换行？
        • 浏览器 自动插入换行符(CR+LF),即回车换行，使每一行的宽度 不超过控件的宽度;
          • ❶ 回车 CR：Carriage Return，对应 ASCII 中转义字符 \r，表示回车 ，定位 在左边界。
          • ❷ 换行 LF：Linefeed， 美 /ˈlaɪnfiːd/，对应 ASCII 中转义字符 \n，表示换行，向下移一行。
          • ❸ 回车换行：CRLF：Carriage Return & Linefeed，\r\n，表示回车并换行，即 下一行的左边界。
      • 包含在 数据中: 当在表单中提交时，textarea 中的文本 换行（包含换行符）。
      • 必须 搭配 列数属性 cols: 当使用 “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>

• 把上面的代码，输入 W3School TIY Editor 这个在线编辑器中，可以连接 W3School 的服务器，自己测试结果。
  
  

• 属性值 hard 和 soft 的区别有哪些？

  • 共同点1：在控件的界面中，浏览器 都会自动换行。
  • 共同点2：用户按下 enter 的地方，在提交值中，都会保留换行。
  • 区别：在提交到服务器的文本中，hard会保留自动换行，转化为 %0D%0A，soft 不会保留 浏览器自动的换行符。
    • 回车换行:%0D%0A
  • wrap="hard"的自动换行:
    • 提交数据时, 自动换行符号 也会被提交.
    • 如图， find ,building 前面都有一个 回车换行,结尾处 的后面有一个回车换行
      • 
  • 如果 textarea-wrap="soft"
    • find 和 building 前的自动换行,在提交值时，不会保留。
      

---

1.6 ★ button 定义一个 按钮 （type 属性必需，value 属性值=标签内容）

• ⑴ 用于
  • 可单击按钮: 如何定义一个 可单击的按钮 ?
    • 使用 <button>按钮 标签
    • HTML元素是一个 交互式元素。
      • 什么是 交互式元素？可由用户 （鼠标、键盘、手指、语音命令或其他辅助技术）激活。一旦激活，它就会 执行一个 可编程的操作，比如提交一个表单或打开一个对话框。
      • 总结：激活后，可执行某个操作。
    • 使用范围:
      • 文档 或者表单中 需要 按钮的地方. 元素表示 可单击按钮，可在 需要简单、标准按钮功能的 表单或文档中的任何地方 使用该按钮。
    • 按钮 默认外观是怎样的？:
      • 默认情况下，HTML 按钮 通常以类似于 （运行用户代理的） 平台的样式 显示。
    • 按钮的外观 可以更改吗？
      • 可以。可 使用 CSS 更改按钮的外观。
• 示例

            <button type="button">我是按钮的标签内容</button>
            <button type="button"></button>

• 按钮标签 button 有无标签内容的样子 是怎样的？
  • 后面的是默认 无标签内容的样子。
  • 

---

• ⑵ 标签内容: 按钮标签 button 的标签内容,可以是什么 ?
  • 文本或图像等。
• ⑶ 不允许的 标签内容: 按钮 标签 <button> 的内容，不能是什么 ?
  • 图像映射等 不能是可交互的内容。
  • 为什么 不能是图像映射等 可交互的内容？
    • 因为有干扰，同时有两个交互的操作，会回应的是哪个呢。
    • 干扰行为: 比如 图像映射和按钮，都需要对单击做出回应时，就会产生错乱。

---

• ⑷ 两种按钮的 区别: <button> 按钮标签 与 <input type="button"> 输入按钮标签 相比 有什么区别？
  • 关键词：标签内容和样式。
  • ① 能否放置 标签内容: 使用 input 元素创建的按钮 input-type="button" 不可以放置内容,因为 <input>输入标签 是空标签.
    • 按钮标签 button 可以添加 文本 和 HTML 标签(例如 <em>, <strong>, <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> 输入元素。为什么？
        • 被提交值的差异：因为不同浏览器提交的，可能是不同位置的值，可能是 ❶ 标签内容，也可能是 value 属性的 ❷ 属性值。这就造成 提交值的差异。
    • 被提交值 的区别：不同浏览器中 有什么区别？
      • 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自动获得焦点 属性
  • 如何让按钮 在页面加载时 有输入焦点？
    • 使用 自动获得焦点 autofocus 属性。
  • 自动获得焦点的按钮的样式 是怎样的？
    • 一般会加一个边框，不同浏览器加的边框 颜色可能会有不同。

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

• 

• 谷歌和360浏览器中：

  • 

• 按钮文本: 按钮上显示的文本 怎么设置 ?

  • = <button>按钮的 标签内容。

---

⑵ disabled: 禁用

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

  • 如何 阻止用户与按钮交互:让它不能 被按下或聚焦？
    • 使用 布尔属性，禁用属性 disabled 属性。
    • 如果 使用 js 修改禁用状态，在 火狐浏览器 firefox 出现问题 没有刷新对禁用的设置，参考 html - Bug With Firefox - Disabled Attribute of Input Not Resetting When Refreshing - Stack Overflow 。

• 示例：一个被禁用的按钮

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

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

---

⑶ form: 绑定表单

• ⑶ <button>按钮标签的form表单绑定 属性
  • 如何 关联按钮 和 它所属的表单？
    • 使用 表单绑定 form 属性。
  • form的属性值 有什么限制？
    • 必须是 ❶ 同一文档中的 ❷ 表单标签<form>的 id。
  • 如果没有设置这个form属性，<button>属于谁？
    • 与它的祖先<form>元素相关联(如果有的话)。
  • form 属性的好处 有哪些？
    • ① 写标签 不挑位置：无论 button 标签在 文档中的任何位置，该属性都可以将<button>元素与<form>元素关联，而不仅仅是在<form>中。
    • ② 覆盖祖先 form，改祖宗：还可以覆盖祖先<form>元素，就算 button标签 已经在 form 标签中，也可以给它重新找个 别人的祖宗 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服务器页面 地址 属性
  • 如何指定 处理（按钮提交的信息的） 地址URL？
    • 使用 服务器页面地址 formaction 属性。
  • formaction 覆盖了哪个属性？
    • 覆盖按钮的 所属表单的 （处理数据的）服务器页面地址 action 属性。
    • 如果没有所属的表单，则不执行任何操作，为什么？
      • 因为没有所属的表单，数据就不会被提交，更无法让服务器来处理了。
  • formaction 和 action 的区别是什么？
    • 共同点： 都是指明了 （用来处理提交的数据的）服务器页面的地址。
    • 区别：❶ 属性名写法不同，❷ formaction的属性值 可以覆盖 action的属性值，反之不可。
  • 搭配的 按钮类型: 提交 type="submit"
    • 为什么 button-formaction和 button-type="submit" 要搭配使用？
      • 因为这个属性 主要针对 数据提交的,所以要和提交按钮 搭配使用。
• 示例： 如何让数据提交到 不同的服务器页面？
  • 带有两个提交按钮，每个提交按钮 使用不同的 action，就可以提交到 不同的服务器页面。
    • 如果 提交按钮 没有设置 formaction，数据默认提交到哪里？
      • 把数据提交到，提交按钮 所属表单 form标签的 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，该值是其他浏览器的默认值）。
      • 按钮 将表单数据 提交到服务器。
      • 默认值：❶ 没设置 该属性，或属性值是❷ 空值或❸ 无效值，都默认是 提交type="submit"（IE中除外）。
    • ② 按钮: button
      • 该按钮是 可点击 的按钮（IE的默认值）。
      • 无默认行为：type=button时，该按钮没有默认行为，在默认情况下 按下时 不执行任何操作。
      • 用处：它可以让客户端脚本 侦听元素的事件，这些事件 在事件发生时被触发。
    • ③ 重置: reset
      • 该按钮是 重置按钮（清除表单数据）。
      • 该按钮将 ❶ 所有控件 ❷ 重置为初始值，如同 <input type="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 属性的值
  • 所以设置成一样的 可以解决因为浏览器造成的 提交不同按钮值的问题

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

  • 谷歌，360，火狐中：空白。
  • 

           <button type="reset"></button>
           <button type="submit"></button>

• 更改 按钮的显示文本: 如何 更换按钮的显示文本?
  • 改变 提交和重置按钮的标签内容(和 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 中 对元素进行引用。
  • ② 引用 数据: 在表单提交之后，对表单数据进行引用。
    • 当按钮用于 提交表单时，按钮的名称name （与作为表单数据一部分的）按钮值 value 成对提交。name/value 值对。
• 名称的 不唯一
  • 不同的 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>

• 不设置 name 属性 会提交值吗？

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

• 

• 

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

---

1.7 ★ select 可含有多个选项的 下拉列表

• 用于
  • 下拉列表: 如何创建 (单选或多选) 下拉列表？即 如何提供 一个有很多选项的菜单?
    • 使用 下拉列表 标签 <select>
  • 选项菜单: 提供一个 含有多个选项的菜单，点开，里面有很多选项。
• 下拉列表的 选项: 如何设置 下拉列表中的 选项 ?
  • 在 <select> 下拉列表 元素中,使用子标签 <option> 选项 标签。
• 示例

            <label for="多个选项">请选择一个选项：</label>
            <select name="options" id="多个选项">
                <!--option[value=选项$]{选项$}*5-->
                <option value="选项1">选项1</option>
                <option value="选项2">选项2</option>
                <option value="选项3">选项3</option>
                <option value="选项4">选项4</option>
                <option value="选项5">选项5</option>
            </select>

• 显示结果

  • 
  • 

• 用户看到的 显示出来的选项 是哪个部分设置的？

  • <option>标签的内容（如果 <option> 也设置了 label属性，下拉列表中，优先显示 label属性值。）。给用户看到的，是标签的内容（或label属性值）。不是value的属性值哦。

    • 

  • value的属性值 有什么用？

    • 一般用在提交数据时， 作为被提交的值，提交到服务器。

• 上方示例，代码如下 ↓

            <label for="pets">请选择你喜欢的宠物：</label>
            <select id="pets" name="pets">
                <optgroup label="四腿类的宠物">
                    <!-- label属性值和标签内容 同时存在，优先显示 label属性值-->
                    <option value="dog" label="狗砸">狗狗</option>
                    <!-- label属性值和标签内容 同时不存在，只有value属性值，这一行为空白-->
                    <option value="cat"></option>
                       <!-- label属性值为空，这一行显示 标签的内容-->                 
                    <option value="cat" label="">猫咪</option>
                </optgroup>
            </select>

• 显示结果
  • 

---

• 组合 下拉列表的选项: (选项组)
  • 如何在下拉菜单中 创建单独的选项组？
    • 可以给 多个<option>元素 添加一个父级标签 <optgroup> 选项分组标签。
    • 如何设置 每个分组的名称？
      • 搭配 选项分组标签<optgroup> 的 贴标签属性 label。label 属性值 就是分组的名称。

            <label for="多个选项">请选择一个选项：</label>
            <select name="options" id="多个选项">
                <!--option[value=选项$]{选项$}*5-->
                <optgroup label="第一组选项">
                    <option value="选项1">选项1</option>
                    <option value="选项2">选项2</option>
                    <option value="选项3">选项3</option>
                </optgroup>

                <optgroup label="第二组选项">
                    <option value="选项4">选项4</option>
                    <option value="选项5">选项5</option>
                </optgroup>
            </select>

• 显示结果

  • 加粗的组名 和缩进的选项。
  • 

• <select>下拉列表 提交的值是什么？

  • ① <option>的 value属性值: 选择 某个选项时，默认 提交给服务器的数据值是谁？
    • 该选项的 value属性值。
  • 如果选项没有设置 值value属性，提交的 是什么值？
  • ② <option>的 标签内容: 则值默认为 <option> 的 标签内容。

---

• 预选值(默认值): option-selected选中 属性
  • 如何设置 带有 预选值的下拉列表 ?

    • 预选值是什么意思 ?

      • 指 预先选中的项目。
      • <option>选项 标签中 , 使用 selected="selected"选中属性,让选项被选中。
        • 示例：<option value="选项3" selected="selected">选项3</option>
        • 

    • <select> 标签中，显示时 默认选中的是哪一个？

      • 第一项。
      • 

    • 属性 区分:

      • 请注意,不是checked属性哦,单选按钮,复选框,默认选择项 用的才是checked属性
      • select标签 的选中项 很特别,用的就是 seleced属性,和标签 很搭配的名字。
        • 如果 在 select标签 中使用 checked 属性，会怎样？
        • 出现错误提示。
          • 

---

• 下拉列表的 样式化:

  • 删除 默认外观: 如何删除 下拉列表（菜单选项） 默认的系统外观？

    • 可以使用 CSS 的 外观 appearance属性 。美 /əˈpɪrəns/。
      • select{appearance: none;}
      • 谷歌中：显示的不再是 默认第一项的“选项一”内容，或设置的预选项“选项三”内容，直接 “选项”两个字。
        • 

  • 样式化 工具: <select>元素的内部结构复杂，难以控制。

  • 如果想获得 完全的控制 该怎样做？

    • 应该考虑使用 一个 良好的 表单 小部件样式化工具的库(如jQuery UI)，或者尝试使用 非语义元素、JavaScript 来滚动 下拉菜单 和 WAI-ARIA 以提供语义。

---

• 示例1: 一个简单的 下拉列表
• 嵌套关系：select > option[value]
  • <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>的 标签内容（如果 <option> 也设置了 label属性，下拉列表中，优先显示 label属性值）。

    • 空白项: 只设置value属性,不设置标签内容和label属性值,会显示会空白项。下图 ↓ 是把第一组的标签内容 都删除后的样子。

      • 

    • value属性 和 标签内容: 所以,<option>一定要同时 value属性和 标签内容,一个为了传递值 给服务器,一个为了显示 给用户看。

  • 默认显示数目: 载入后,默认显示几项 ?

    • 默认 只显示 一项。一般默认是选项一的 标签内容。
      • 

  • 默认 选择项:

    • ① 预选值: 优先显示的是 设置了selected选中属性的选项。
    • ② 第一个选项: 没有设置 selected默认选中 选项的话,默认显示 什么内容 ?
      • 第一个选项的 标签内容（如果 <option> 也设置了 label属性，下拉列表中，优先显示 label属性值）。
        

---

• 示例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 属性。 美 /ˈmʌltɪpl/。
    • 用户操作时 如何实现多选？
      • 用户用鼠标时，可以按住Ctrl、Command或Shift键(取决于 操作系统)，然后单击 多个选项来 选择或取消选择。
      • windows 系统，按 ctrl，再用鼠标单击。
        • 

  • 可见行数: 如何设置 界面可见的行数？

    • 使用 可见行数 size属性，一次可 显示4行;可以滚动查看 所有选项。
    • 如下图 ↓，前面的是 默认的展开样式，后面的是 设置了可见行数为 4 后的样式，出现了滚动条。
      • 

  • 如何禁用 单个选项？

    • 在该<option> 标签中，使用 禁用disabled 属性。
      • <option value="hamster" disabled="disabled">仓鼠</option>
      • “仓鼠”选项包含 禁用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自动获得焦点 属性
  • 如何指定表单控件 在页面加载时 具有输入焦点（input focus）？
    • 使用 select-autofocus自动获得焦点 属性。该属性是 布尔属性（Boolean attribute）。
• 自动获得焦点的 下拉列表

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

• 获得输入焦点，下拉列表的边框 一般会有变化。如下 ↓
  • 
  • 

---

⑵ disabled 属性: 禁用

• <select> 标签的 disabled禁用 属性
  • 如何让用户 不能与控件交互？
    • 使用布尔属性 禁用disabled 属性。
  • 一个被禁用的下拉列表
    • <select disabled="disabled">
      
• 被禁用的下拉列表 还能选中选项吗？
  • 无法选中。

---

⑶ form 属性: 所属表单

• ⑶ <select> 标签的 form绑定 所属表单 属性
  • 如何将 <select>标签 和 所属的 <form> 表单标签 相关联？即，如何指明 select 标签 属于哪个<form>？
    • 搭配 所属表单 form 属性。
  • form的属性值: 该属性的值 必须是 同一文档中的某个 <form>表单 元素的 id 属性值。
    • select-form="form-id"
    • 如果没有设置这个属性，<select>与谁相关联？
      • 与它的祖先<form>元素相关联(如果有 设置 祖先<form>的话)。
• 示例： 一个 位于表单之外的 下拉列表,但是 仍然属于表单
• 嵌套关系：form>input，select>option
  • <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多选 属性。默认是 只能选中一个选项。
    • 设置 多选 multiple 属性后，下拉列表会如何显示？
      • ① 默认可见行数变4行：默认显示的可见行数，变为 4 行（注意，此处没有设置 size 属性值）
      • ② 滚动条：会不会显示 滚动条，取决于什么？
        • 能不能显示出 所有的信息。
        • 

  • 下拉列表的 多选操作: 在不同操作系统中，如何选择多个选项 ?

    • 对于 windows：

      • 按住 Ctrl 按钮 来选择多个选项

    • 对于 Mac：

      • 按住 command 按钮 来选择多个选项

    • 由于上述差异的存在，所以，能多选时，需要 告知用户可以 使用多项选择，最好把搭配使用的功能键也告知。但多选时，对用户更友好的方式 是使用复选框。

      • 选中两项。↓
        • 

---

⑸ size 属性: 可见行数

• <select> 标签的 size 可见行数 属性

  • 用于
    • 可见行数: 如何规定 下拉列表中 一次可见的行数 ?
    • 使用 可见行数size 属性
  • 可见行数 和滚动条的关系

    • 可见行数 大于 1，且小于列表中选项的 总行数，意思就是 显示不完所有的信息，浏览器会显示出 滚动条。

      • 等于1，显示不完所有的信息，也不会出现滚动条。位置太小。

        • 

      • 滚动条表示: 可以查看 更多选项。

        • 

    • size="4"，大于等于 列表的总行数，能全部显示，不会出现滚动条。

      • 

• 示例：把下拉列表的 可见行数,设置为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 对选项 进行分组 （label 必需属性）

• 用于

  • 如何 对选项 进行分组 ?

    • 使用 <optgroup>选项分组 标签
      • 

  • 下拉列表的 选项分组: 在下拉列表 <select>元素中 创建选项分组。

• <optgroup>选项分组标签 的属性 有哪些 ?

属性名	属性值	用于
① label	=text	组名+必需属性.为选项组 设置 分组的名称。
② disabled	=disabled	可选属性.规定禁用该选项组。第二组被禁用。

⑴ label 属性: 分组的名称

• <optgroup>选项分组 标签的label 组名名称 属性
  • <optgroup>选项分组 标签 必需的属性 有哪些 ?
    • 组名: optgroup-label 组名名称 属性
    • 属性值
      • text
    • 如何设置分组后,小组的组名?
      • optgroup-label="text"

---

⑵ disabled 属性: 禁用

• <optgroup>选项分组 标签 disabled 禁用属性

  • <optgroup>选项分组 标签 可选的属性 有哪些 ?
    • disabled 禁用属性
    • 属性值
      • disabled
    • 如何禁用一个 选项组 ?
      • optgroup-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>选项 标签
• 使用范围
  • <option> 标签 搭配哪些标签一起使用？
    • 下拉列表+选项分组+数据列表: 用于 定义包含在<select>、<optgroup>或<datalist>元素中的项。作为这三个元素的选项。即子标签。

      • ① 下拉列表<select>的 选项: select>option

        • 

      • ② 选项分组<optgroup>的 选项: select>optgroup>option。（optgroup不使用在 datalist标签中，仅用于 select标签）

        • 

      • ③ 数据列表<datalist>的 选项。

        • 如何看到数据列表中的选项？
          • 搭配<input>标签，相关联后，点击 文本框可看到选项值。
          • 关联方法：input-list = datalist-id。
        • optgroup 可以在 datalist标签中 使用吗？
          • 不可以。仅用于 select标签。
          • 
          • 
• 上方示例图的代码

            <label for="多个选项">请选择一个选项：</label>
            <select name="options" id="多个选项">
                <!--option[value=选项$]{选项$}*5-->
                <optgroup label="第一组选项">
                    <option value="选项1">选项1</option>
                    <option value="选项2">选项2</option>
                    <option value="选项3">选项3</option>
                </optgroup>

                <optgroup label="第二组选项">
                    <option value="选项4">选项4</option>
                    <option value="选项5">选项5</option>
                </optgroup>
            </select>
            
            <label for="pets-choice">请选择一个喜欢的宠物：</label>
            <input type="text" id="pets-choice" list="all-pets">
            <datalist id="all-pets">
                    <option value="dog">狗狗</option>
                    <option value="cat">猫咪</option>
                    <option value="hamster">仓鼠</option>

                    <option value="parrot">鹦鹉</option>
                    <option value="macaw">金刚鹦鹉</option>
                    <option value="albatross">信天翁</option>
            </datalist>

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

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

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

  • 使用 option-value 值属性

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

属性名	属性值	用于
① disabled	= disabled	规定此选项应在首次加载时被禁用。
② label	=text	指明选项含义的 标注。如果 没设置label属性，它的值就是 <option>标签的内容。如果两者同时存在，优先显示 label 属性值。
③ 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属性，那么它的值就是 标签的内容。

  • 显示

    • 如果同时规定了 label 属性值和 <option>标签的内容，优先显示哪个？

      • 优先显示 label 属性值。第三项和第四项 设置了 label 属性值。
        • 
        • 

    • 如果 没有设置 label 属性值或属性值为空（label=""），选项显示内容的 是什么 ?

      • ① 没有设置 label 属性值：select 和 datalist 都会优先显示<option> 选项 标签的内容。
        • 
      • ② 属性值为空（label=""）时，select 下拉列表中会显示 标签内容。datalist 中的标注，会为空。
      • 修改的都是第二项，标签内容 和第一项的相同。
      • 
      • 

• 上图代码，如下↓

            <label for="pets">请选择你喜欢的宠物：</label>
            <select id="pets" name="pets">
                <optgroup label="四腿类的宠物">
                    <option value="dog">狗狗</option>
                    <option value="dog" label="狗砸">狗狗</option>
                    <option value="cat">猫咪</option>
                    <option value="cat" label="猫猫">猫咪</option>
                </optgroup>
            </select>

            <label for="pets-choice">请选择一个喜欢的宠物：</label>
            <input type="text" id="pets-choice" list="all-pets">
            <datalist id="all-pets">
                    <option value="dog">狗狗</option>
                    <option value="dog" label="狗砸">狗狗</option>
                    <option value="cat">猫咪</option>
                    <option value="cat" label="猫猫">猫咪</option>
                    <option value="hamster">仓鼠</option>
                    <option value="parrot">鹦鹉</option>
                    <option value="macaw">金刚鹦鹉</option>
                    <option value="albatross">信天翁</option>
            </datalist>

• <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和谷歌 浏览器,下拉列表中 都优先显示的是 标注label属性的值。
    • 

• 输出:

  • 慎用 option 选项标签的 label短选项 属性,因为有浏览器兼容问题
  • 选项 显示的内容:
    • ① <option>标签内容,优先使用
    • ② label属性内容( 尽量不要使用,选项的这个属性,有浏览器兼容问题)

---

• ⑶ <option> 选项 标签的 value 值属性

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

• ▲总结:

  • 发送到服务器的值 = value 属性值(或者标签内容,当value未设置时)
  • 浏览器 显示在下拉列表中 的内容 = <option> 标签内容 (或者label属性内容,当设置label属性时,部分浏览器显示的是此属性的内容)
  • 没有value 属性,选项的值 = <option> 标签的内容。

• 选项标签<option>的value值 在下拉列表select和数据列表datalist中有什么区别？

  • ① 在下拉列表select中，option-value属性值 都不会被显示。
  • ② 在数据列表datalist中，option-value属性值 有时会被显示出来。
    • 注意：<datalist>标签中的<option>标签，只设置 value属性值，而且value属性可用于传递值。label属性和标签内容，都不设置，因为value属性和它俩一起使用，在浏览器显示 会出现差异。
      • 只设置 value属性值，各个浏览器都只会显示value属性值，达成一致。
    • 火狐浏览器中，有标签内容和label属性时，不显示 value属性值。
      • 
    • 谷歌浏览器中，显示 value属性值，和标签内容或label属性值一起显示。
      • 

• 上方示例图的代码，如下↓

            <label for="pets-choice">请选择一个喜欢的宠物：</label>
            <input type="text" id="pets-choice" list="all-pets">
            <datalist id="all-pets">
                    <!--<option value="dog">狗狗</option>-->
                    <option value="dog">狗狗</option>
                    <option value="dog" label="狗砸">狗狗</option>
                    <option value="cat">猫咪</option>
                    <option value="cat" label="猫猫">猫咪</option>
                    <option value="hamster">仓鼠</option>
            </datalist>

• 示例：带有发送到服务器的值 的下拉列表：

<select name="cars">
  <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 元素 定义 标注说明(for 属性 关联控件)

• 用于
  • 如何为 某些控件定义 标注说明 ?
    • 使用 <label>标注 标签
• 可以与<label> 标签相关联的标签 有哪些？
  • 7个标签。按钮 <button>,输入标签 <input> (except for type="hidden"，类型为隐藏值的不需要标注), <meter>, <output>, <progress>, 下拉列表 <select> and 多行文本 <textarea>.
  • 共同点：这些标签一般 都需要 标注说明。

---

• <label>与<input>元素 相关联的 优点:
  • ① 利于 获得焦点: 点击 <label>标注标签的内容,浏览器会有什么反应？
    • 就会自动将 焦点转到 和标签相关的表单控件上。能输入的地方，会获得输入光标，可以立刻输入文字。

      • 

      • 增加的命中区域： 因为label标签的内容 比较容易被点击到，所以，可以为任何试图激活输入的人 提供了一个优势，包括那些 使用触摸屏设备的人。

  • ② 利于 理解: 屏幕阅读器 将 读出<label>标签，使辅助技术用户 更容易理解 应该输入什么数据。
  • 关键词：焦点，理解。

---

• 关联 表单元素: 如何把<label>标注标签 关联到表单元素 ?
  • ① 显式 关联: for属性
    • <label>标注 标签的 for关联 属性 , 与 相关元素的 id 属性值 相同。
    • label-for="input-id""
  • ② 隐式 关联: 直接 把标签 嵌套在 label标签中.
    • 将<input>元素直接 嵌套在<label>中，这种情况下 不需要for和id属性，因为关联是隐式的。
    • 关键词：显式，隐式，for，嵌套。
• 多个<label> 可以关联同一个 表单控件吗？
  • 可以。
  • 

            <label for="username">请输入您的用户名:</label>
            <input id="username" type="text">
            <label for="username">忘记您的用户名?</label>

• 浏览器支持

  • 

• 示例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属性值。
        • 关键词： for属性，id属性。
• 关联控件的 数目 和匹配原则:
  • 只关联一个控件. 一个<label> 只能关联到 一个控件 1:1,( 但 一个输入<input> 可以 与多个<label>相关联,1:n) 。
    • 即 <label>标签可以有多个，但被关联的控件，只能有一个。
  • 匹配第一个 控件: 如果有多个控件 id属性值相同，匹配哪个控件？
    • 一般 id属性值应该是唯一。如果不唯一，id与for属性值 匹配的第一个元素 是这个label元素的 带标签控件(如果它是一个可标注的 元素)。
  • 哪些控件 是不会被匹配的？
    • 不可标注: 如果控件不是可标注的，那么for属性就没有作用。
    • 不是第一个匹配的: 如果还有其他元素 先匹配了id值，那么不是第一个,在文档的后面元素，将不考虑它们。
• 关联 单击事件: 当单击<label>时，关联的标签 也会出发 相应的单击事件。一般会获得输入焦点。
• <label>的使用 和访问性
  • 干扰激活: 不要 将交互式元素(如锚点<a>或按钮<button>) 放在标签中。这样做 使用户 很难激活 与标签相关的表单输入。
    • 这就意味着 交互式控件，如 <button> 不能使用隐式关联，只能用 label-for属性关联。
    • 为什么 交互式控件一般 也不需要 <label>来标注说明？
      • 具有type="button"声明和有效值value属性的<input>元素，不需要与之关联的标签。这样做实际上可能会 干扰辅助技术 解析按钮输入的方式。这同样适用于<button>元素。
  • 干扰 辅助技术: 不要 将标题元素<h1>,<h2>... 放置在<label>中, 会干扰许多 辅助技术，因为标题通常用作 导航辅助。
  • 总结：优先 使用 label-for属性 进行显式关联，把其他标签放在 <label>标签中可能会出现各种问题，造成访问性问题。
    • 为什么 同为交互式的标签之间，一般互不嵌套？
      • 因为各自都有默认行为，响应的时候 容易出问题，两个操作，该执行哪个？如<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>

• 输出:
  • 两种方式下,点击关联文本,都会让 关联标签 获得输入焦点。

---

1.11 ★ fieldset 将 表单的 相关联元素 分组 （legend 表单分组说明）

• 用于
  • 如何将 表单的相关联的元素 分组 ?(表单元素分组)
  • 组合 相关元素
    • 使用 <fieldset>表单元素分组 标签
    • 相关元素 一般是什么？
      • 一般是 <label>和它关联的控件，如果有多对，可以作为一个分组。
      • 一般只要是相关联的，可以归于一类的信息，也可以分一组。
    • 表单元素 分组:在表单中 对多个控件 和标签(<label>)进行分组。
      • 

            <fieldset>
                <legend>请选择您最喜欢的宠物：</legend>
                <!--(label[for]+input[type=radio id])*5-->
                <label for="cat">猫咪</label>
                <input id="cat" type="radio" name="pets" />
                <br />
                <label for="dog">狗狗</label>
                <input id="dog" type="radio" name="pets" />
                <br />
                <label for="hamster">仓鼠</label>
                <input id="hamster" type="radio" name="pets" />
                <br />
                <label for="parrot">鹦鹉</label>
                <input id="parrot" type="radio" name="pets" />
            </fieldset>

• 分组 显示外观: <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>元素中的表单元素 不会被禁用。
    • <legend>标签的内容 可被选中。
    • 

---

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

<form action="/example/html5/demo_form.asp" method="get" id="hobbyform">
你最喜欢的小吃是什么? <input type="text" name="snack" /><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属性 吗 ?不是。)
  • fieldset-form属性 会自动地被所有的子标签继承吗？ 即，<fieldset> 绑定所属表单后，它包含的子标签 <input> 元素 会不会自动绑定表单了？
    • 不会。所以，只设置了 fieldset-form属性 ，并不能让分组中的 其他标签也一起绑定到 某个所属的表单，子标签的所属表单 需要具体指定。
  • 如何让 <fieldset> 中的 <input> 元素与表单关联？
    • 要直接在<input>元素上使用form属性。
    • 如：<input type="text" name="name" form="hobbyform"/>，这个时候 输入的名字才会被提交。
    • 

---

• 示例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[value] 标签)

• 用于

  • 如何定义 一组数据列表 ，让其他控件有 一组可选的选项集？
    • 使用 <datalist>数据列表 标签
    • 一组 可用的值: 元素包含一组<option>元素，这些选项标签在其他控件 表示 可用的值，就是一组选项。
      • 

• 使用

  • 可能的值: 如何为 input 输入标签 预设一组选项（可能的值 ）?
    • 使用 <datalist>数据列表 标签

• 显示

  • datalist 数据列表 和子元素<option> 选项标签的内容 会显示吗 ?

  • 不同浏览器中 不一样,有浏览器差异。

    • 一起显示: 谷歌浏览器会 把value属性值和 option标签内容或label属性值,一起显示给用户。

      • 

    • 只显示 option标签内容：两个都有时，Firefox 只显示option标签内容。没有标签内容和label属性值时，会显示value属性值。

      • 

      • 

  • 不要指定 数据列表的 选项<option>标签内容和 option-label属性: 只设置 value属性值。

            <label for="pets-choice">请选择一个喜欢的宠物：</label>
            <input id="pets-choice" list="all-pets" type="text">
            <datalist id="all-pets">
                <option value="dog">狗狗</option>
                <option label="狗砸" value="dog">狗狗</option>
                <option value="cat">猫咪</option>
                <option label="猫猫" value="cat">猫咪</option>
                <option value="hamster">仓鼠</option>
            </datalist>
            
            <!--没有 label属性，也没有标签内容时，只会显示value的属性值-->

            <label for="pets-choice2">请选择一个喜欢的宠物：</label>
            <input id="pets-choice2" list="all-pets2" type="text">
            <datalist id="all-pets2">
                <option value="dog"></option>
                <option value="cat"></option>
                <option value="hamster"></option>
            </datalist>
            <!--没有标签内容，但value属性和label属性同时存在时，火狐只显示label属性值，谷歌两个都显示，浏览器仍然有差异-->
            <label for="pets-choice3">请选择一个喜欢的宠物：</label>
            <input id="pets-choice3" list="all-pets3" type="text">
            <datalist id="all-pets3">
                <option label="狗砸" value="dog">狗狗</option>
                <option label="猫猫" value="cat">猫咪</option>
                <option label="鼠砸" value="hamster">仓鼠</option>
            </datalist>

• 没有 label属性，也没有标签内容时，会显示什么？

  • 只会显示value的属性值。
  • 

• <option> 没有标签内容，但value属性和label属性同时存在时，火狐只显示label属性值，谷歌两个都显示，浏览器仍然有差异。

• 谷歌

  • 

• 火狐

  • 

• <datalist>中的<option>的显示问题，目前有3种情况，

  • ① <option> 没有标签内容，但value属性和label属性同时存在时
    • 火狐只显示label属性值，谷歌两个都显示，浏览器仍然有差异。
  • ② 没有 label属性，但<option> 有标签的内容和value的属性值
    • 火狐只显示标签内容，谷歌会一起显示，浏览器有差异。
  • ③ 没有 label属性，也没有标签内容时
    • 都只会显示value的属性值。

• 所以，解决浏览器兼容问题的方法是：

  • <datalist>标签中的<option>标签，只设置 value属性值，而且value属性可用于传递值。label属性和标签内容，都不设置。
  • 注意：数据列表 <datalist> 没有绑定控件时，用户能看见吗？
    • 看不见。绑定后，点击所绑控件，才会显示。

---

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

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

  • <input type="text" list="cars" /> = <datalist id="cars">
    • input-list属性值 = datalist-id 属性值
    • <input>想绑定数据列表，要派出哪个员工负责？
      • 所属列表list属性。
    • list属性找 数据列表<datalist> 的哪个员工？
      • id属性。
    • 如何达成一致？
      • 两家公司的员工 签同一个合同，即 属性值相同。list属性值=id属性值。

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

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

• 为了避免浏览器兼容问题：<datalist>中的<option>的标签内容应该 全部删除。

  • 谷歌中，value属性值和标签内容 两个都显示。
  • 火狐中，只显示标签内容。
    • 

<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的属性值（也不能设置label属性）,标签内容和label属性 一般都不设置，防止出现 浏览器显示的兼容问题。

---

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

• 用于

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

• 浏览器支持

  • 

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

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

---

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

• <output>输出 标签的 for 关联属性

  • 属性值
    • output-for="element_id "
    • id 列表: 多个 id 用什么分隔？
      • 空格。
      • 提供 输入值: 表示 这些id的元素 为计算 提供了输入值(或影响了 计算)。

• 执行计算后 在哪里输出结果？

  • 在 <output> 输出元素中显示结果。

• 输出结果<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 事件: 在用户 输入时(值改变时)触发。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>

• <output>值、名称和内容会在表单提交期间 提交吗？
  • 不会。

---

• 更新
  • 2022.05.20 此次删除了一些过时的内容，更新了更多的示例和图片，并对重点 都进行了着重强调。方便大家理解和记忆。
• 捐助: 喜欢这篇文章吗? 创作不易,捐助此文,向团团 表示鼓励和支持吧~❤
  
• 捐助二维码:
  

---

• 参考文档
  • W3School 教程
  • MDN HTML 教程
  • MIME 百度百科介绍
  • MIME 参考手册

---

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

---

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

---

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