【表单标签】

表单标签

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、legendlabel 等元素。
  • 块级元素(块标签)

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

1.3.1 form 表单标签的常用属性

  • <form> 表单标签 的属性 有哪些 ?
属性名属性值用于
acceptMIME_type已废弃. HTML 5 中 不支持 。一个逗号分隔的列表,包括 服务器 能接受的 内容类型。作为替代,使用 <input> 元素中的 accept 属性。
② accept-charsetcharset_list服务器支持的 字符集: 规定服务器 可处理的 表单数据 字符集
③ actionURL处理表单的程序 url (服务器页面): 规定当提交表单时 向何处发送 表单数据。
④ enctype见说明提交内容的 编码类型: 规定在发送表单数据之前 如何对其 进行 编码
⑤ methodget ,post数据 提交方法: 规定用于 发送 表单数据的 HTTP方法
⑥ nameform_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 标准。适用于 所有拉丁文字字母 。

  • postget 方法详解
    • º⑴ 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= disabledinput 元素加载时 禁用 此元素。
⑤ 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 类型列表 ?
    • 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的顺序。
      • 注:省略 和无效值: 如果省略了tabindextabindex不是 有效的整数,用户代理 将遵循 平台约定 来确定该做什么。

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 最小值 属性配合使用,以创建 合法值的范围。设置 最大值/最小值 和间隔值.
    • stepmax 以及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, topframe-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> 类型,邮件和文件上传 类型的 输入标签:emailfile。可以选择多值 的类型 (比如,多个邮件,多个上传文件)
  • 如何设置 可接受多个值的 文件上传字段:
<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 属性: 输入的类型


1.5 ★ textarea 定义 多行文本输入

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

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

    • ① 行列 属性: 可以通过 colsrows 属性来规定 文本域 的 尺寸
    • ② ▲ 优先 宽高 属性: 建议使用 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=autofocushtml5. 规定当 页面加载时 按钮应当 自动获得焦点。(文档中只有一个元素 可以具有此属性。)
② 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、CommandShift键(取决于 操作系统),然后单击 多个选项来 选择或取消选择。
    • 显示 多行: 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>中,这种情况下 不需要forid属性,因为关联是隐式的.
  • 浏览器支持

    • 在这里插入图片描述
  • 示例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) 。
    • 匹配第一个: 文档中idfor属性值 匹配的第一个元素 是这个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>

在这里插入图片描述


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



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

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

在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页