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

1.表单标签

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

1.1 表单标签 有哪些 ?

标签名	用于
①	定义供用户输入的 HTML 表单。
②	定义 输入 控件。
③ </code></td> <td align="left">定义 <strong>多行文本</strong> 输入控件。</td> </tr> <tr> <td align="left">④ <code><button></code></td> <td align="left">定义 <strong>按钮</strong>。用户激活后，可执行某个操作。❶ <code>type</code> 属性必需。❷ <code>value</code>属性值要 = 按钮的标签内容）。</td> </tr> <tr> <td align="left">⑤ <code><select></code></td> <td align="left">定义 <strong>下拉列表</strong>。</td> </tr> <tr> <td align="left">⑥ <code><optgroup></code></td> <td align="left"><strong>选项 分组</strong>. 定义选择列表中 相关 <strong>选项的组合</strong>。<code>label</code> 必需属性。（属性值是 分组后的小组的名称。不写为一行空白。）</td> </tr> <tr> <td align="left">⑦ <code><option></code></td> <td align="left">定义 一个 <strong>选项</strong>。 用于 定义包含在<code><select></code>、<code><optgroup></code>或<code><datalist></code>元素中的项。作为这三个元素的选项。即 子标签。</td> </tr> <tr> <td align="left">⑧ <code><label></code></td> <td align="left">定义 某些控件的<strong>标注说明</strong>。用 <code>for</code> 属性 关联控件。 （搭配7个标签。按钮 <code><button></code>,输入标签 <code><input></code> (except for <code>type="hidden"</code>，类型为隐藏值的不需要标注), <code><meter></code>, <code><output></code>, <code><progress></code>, 下拉列表 <code><select></code> and 多行文本 <code><textarea></code>.）</td> </tr> <tr> <td align="left">⑨ <code><fieldset></code></td> <td align="left"><strong>表单元素 分组</strong>. 定义围绕 表单中元素的 <strong>边框</strong>。</td> </tr> <tr> <td align="left">⑩ <code><legend></code></td> <td align="left"><strong>表单元素分组 标题(说明)</strong>. 定义 fieldset 元素的 <strong>标题</strong>。</td> </tr> </tbody> </table> <hr> <h3>1.2 HTML5 中的表单标签 有哪些 ?</h3> <table> <thead> <tr> <th align="left">标签名</th> <th align="left">用于</th> </tr> </thead> <tbody> <tr> <td align="left">① <code><datalist></code></td> <td align="left">定义 <strong>数据列表</strong>。<code><datalist></code>标签中的<code><option></code>标签，<strong>只设置 <code>value</code>属性值</strong>，而且<code>value</code>属性可用于传递值。<code>label</code>属性和标签内容，都不设置，因为<code>value</code>和它俩一起设置，浏览器显示会出现差异。</td> </tr> <tr> <td align="left">② <code><output></code></td> <td align="left"><strong>结果容器</strong>. 定义 <strong>输出</strong> 的一些类型。</td> </tr> </tbody> </table> <hr> <h3>1.3 ★ form 供用户输入 创建 HTML 表单 (交互+收集 用户信息,表明 我是表单)</h3> <ul> <li> <p><strong>收集 用户信息</strong></p> <ul> <li>如何 为用户输入 创建 HTML 表单 ? <ul> <li>使用 <code><form></code> 表单标签 (表明 “我是表单”)</li> <li><strong>和用户交互 + 传输数据</strong>: <code><form></code>元素表示 一个文档区，所有的表单元素,一般 都写在这个<code>form</code>标签中.<br> - 主要用于: 向服务器传输数据, 收集 用户信息,跟用户 交互,比如,常见的注册页面:<br> - <a href="http://img.e-com-net.com/image/info8/31ea04f46fac409ca1cdbb36259bed49.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/31ea04f46fac409ca1cdbb36259bed49.jpg" alt="【表单标签（知识点超全版本）】_第1张图片" width="361" height="400" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> <li> <p><code><form></code> 表单标签 能包含哪些标签 ?</p> <ul> <li><code><input></code> 元素 <ul> <li>比如文本字段、复选框、单选框、提交按钮 等等。</li> </ul> </li> <li><code>textarea、fieldset、legend</code> 和 <code>label</code> 等元素。</li> </ul> </li> <li> <p><strong>块级元素(块标签)</strong></p> <ul> <li><code><form></code> 表单标签是 块级元素吗 ? <ul> <li>是的，元素前后会换行.</li> </ul> </li> </ul> </li> </ul> <hr> <h4>1.3.1 form 表单标签的常用属性</h4> <ul> <li><code><form></code> 表单标签 的<strong>属性</strong> 有哪些 ?</li> </ul> <table> <thead> <tr> <th align="left">属性名</th> <th align="left">属性值</th> <th align="left">用于</th> </tr> </thead> <tbody> <tr> <td align="left">① <s>accept</s></td> <td align="left">MIME_type</td> <td align="left"><strong>已废弃</strong>. HTML 5 中 不支持 ，已被删除。一个逗号分隔的列表，包括 服务器 能接受的 <strong>内容类型</strong>。作为替代，使用 <code><input type=file></code> 元素中的 <code>accept</code> 属性。</td> </tr> <tr> <td align="left">② accept-charset</td> <td align="left">charset_list</td> <td align="left"><strong>服务器支持的 字符集</strong>: 规定服务器 可处理的 表单数据 <strong>字符集</strong>。</td> </tr> <tr> <td align="left">③ action</td> <td align="left">URL</td> <td align="left"><strong>处理表单的程序 url (服务器页面)</strong>: 规定当提交表单时 <strong>向何处发送</strong> 表单数据。</td> </tr> <tr> <td align="left">④ enctype</td> <td align="left">见说明</td> <td align="left"><strong>提交内容的 编码类型</strong>: 规定在发送表单数据之前 <strong>如何</strong>对其 进行 <strong>编码</strong>。</td> </tr> <tr> <td align="left">⑤ method</td> <td align="left">get ,post</td> <td align="left"><strong>数据 提交方法</strong>: 规定用于 发送 表单数据的 <strong>HTTP方法</strong>。</td> </tr> <tr> <td align="left">⑥ name</td> <td align="left">form_name</td> <td align="left">规定 表单的 <strong>名称</strong>。这个<code>form</code>的名字。在HTML4中，这个用法 不被推荐(作为替代，应该使用<code>id</code>). <strong>唯一性</strong>: HTML5中，一个文档中 有 多个表单<code>form</code>时，<code>name</code>必须唯一,而且必须规定,这样,提交的时候,才能区分 是哪个表单在提交数据。</td> </tr> <tr> <td align="left">⑦ target</td> <td align="left">_blank,_self,_parent,_top,framename</td> <td align="left"><strong>目标显示位置</strong>: 规定 在<strong>何处打开</strong> action URL。</td> </tr> </tbody> </table> <hr> <h5>⑴ enctype 属性: 表单数据 编码类型</h5> <ul> <li>说明</li> <li>⑴ <strong><code><form></code> 表单标签 的 <code>enctype</code>表单数据 编码类型 属性</strong> <ul> <li>将表单里的数据发到服务器时，浏览器对表单数据使用的编码类型。 <ul> <li>enc</li> <li>encode,编码</li> <li>如果 <code>method</code> 属性的值为 <code>post</code>，则 <code>enctype</code> 是表单提交的 MIME 类型。可能的值: <ul> <li> <p>① <code>application/x-www-form-urlencoded</code>（默认值，表单<strong>不包含</strong><code>type=file</code>的<code><input></code>元素，则可使用此选项）</p> <ul> <li>发送表单时，将收集 <strong>所有名称和值</strong>，并对最终字符串 执行 <strong>URL编码</strong>。</li> <li>此时，在发送数据前， <strong>编码 所有字符</strong>，表单数据被编码为 <strong>名称/值对</strong>，这是默认的编码类型。</li> <li>❶ 当 <code>method</code> 属性的值为<code>get</code>时，且浏览器用 <code>x-www-form-urlencoded</code> 的编码方式时， <ul> <li>会把表单数据 转换成<strong>一个字串</strong>，采用"<code>&</code>"分割开值对，（<code>name1=value1&name2=value2…</code>），</li> <li>以 ‘<code>?</code>’ 作为分隔符, 把表单数据 附加在<code> action</code> 属性值的<code>url</code>中， <ul> <li>然后把这样得到的 <code>url </code>，再发送给服务器。</li> </ul> </li> </ul> </li> <li>❷ 当 <code>method</code> 属性的值为<code>post</code>时，且浏览器用 <code>x-www-form-urlencoded</code> 的编码方式时， <ul> <li><code>post</code> 格式跟 <code>get</code> 同样使用 <code>URLencode</code> 转码，区别在于：</li> <li>→ <code>get</code> 把转换、拼接完的字符串用<code>?</code>隔开，直接把这个字串附加到到 <strong>url 后面</strong>，所以 <strong>请求体里没有数据</strong>；</li> <li>→ 而 <code>post</code> 把转换、拼接后的字符串，放在了<strong>请求体里</strong>，不会在浏览器的地址栏显示，因而更安全一些。 <ul> <li><code>js</code>中 URLencode 转码方法。 <ul> <li>将 <code>name</code>、<code>value</code>中 的 <strong>空格替换为加号<code>+</code></strong>；</li> <li>将 <strong>非 ascii 字符</strong> 做 <strong>百分号编码</strong>； <ul> <li>非数字, 字母用 <code>%HH</code> 格式进行替换, 其中 HH 是<strong>两位16进制数字</strong>, 即 <code>ASCII HEX</code>值，表示被替换字符的 <strong>十六进制 ASCII 码</strong>；</li> <li>如"<code>?</code>“会被替换成”<code>%3F</code>", 对应十六进制是 0x3f；</li> <li>换行符：用<code>CR LF</code>字符对表示, 对应的值是"<code>%0D%0A</code>";</li> </ul> </li> <li>将 input 的 name、value 值对，用‘<code>=</code>’连接；</li> <li>不同的 input 之间用‘<code>&</code>’连接。</li> </ul> </li> </ul> </li> </ul> </li> <li><strong>总结</strong>：这种 url 的编码方式，<code>method</code>属性值，为<code>get</code>和<code>post</code>时，都能用， <ul> <li>区别在于，编码后的数据的字符串 放在了不同的地方，一个放在 url 后面（<code>get</code>），一个放在了 请求体里（<code>post</code>，更安全）。</li> </ul> </li> <li>查看代码 在线编辑器</li> <li><a href="http://img.e-com-net.com/image/info8/6af6a46216de4535808c9bc3b4a7cf5a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6af6a46216de4535808c9bc3b4a7cf5a.jpg" alt="【表单标签（知识点超全版本）】_第2张图片" width="650" height="241" style="border:1px solid black;"></a></li> </ul> </li> <li> <p>② <code>multipart/form-data</code>（如果表单包含<code>type=file</code>的<code><input></code>元素，则使用此选项）</p> <ul> <li><strong>不编码 字符</strong> ，当 <code>method</code> 的属性值为<code>post</code>时候，浏览器把 表单数据封装到 http 的请求体（body）中，然后发送到服务器。（上传文件时，建议 <code>form</code>的<code>method</code>属性应该设置为<code>post</code>，传输安全。）</li> <li>表示以 <strong>二进制的形式</strong> 上传内容； <ul> <li>即，指定传输数据为 <strong>二进制类型</strong>，比如 图片、mp3、文件。 <ul> <li>指表单数据有 多部分构成，既有文本数据，又有文件等 <strong>二进制数据</strong> 的意思。发送二进制文件，这可确保不改变比特流。</li> </ul> </li> <li>需要注意的是：默认情况下， <code>enctype="application/x-www-form-urlencoded"</code>，不能用于文件上传， <ul> <li>只有使用了<code>enctype="multipart/form-data"</code>，才能 <strong>完整的传递文件数据</strong>。</li> <li><code>application/x-www-form-urlencoded</code> 不是不能上传文件，是只能上传 文本格式的文件，<code>multipart/form-data</code> 是将文件以 二进制的形式上传，这样可以实现 <strong>多种类型的文件上传</strong>。</li> </ul> </li> <li>如果加了<code>enctype="multipart/form-data"</code>，普通表单域的内容，就是以流的形式传输了 <ul> <li>如，在 java 中，接收的时候不是简单的用<code>request.getParameter();</code>方法</li> </ul> </li> </ul> </li> <li>表单数据被封装在 <strong>一条消息</strong>中，页上的每个控件 对应消息中的<strong>一个部分</strong>，这个一般 <strong>文件上传时用</strong>。</li> <li>浏览器会把整个表单，以控件为单位分割，并为每个部分加上 <ul> <li><code>Content-Disposition</code>( <code>form-data</code>或者<code>file</code>),</li> <li><code>Content-Type</code>(默认为 <code>text/plain</code>),</li> <li><code>name</code>(控件name)等信息，并加上分割符(boundary)。</li> </ul> </li> </ul> </li> <li> <p>③ <code>text/plain</code>（由 HTML5 引入，用于调试。）</p> <ul> <li>数据以 <strong>纯文本</strong> 形式进行编码，其中 不含任何控件或格式字符。</li> <li><strong>空格被转换，但不再执行编码</strong>。 <ul> <li>空格转换为 <code>+ </code>加号，但 <strong>不对特殊字符 编码</strong>；</li> </ul> </li> <li>注意: 作为调试辅助 (添加到规范中);不应该 用于 真正的表单提交。</li> </ul> </li> </ul> </li> <li>注意：<strong><code>enctype</code> 的属性值，可被覆盖</strong> <ul> <li>这个值可以被 按钮<code><button></code>， 提交<code><input type="submit"></code>，或 图像 <code><input type="image"></code>元素的 <code>formenctype</code> 属性覆盖。</li> </ul> </li> </ul> </li> </ul> </li> </ul> <hr> <ul> <li><strong>知识拓展</strong></li> <li>什么是 MIME 类型？ <ul> <li>MIME(Multipurpose Internet Mail Extensions)多用途互联网 邮件扩展类型。</li> <li>其实，本质上，就是用来指明 <strong>文件类型</strong>。比如，是文本文件，还是音乐，还是视频文件等。跟文件的 <strong>后缀名相关联</strong>。每个 <code>MIME</code> 类型，都会有相对应的后缀名。如， <ul> <li>普通文本 <code>.txt</code> 文件，对应的<code>MIME</code> 类型： <code>text/plain</code></li> <li>PDF文档 <code>.pdf</code> 文件，对应的<code>MIME</code> 类型：<code>application/pdf</code></li> </ul> </li> <li>用处： 指定了 <code>MIME</code>类型，就是指定了打开 <strong>相关后缀名文件</strong>的应用程序。 <ul> <li>设定某种<strong>扩展名</strong>的文件，用一种应用程序来<strong>打开的方式</strong>类型，当该扩展名文件被访问的时候，浏览器会自动使用 <strong>指定应用程序</strong>来打开。</li> <li>多用于指定一些客户端自定义的 ❶ <strong>文件名</strong>，以及一些 ❷ <strong>媒体文件打开方式</strong>。</li> </ul> </li> <li>MIME 类型，是一个互联网标准，扩展了电子邮件标准，使其能够支持: <ul> <li>非 ASCII 字符文本;</li> <li>非文本格式附件(二进制、声音、图像等);</li> <li>由多部分(multiple parts)组成的消息体;</li> <li>包含非 ASCII 字符的头信息(Header information)。</li> </ul> </li> <li>一些非英语字符消息和二进制文件，图像，声音等 <strong>非文字消息</strong>，原本都不能在电子邮件中传输(MIME 可以)。 <ul> <li>MIME 规定了用于 <strong>表示 各种各样的数据类型</strong>的 符号化方法。 此外，在万维网中使用的 HTTP 协议中也使用了 MIME 的框架，标准被扩展为 <strong>互联网 媒体类型</strong>。</li> <li>在 HTTP 中，MIME 类型被定义在 <code>Content-Type header</code> 中</li> </ul> </li> <li>示例：例如，假设你要传送一个Microsoft 的 Excel 文件到客户端。那么这时的 MIME 类型就是<code>“application/vnd.ms-excel”</code>。 <ul> <li>在大多数实际情况中，这个文件然后将传送给 Excel 来处理（假设我们设定 Excel 为处理特殊 MIME 类型的应用程序）。</li> <li>在 ASP 中，设定 MIME 类型的方法是通过 <code>Response</code> 对象的 <code>ContentType</code> 属性。</li> </ul> </li> </ul> </li> <li><strong>常用后缀名，和对应的 <code>MIME</code>类型</strong> <ul> <li>前面为后辍名，后面为对应的 MIME 型</li> <li>rar application/x-rar-compressed → 表示<code>.RAR</code>对应的是 <code>application/x-rar-compressed</code></li> <li>zip application/zip</li> <li>普通文本 .txt text/plain</li> <li>PDF文档 .pdf application/pdf</li> <li>3gp video/3gpp</li> <li>asp application/x-asap</li> <li>avi video/x-msvideo</li> <li>bmp application/x-MS-bmp</li> <li>css text/css</li> <li>html text/html</li> <li>htm text/html</li> <li>xhtm application/xhtml+xml</li> <li>xhtml application/xhtml+xml</li> <li>xsl text/xml</li> <li>dir application/x-director</li> <li>doc application/msword</li> <li>ppt application/vnd.ms-powerpoint</li> <li>exe application/octet-stream</li> <li>gif image/gif</li> <li>jar application/java-archive</li> <li>jpeg image/jpeg</li> <li>jpg image/jpeg</li> <li>png image/png</li> <li>svg image/svg-xml</li> <li>swf application/x-shockwave-flash</li> <li>js application/x-javascript</li> <li>mp3 audio/x-mpeg</li> <li>mp4 video/mp4</li> </ul> </li> <li>MIME 媒体数据类型中<code>x-</code> 是什么意思？ <ul> <li>Internet中有一个专门组织 IANA （abbr. 互联网地址编码分配机构（Internet Assigned Numbers Authority））来确认标准的 MIME 类型，但 Internet 发展的太快，很多应用程序等不及 IANA 来确认他们使用的 MIME 类型为标准类型。 <ul> <li>因此他们使用在类别中以 <code>x-</code> 开头的方法，标识这个类别 <strong>还没有成为标准</strong>，例如：<code>x-gzip</code>，<code>x-tar</code>等。事实上这些类型运用的很广泛，已经成为了事实标准。</li> </ul> </li> <li>只要客户机和服务器共同承认这个MIME类型，即使它是不标准的类型也没有关系，客户程序就能根据MIME类型，采用具体的处理手段来处理数据。</li> <li>由于 MIME 类型与文档的后缀相关，因此服务器使用文档的后缀，来区分不同文件的MIME 类型，服务器中，必须定义文档后缀和 MIME 类型之间的对应关系。 <ul> <li>客户程序从服务器上接收数据的时候，它只是从服务器 接受数据流，并不了解文档的名字，因此服务器必须使用附加信息，来告诉客户程序数据的 <strong>MIME</strong> 类型。 <ul> <li>服务器在发送真正的数据之前，就要先发送标志数据的 MIME 类型的信息，这个信息使用 <code>Content-type</code> 关键字进行定义，</li> </ul> </li> <li>例如对于 HTML 文档，服务器将首先发送以下两行 MIME 标识信息,这个标识并不是真正的数据文件的一部分。</li> </ul> </li> </ul> </li> </ul> <pre><code>Content-type: text/html </code></pre> <ul> <li> <p>注意，第二行为一个空行，这是必须的，使用这个空行的目的是： 将 MIME 信息与真正的数据内容 分隔开。</p> </li> <li> <p><strong>参考文章</strong></p> <ul> <li>MIME_360百科</li> <li>HTTP 中 application/x-www-form-urlencoded 字符说明</li> <li>post 请求的两种编码格式：application/x-www-form-urlencoded和multipart/form-data</li> </ul> </li> </ul> <hr> <h5>⑵ accept-charset 属性: 服务器 接受的字符编码 集合（空格分隔）</h5> <ul> <li>⑵ <strong><code><form></code> 表单标签 的<code>accept-charset</code> 服务器 接受字符集</strong> <ul> <li>用于 <ul> <li>如何规定 服务器处理 表单数据 用哪种 字符集 ? <ul> <li>使用 form- <code>accept-charset</code> 接受字符集 属性</li> <li><strong>空格</strong>: 一个空格分隔 的列表</li> <li><strong>服务器支持的 字符编码</strong>: 这个列表 包括了 服务器支持的字符编码。</li> <li><strong>使用顺序</strong>: 浏览器 以这些编码 被列举的顺序 使用它们。</li> <li><strong>默认支持的字符编码</strong>: 默认值是一个 保留字符串<code>“UNKNOWN”</code>。这个字符串 指的是，和包含这个<code>form</code>元素的 <strong>文档 相同的编码</strong>。</li> </ul> </li> <li>服务器可处理 多个字符集 吗 ? <ul> <li>可以</li> </ul> </li> <li>如果需要规定 一个以上的字符集，使用什么 分隔字符集 ? <ul> <li>使用 逗号 或者空格</li> <li><strong>空格 分隔符</strong>: 在 HTML5 中，只有 <strong>空格</strong> 可以允许 作为分隔符。</li> <li>服务器接受的 <strong>空格分隔的字符编码</strong>。浏览器 按照它们 <strong>被列出的顺序</strong>，使用它们。默认值表示与页面相同的编码。(在以前的HTML版本中，字符编码也可以用逗号分隔。)</li> </ul> </li> </ul> </li> <li>form- <code>accept-charset</code> 接受字符集 属性的语法 <ul> <li><code><form accept-charset="value"></code></li> </ul> </li> <li>form-<code>accept-charset</code> 接受字符集 属性 的属性值 <ul> <li>常用值：</li> <li>如何表示 Unicode 字符 编码 ? <ul> <li><code>UTF-8</code></li> </ul> </li> <li>如何表示 拉丁字母表 的字符编码 ? <ul> <li><code>ISO-8859-1</code></li> </ul> </li> <li>如何表示 简体中文 字符集 ? <ul> <li><code>gb2312</code></li> </ul> </li> </ul> </li> </ul> </li> </ul> <hr> <h5>⑶ ♣ action 属性: 服务器页面 地址 (处理表单数据的 程序url )</h5> <ul> <li>⑶ <strong><code><form></code> 表单标签 的 <code>action</code> 处理表单程序url 属性</strong> <ul> <li>用于 <ul> <li>如何指明 表单数据 提交给谁 ?</li> <li>使用 <code>action</code> 处理表单程序url 属性</li> <li><strong>处理表单的 程序url</strong>: 一个处理这个<code>form</code>表单信息的 程序所在的URL。</li> <li><strong>属性覆盖</strong>: 这个值可以被<code><button></code>， <code><input type="submit"></code>，或<code><input type="image"></code>元素的 <code>formaction</code> 属性覆盖。</li> </ul> </li> <li><code>action</code> 处理表单程序url 属性的属性值 <ul> <li>url <ul> <li>form-<code>action="url"</code></li> </ul> </li> <li>可能的值： <ul> <li>绝对 URL <ul> <li>指向 <strong>其他站点</strong>（比如 src=“www.example.com/example.htm”）</li> </ul> </li> <li>相对 URL <ul> <li>指向 <strong>站点内</strong> 的文件（比如 src=“example.htm”）</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html5/demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">accept-charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ISO-8859-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> First name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> Last name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <hr> <h5>⑷ ♣ method 属性: 发送/提交 表单数据的 HTTP 方法</h5> <ul> <li> <p>⑷ <strong><code><form></code> 表单标签 的 <code>method</code> 提交数据方法 属性</strong></p> <ul> <li>用于 <ul> <li>用于❶ 提交表单的 ❷ HTTP 方法。可能的值(不区分大小写):</li> <li><strong>提交数据方法</strong>: 规定浏览器 如何发送 表单数据 (给服务器)? <ul> <li> <p>使用 <code>method</code> 发送数据方法 属性: <code>method="post | get | dialog"</code></p> </li> <li> <p>浏览器使用这种 <code>HTTP </code>方法 来提交<code> form</code>表单. 可能的值有:</p> </li> <li> <p>① <strong>请求体 ( 分段传输 )</strong> <code>post</code>: 指的是 <code>HTTP POST 方法</code> ;</p> <ul> <li> <p>表单数据作为 ❶ <strong>HTTP 请求体</strong>（ request body），被发送。</p> <ul> <li><code>Request</code> 接口的只读 <code>body</code> 属性包含一个 可读流（ReadableStream），其中包含 已添加到请求中的 body 内容。注意，使用 <code>GET</code> 或 <code>HEAD</code> 方法的请求不能有主体，在这些情况下返回 <code>null</code>。</li> </ul> </li> <li> <p>当表单包含 密码等 ❷ <strong>不应该 公开的信息时</strong>，请使用 此方法。</p> </li> </ul> </li> <li> <p>②<strong>附在<code>action</code> 属性值 <code>url</code> 后面 ( 一次性传输 )</strong> <code>get</code>: 指的是 <code>HTTP GET 方法</code>;</p> <ul> <li>以 ‘<code>?</code>’ 作为分隔符, 把表单数据 附加在<code> action</code> 属性值的<code>url</code>中， <ul> <li>然后把这样得到的 <code>url </code>，再发送给服务器。</li> <li>如果数据暴露在url 里面，也没问题，或者表单 仅包含 <code>ASCII</code> 字符时，可使用这种方法。如搜索表单，请使用 此方法。</li> <li>如果 有密码信息,显示出来,就非常不安全,所以密码等 重要的信息,不能用 <code>get</code> 方法.</li> </ul> </li> </ul> </li> <li> <p>③<strong>关闭对话框</strong> <code>dialog</code>:</p> <ul> <li>当 ❶ <strong>表单位于 <code><dialog></code>对话框</strong> 元素中 时使用，以在提交时 ❷ <strong>关闭对话框</strong>。</li> </ul> </li> <li> <p><strong>属性覆盖</strong>: 这个值被<code><button></code>， <code><input type="submit"></code>，或<code><input type="image"></code>元素的 <code>formmethod</code> 属性覆盖。</p> </li> </ul> </li> </ul> </li> </ul> </li> <li> <p>表单数据 被发送到了 哪里?</p> <ul> <li>form-<code>action</code> 服务器页面（数据处理程序）url 属性 所规定的页面</li> </ul> </li> </ul> <hr> <ul> <li><strong>知识拓展</strong>: ASCII 字符 详细介绍 <ul> <li><code>ASCII</code> ((American Standard Code for Information Interchange): <ul> <li>美 /ˈæski/, 美国 信息交换 标准代码 <ul> <li>ASC：美国 标准码；II：信息交换；❶ <strong>用于信息交换的 标准码</strong>；</li> </ul> </li> <li>目前为止，共定义了 ❷ <strong>128 个字符</strong> <ul> <li>包括 大小写字母、数字0-9、标点符号、非打印字符（换行符、制表符等4个）以及控制字符（退格、响铃等）组成。</li> </ul> </li> <li><strong>信息交换标准码 <code>ASCII</code> 的缺点</strong>： <ul> <li>它是 ❸ <strong>针对英语</strong>设计的，当处理带有 音调标号（形如 汉语的拼音）的亚洲文字时 就会出现问题。</li> </ul> </li> <li><strong>ASCII 产生原因</strong> <ul> <li><strong>二进制数, 存储和运算</strong>: 在计算机中，<strong>所有的 数据</strong> 在存储和运算时 都要使用 ❶ <strong>二进制数表示</strong>（因为计算机用 高电平和低电平 分别表示 1和0） <ul> <li>二进制代码 和 计算机信息: 计算机内部 处理的信息，都是用二进制代码 表示的，汉字也不例外。而二进制代码 使用起来是不方便的，于是需要采用 信息交换码。</li> <li>例如，像a、b、c、d 这样的52个字母（包括大写）以及0、1等数字</li> <li>还有一些常用的符号（例如*、#、@等）在计算机中 存储时 也要使用二进制数来表示。</li> </ul> </li> <li><strong>注意</strong>: <strong>汉字不是 <code>ASCII</code> 编码的</strong>,<code>ASCII</code> 一般是英文,西方字符 使用的编码，才 128 个字符，用来表示 汉字，远远不够，表示英文字母 组成的西方语言是足够的，因为大小写在一起，才 52个字母。</li> <li>汉字常用的编码 UTF-8 的介绍</li> </ul> </li> <li><strong>编码</strong>: 而具体 <strong>用哪些❶ 二进制数字 表示哪个符号</strong>，当然每个人 都可以约定自己的一套（这就叫编码），而大家如果要想 互相通信而不造成混乱，那么大家就必须使用 相同的编码规则。</li> <li><strong><code>ASCII</code> 编码</strong>: 美国有关的标准化组织 出台了 ASCII 编码，统一规定了 上述常用符号用 哪些二进制数来表示 。 <ul> <li>ASCII 编码 制定者: 美国标准信息交换代码 是由 美国国家 标准协会(American National Standard Institute , ANSI )制定的，是一种标准的 单字节 字符编码方案，用于基于文本的数据。</li> <li>ASCII → 国际标准 ISO 646: 它最初是 美国国家标准，供不同计算机 在相互通信时 用作共同遵守的 ❶ <strong>西文字符 编码标准</strong>，后来它被 国际 标准化组织（International Organization for Standardization, ISO）定为国际标准，称为 ISO 646 标准。适用于 所有 ❷ <strong>拉丁文字字母</strong> 。</li> </ul> </li> </ul> </li> </ul> </li> </ul> <hr> <ul> <li><strong><code>post</code> 和<code>get</code> 方法详解</strong> <ul> <li>º⑴ <code>method</code> 发送数据方法 属性的属性值 为 <code>post</code> = <strong>采用 POST 方法</strong> <ul> <li>浏览器会如何 发送数据 ? <ul> <li><strong>总结</strong>: 联系服务器,发送数据,分段传输.</li> <li>① 浏览器 和服务器 <strong>建立联系</strong>: <ul> <li>首先，浏览器将与 服务器 建立联系.</li> <li>浏览器和哪个服务器 建立联系 ? <ul> <li>浏览器与 <code>action</code> 表单提交操作 属性中指定的表单处理 服务器</li> </ul> </li> </ul> </li> <li>② 浏览器 <strong>发送数据</strong> 到服务器: <ul> <li>一旦建立连接之后，浏览器就会按 <strong>分段传输</strong> 的方法将 数据发送给 服务器。</li> <li>浏览器 以什么方法 传送数据给服务器 ? <ul> <li><strong>分段</strong>传输</li> </ul> </li> </ul> </li> </ul> </li> <li>在服务器端 会对表单值进行哪些操作 ? <ul> <li>总结: 读取和解码参数,然后 接受参数</li> <li>① 读取参数: (POST 样式的应用程序) 开始执行时, 会读取参数</li> <li>② 解码参数: 使用这些表单值以前，必须对这些 参数进行解码</li> <li>③ 接受参数: 明确指定应用程序 如何接受这些参数</li> </ul> </li> </ul> </li> <li>º⑵ <code>method</code> 发送数据方法 属性的属性值 为 <code>get</code> = <strong>采用 GET 方法</strong> <ul> <li>总结: 联系服务器,一次性传输所有数据( 附在表单的 form-<code>action</code>的url 后面 )</li> <li>① 建立联系: 浏览器会与表单处理服务器 建立连接</li> <li>② 一次传送所有数据: 在一个 传输步骤中 发送 所有的表单数据</li> <li>form-method=<code>GET</code> 为属性值的方法 , 浏览器会怎样传送数据 ? <ul> <li>数据附在表单的 <code>action</code> URL 之后。 <ul> <li>数据和 <code>action</code> URL 之间 如何分隔 ? <ul> <li>用 <strong>问号 <code>?</code></strong> 进行分隔</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li>form-<code>method</code> 发送数据方法 属性的<code>POST</code> 分段传输 和<code>GET</code> 附在url 一次性传输方法 分别在 什么时候使用 ? <ul> <li>① <strong>form-<code>method</code> = <code>GET</code>方法的使用</strong> <ul> <li>传输性能,表单之外 传输参数给服务器</li> <li><strong>数据少</strong>: 如果发送只有 少数简短字段 的小表单 使用什么方法 ? <ul> <li>用 <code>GET</code> 附 url 一次性传输 方法</li> </ul> </li> <li><strong>服务器页面 处理程序简单</strong>: 如果不怎么会 编写服务器端的 表单处理应用程序 ，应该选择 什么方法 ? <ul> <li>用 <code>GET</code> 附 url 一次性传输 方法</li> <li>为什么 ? <ul> <li>因为用 <code>POST</code> 多段传输 方法，要在 读取和解码 方法做些额外的工作</li> </ul> </li> </ul> </li> <li><strong>表单之外 调用服务器程序</strong>: 如果想在 表单之外 调用服务器端的 应用程序，并向服务器 传递参数 用什么方法 ? <ul> <li>用 <code>GET</code> 一次性传输 方法</li> <li>为什么 ? <ul> <li>因为<code>GET</code> 一次性传输 方法 允许把表单参数 包括进来作为 URL 的一部分。</li> </ul> </li> </ul> </li> </ul> </li> <li>② <strong>form-<code>method</code>= <code>POST</code>方法的使用</strong> <ul> <li>数据较多,安全性</li> <li><strong>限制参数的 数目和长度</strong>: 当服务器限制 参数的数目和长度，对于有许多字段 或是 很长的文本域 的表单, 应该使用什么方法 传送数据 ? <ul> <li>用 <code>POST</code> 多段传输 方法</li> </ul> </li> <li><strong>更安全</strong>: 如果 很注重 安全性 问题，使用什么方法 ? <ul> <li>用 <code>POST</code> 多段传输 方法</li> <li>为什么 ? <ul> <li><code>GET</code> 一次传输 方法 将 表单参数 直接 放在 <code>action</code> 属性值 应用程序的 URL 中</li> <li>网络窥探者 可以很轻松地捕获 参数，还可以从服务器的 日志文件中进行 摘录。</li> </ul> </li> <li>▲ 总结: <code>GET</code>附 url 一次性传输 方法的参数 = 被捕获和摘录 = 不安全 <ul> <li>如果参数中 包含了 信用卡帐号这样的 敏感信息，就会在不知不觉中 危及用户的安全。</li> </ul> </li> <li><code>POST</code> 应用程序 为什么没有安全方面的漏洞 ? <ul> <li>因为会将参数 作为 <strong>单独的事务</strong> 传输给服务器进行处理时，还可以采用 <strong>加密</strong> 的方法。</li> </ul> </li> <li>▲ 总结: <code>POST</code> 多段传输方法的参数传送 = 单独的事务 + 加密 = 安全</li> </ul> </li> </ul> </li> </ul> </li> </ul> <hr> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>on<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form_action.asp<span class="token punctuation">"</span></span> <span class="token attr-name">enctype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/plain<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <ul> <li>对元素的值 进行编码时，编码的参数之间 使用什么分隔 ? <ul> <li><code>&</code> 符号</li> </ul> </li> <li>下方，包含几个参数 ? <ul> <li>只包含 x 和 y 这两个参数。</li> </ul> </li> </ul> <pre><code>x=28&y=66 </code></pre> <ul> <li>如果表单采用<code>GET</code>一次性传输 方法, <code>method=GET</code>，用来引用 服务器端应用程序 的 URL 会怎样显示 ?</li> <li>如下：</li> <li><strong>连接符</strong>: url 和参数之间 用什么分隔 ? <ul> <li><code>?</code> 问号 ,是 url 和 参数之间的间隔符。</li> </ul> </li> </ul> <pre><code>http://www.example.com/example/program?x=28&y=66 </code></pre> <ul> <li><code><a></code> 超链接 标签, 不能调用 使用<code>get</code>方法，带有参数值的表单 <ul> <li>即，<code>GET</code> 一次性传输 方法的 “传输的内容” ,不能作为 <code><a></code> 标签的<code>href</code> 属性的属性值 <ul> <li>因为，<code>get</code>方法 传输内容的分隔参数， 所用的 <code>&</code> 符号,也是 <strong>字符实体的 插入符号</strong>，会起冲突； <ul> <li>一个<code>&</code>符号，没办法同时有两个作用，在a-<code>href</code>属性中，会被当作 字符实体的开始，而不是分隔符。</li> <li><strong>转换成 字符实体</strong>: 会将<code>&</code> 符号 后面的字符 替换成相应的字符实体 ( 其实并不是 字符实体 )。</li> </ul> </li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.example.com/example/program?x=28&y=66<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <pre><code>- ▲ 总结: `get`方法 传输的内容 不能作为传统 `<a>` 超链接 标签 的`href` 超链接 属性的属性值 = 不能用`<a>` 超链接 标签, 调用 带有参数值的表单. </code></pre> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.example.com/example/program?x=28<span class="token entity named-entity">&</span>y=66<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <hr> <h5>⑸ target 属性: (响应页面) 打开位置</h5> <ul> <li>⑸ <strong><code><form></code> 表单标签 的的<code>target</code> 打开位置 属性</strong> <ul> <li>用于 <ul> <li><strong>显示位置(打开位置)</strong>: 一个关键字，用来指示 在提交表单之后，在哪里显示 收到的响应页面。 <ul> <li>在 HTML 4 里, 这是一个用于<code> frame</code>框架 的名字/关键字。</li> <li>在 HTML5 里, 这是一个用于 浏览器内容 的名字/关键字 (举例来说, 标签页 tab, 窗口 window, or 或者行内框架 iframe)。</li> </ul> </li> <li><strong>属性覆盖</strong>: 这个值可以被<code><button></code>， <code><input type="submit"></code>，或<code><input type="image"></code>元素的 <code>formtarget</code> 属性覆盖。</li> </ul> </li> <li>form- <code>target</code>目标位置 属性的语法 <ul> <li><code><form target="_blank | _self | _parent | _top | frame-name"></code></li> </ul> </li> </ul> </li> </ul> <table> <thead> <tr> <th align="left">属性值</th> <th align="left">用于</th> </tr> </thead> <tbody> <tr> <td align="left">_blank</td> <td align="left">在 <strong>新窗口</strong> 中打开。在<code><form></code>元素上设置 <code>target="_blank"</code> 隐式提供了 与设置<code>rel="noopener"</code> 相同的 <code>rel</code> 行为，即，没有设置 <code>window.opener</code>。</td> </tr> <tr> <td align="left">_self</td> <td align="left">默认值。加载到当前页面 自身的位置（在当前文档页面 重新加载返回值。）；如果是在框架中，在 <strong>相同的框架</strong> 中打开。译注：也就是说如果这个文档 在一个<code>frame</code>框架中的话，<code>self</code>是在当前<code>frame</code>框架（document）中重新加载的，而不是整个页面（window）。</td> </tr> <tr> <td align="left">_parent</td> <td align="left">在 <strong>父框架</strong> 集中打开页面 (加载返回值)，如果没有父级的<code>frame</code>框架，行为和<code>_self</code>一致。</td> </tr> <tr> <td align="left">_top</td> <td align="left">在 <strong>整个窗口</strong> 中打开。如果是HTML 4文档: 清空当前文档，加载 返回内容；HTML5: 在当前文档的最高级内 加载返回值，如果没有父级，和<code>_self</code>的行为一致。</td> </tr> <tr> <td align="left">framename</td> <td align="left">在 <strong>指定的框架</strong> 中打开。</td> </tr> </tbody> </table> <hr> <ul> <li><code><form></code> 表单 标签 HTML5 中 <strong>新属性</strong></li> </ul> <table> <thead> <tr> <th align="left">属性名</th> <th align="left">属性值</th> <th align="left">用于</th> </tr> </thead> <tbody> <tr> <td align="left">① autocomplete</td> <td align="left">=on,off</td> <td align="left"><strong>浏览器 自动补全</strong>: 规定 是否启用 表单的 <strong>自动完成</strong> 功能。</td> </tr> <tr> <td align="left">② novalidate</td> <td align="left">=novalidate</td> <td align="left"><strong>提交时 不验证</strong>: 如果使用 该属性，则 提交表单时 <strong>不进行验证</strong>。</td> </tr> </tbody> </table> <hr> <h5>⑹ autocomplete 属性: 自动完成 (on | off)</h5> <ul> <li>⑹ <strong><code><form></code> 表单标签 的<code>autocomplete</code> 自动完成 属性</strong> <ul> <li>用于 <ul> <li>如何规定 表单是否应该 启用 自动完成 功能 ? <ul> <li> <p>使用 form- <code>autocomplete</code> 自动完成 属性</p> <ul> <li>autocomplete 的使用对象： 可用于接受 ❶ <strong>文本</strong>或 ❷ <strong>数字值</strong>作为 输入的<code><input></code>元素、<code><textarea></code>元素、<code><select></code>元素 和 <code><form></code>元素。 HTML5 中的新属性。</li> </ul> </li> <li> <p><strong>浏览器 自动补全</strong>: 用于指示<code><input> </code>元素 是否能够拥有一个默认值，这个默认值 是由浏览器自动补全的。</p> </li> <li> <p><strong>属性覆盖</strong>: 这个设定 可以被属于这个<code>form</code>的子元素的 <code>autocomplete</code> 属性重载（覆盖）。</p> </li> <li> <p>可能的值有:<code>autocomplete="on | off"</code></p> <ul> <li>① <strong>浏览器 不自动补全</strong>: <code>off</code>. <ul> <li>在每一个用到的 输入域里，用户必须 显式的输入 一个值，或者文档 以它自己的方式 提供自动补全；浏览器 不会自动补全输入。</li> </ul> </li> <li>② <strong>浏览器 自动补全</strong>: <code>on</code> . <ul> <li>浏览器能够 根据用户之前在<code>form</code>表单里 输入的值 自动补全。</li> </ul> </li> </ul> </li> <li> <p><strong>自动登录</strong>: 和自动完成属性 不冲突. 大多数现代浏览器 (包括Firefox , Google Chrome 设置自动完成属性 , 并不会阻止 浏览器的密码管理器 询问用户 是否想要存储登录字段(用户名和密码), 如果用户 允许存储, 用户下次访问该页面时, 浏览器 将自动填充登录信息 。</p> </li> </ul> </li> <li><strong>预测输入</strong>: 如何允许 浏览器预测 对 字段的输入? <ul> <li>使用 form-<code>autocomplete</code> 自动完成 属性</li> <li><strong>显示历史输入值</strong>: 当用户在字段开始键入时，浏览器基于 之前输入过的值 ，显示出 在字段中填写的选项 。</li> <li><strong>有效范围</strong>: 自动完成 <code>autocomplete</code> 属性 对 不返回 <strong>数字或文本数据</strong>的 输入类型无效。(如复选框 或图像)</li> </ul> </li> </ul> </li> <li>form-<code>autocomplete</code> 自动完成 属性的语法 <ul> <li><code><form autocomplete="on|off"></code></li> </ul> </li> <li>注释： <ul> <li><code>autocomplete</code>自动完成 属性适用于 什么标签 ? <ul> <li>适用于 <code><form></code>表单标签</li> <li>以及下面的 <code><input></code> 输入标签： <ul> <li>会有 ❶ <strong>历史输入值</strong> 的类型: <code>text, search, url, telephone, email, password, datepickers, range</code> 以及 <code>color</code>。</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html5/demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>on<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> First name:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> Last name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> E-mail: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>off<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>请注意，表单的自动完成功能是打开的，而 e-mail 域是关闭的。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><img src="http://img.e-com-net.com/image/info8/91ce5a0c1834468a8e1f1cd32a2cdbc6.jpg" alt="在这里插入图片描述" width="0" height="0"></p> <ul> <li>填写表单,并提交后,再次重载页面填写,会出现以前填写过的提示</li> <li><code>autocomplete</code><strong>自动完成 属性的继承性</strong> <ul> <li><strong>父业子承</strong>: 继承自动完成功能, <code><form></code>表单标签 设置为自动完成,它的子元素 <code><input></code>标签 不设置这个属性,也会自动完成。</li> <li><strong>父停子停</strong>: 如果 <code><form></code>表单标签 关闭自动完成,表单标签的子元素 也会关闭自动完成的功能。</li> </ul> </li> </ul> <hr> <h5>⑺ novalidate 属性: 不验证 (表单输入，布尔属性)</h5> <ul> <li>⑺ <strong><code><form></code> 表单标签 的<code>novalidate</code> 不验证 属性</strong> <ul> <li>用于 <ul> <li>如何规定 当提交表单时 不对其进行验证 ? <ul> <li>使用 form-<code>novalidate</code>不验证 属性， HTML5 中的新属性。</li> <li><strong>提交时 不验证表单</strong>: 此布尔属性 指示 提交时不验证表单。如果没有指定此属性, 会验证表单。</li> <li><strong>属性覆盖</strong>:会被<code> <button></code>按钮 or <code><input> </code>输入 元素的 <code>formnovalidate</code>属性 覆盖。</li> <li>不验证 表单的输入 .</li> </ul> </li> </ul> </li> <li>form-<code>novalidate</code>不验证 属性 适用于什么标签 ? <ul> <li>需要验证的标签。因为，对于不需要验证的标签，根本没必要设置这个属性。</li> <li><code><form></code>表单 标签</li> <li>以及以下类型的 <code><input></code> 输入标签：</li> <li><code>text, search, url, telephone, email, password, date pickers, range</code> 以及<code>color</code>。</li> </ul> </li> </ul> </li> <li>form-<code>novalidate</code> 不验证 属性的语法 <ul> <li><code><form novalidate="novalidate"></code></li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html5/demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span> <span class="token attr-name">novalidate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>novalidate<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> E-mail: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_email<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/bf7be6aca1bf4282bf82c6c9418bcb3b.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/bf7be6aca1bf4282bf82c6c9418bcb3b.png" alt="【表单标签（知识点超全版本）】_第3张图片" width="478" height="104" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/8b9c1c519d2248358f814731695a1db3.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/8b9c1c519d2248358f814731695a1db3.png" alt="【表单标签（知识点超全版本）】_第4张图片" width="457" height="120" style="border:1px solid black;"></a></p> <ul> <li><strong>子承父业</strong>: 继承不验证. <code>form</code>表单标签 设置为 不验证的话,子元素 <code><input></code> 输入标签 也不会进行验证 <ul> <li>比如,邮箱格式不对,也可以提交成功</li> </ul> </li> </ul> <hr> <h3>1.4 ★ input 收集 用户输入的信息</h3> <ul> <li> <p><strong>收集 用户信息</strong></p> <ul> <li>如何 收集 用户信息 ? <ul> <li>使用 input 输入标签</li> <li><strong>接收 用户数据</strong>: 元素用于 为基于网页的表单 ❶ 创建交互控件，以便从用户 ❷ 接收数据; <ul> <li>根据设备和用户代理，可以使用 多种类型的输入数据 和控件工具。</li> </ul> </li> </ul> </li> <li><code><input></code> 输入标签如何 切换成 多种形式 ? <ul> <li>根据<code><input></code> 输入标签的 不同的 <code>type</code> 类型 属性的属性值 。如果未指定此属性，则默认采用 <code>text</code> 文本类型。</li> </ul> </li> </ul> </li> <li> <p>input-<code>type</code>类型 属性的属性值 可以是什么 ?</p> <ul> <li>文本字段、复选框、密码框(掩码后的文本控件)、单选按钮、按钮等等。</li> </ul> </li> <li> <p><strong>单标签(空标签) 正确关闭</strong>: 关于<code><input></code> 输入标签 ,HTML 与 XHTML 之间有什么差异 ?</p> <ul> <li>在 HTML 中，<code><input></code> 输入 标签 没有结束标签。</li> <li>在 XHTML 中，<code><input></code> 输入 标签 必须被正确地关闭。</li> </ul> </li> </ul> <hr> <ul> <li><strong>定义标签</strong>: 如何为某个 表单控件 定义 标注标签 ? <ul> <li>使用 <code><label></code> 标注 标签</li> <li><strong><code><label></code> 优先于 <code><placeholder></code>使用</strong>: <ul> <li><strong>优先使用<code><label></code>标签的 原因</strong>: 如果可以避免，就不要使用<code>placeholder</code>占位符属性。如果需要 标注<code><input></code>元素，请使用<code><label></code>标签 元素。 <ul> <li><strong>利于阅读</strong>:<code><input></code>和<code><label></code>元素的 <strong>语义配对</strong> 对于屏幕阅读器等 辅助技术 非常有用。</li> <li><strong>绑定输入字段</strong>: 通过使用<code><label></code>标签的<code>for</code>属性 对它们进行配对，您可以 将标签绑定到 输入字段，从而让屏幕阅读器 能够更准确地 向用户描述输入。</li> <li><strong>快速聚焦</strong>: 通过将<code><label></code>与<code><input></code>配对，单击其中任何一个 都将聚焦于<code><input></code>。如果使用 纯文本“标注”输入标签 (比如<code><p></code>标签)，则不会发生 这种便利的情况。</li> <li><strong>傻瓜式的说明</strong>: 作为网页开发人员，我们永远不要假设 人们会知道 我们所知道的事，要尽可能地说明，让不懂技术的人，再笨也会用，这才是王道。</li> </ul> </li> <li><strong>避免使用 占位符 <code>placeholder</code>的原因:</strong> <ul> <li><strong>消失</strong>: 占位符,输入值时就会消失,有的用户,会记不清提示。</li> <li><strong>不翻译</strong>: 占位符 属性值如果做 解释性提示,在需要翻译的页面 不会翻译,因为是属性,属性值一般不会被翻译.没有清晰和正确的标签, 会导致用户理解错误。</li> </ul> </li> <li><strong>关联关系</strong>: label-<code>for="input-id"</code>，这两个属性的属性值，完全一样，就默认进行关联。</li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name (4 to 8 characters):<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <hr> <h4>1.4.1 input 输入标签 的常用属性</h4> <ul> <li><code><input></code> 输入标签 有哪些常用属性 ?</li> </ul> <table> <thead> <tr> <th align="left">属性名</th> <th align="left">属性值</th> <th align="left">适用于类型 type=“”</th> <th align="left">用于</th> </tr> </thead> <tbody> <tr> <td align="left">① accept</td> <td align="left">=mime_type</td> <td align="left">file</td> <td align="left">规定 上传文件的 <strong>文件的类型</strong>。</td> </tr> <tr> <td align="left">② alt</td> <td align="left">=text</td> <td align="left">image</td> <td align="left">定义图像输入的 <strong>图片替代文本</strong>。</td> </tr> <tr> <td align="left">③ checked</td> <td align="left">=checked</td> <td align="left">radio, checkbox</td> <td align="left"><strong>默认选中项</strong>。规定此<code>input</code> 元素 首次加载时 应当 被<strong>选中</strong>。</td> </tr> <tr> <td align="left">④ disabled</td> <td align="left">= disabled</td> <td align="left">almost all ，除了type=“hidden” 以外</td> <td align="left">当 <code>input</code> 元素加载时 <strong>禁用</strong> 此元素。</td> </tr> <tr> <td align="left">⑤ type</td> <td align="left">= <code>button,checkbox,file...</code></td> <td align="left">all</td> <td align="left">规定 <code>input</code> 元素的 <strong>类型</strong>。</td> </tr> <tr> <td align="left">⑥ value</td> <td align="left">= value</td> <td align="left">almost all，除了 type=“file” 以外</td> <td align="left">规定 input 元素的 <strong>值</strong>。</td> </tr> </tbody> </table> <hr> <h5>⑴ accept 属性: 可接受的 上传文件类型（MIME 类型/文件后缀名，仅限 type=“file”）</h5> <ul> <li> <p>⑴ <strong><code><input></code> 输入标签的 <code>accept</code> 属性</strong></p> <ul> <li>用于 <ul> <li>如何规定 上传文件 的文件类型 ? <ul> <li>使用 <code>accept</code> 可接受的 上传文件类型 属性</li> </ul> </li> <li>input-<code>accept</code> 可接受的 上传文件类型 属性 只能与什么 配合使用 ? <ul> <li>只能与 <code><input type="file"></code> 文件输入标签 配合使用,<code>type</code> 类型属性的属性值为 <code>file</code> 文件的<code><input></code>输入元素</li> <li><code>accept</code> 属性定义：在文件上传控件中，可选择哪些文件类型。</li> </ul> </li> </ul> </li> <li>提示： <ul> <li>为什么要 避免使用 input-<code>accept</code> 上传文件类型 属性 ? <ul> <li>应该在 服务器端 验证文件上传</li> </ul> </li> </ul> </li> <li>input-<code>accept</code> 上传文件类型 属性 的语法 <ul> <li><code><input accept="mime_type"></code></li> </ul> </li> <li>用 什么隔开的 MIME 类型列表 ? <ul> <li>逗号</li> <li>MIME 类型 = (<strong>对应 文件的后缀名</strong>) <ul> <li>MIME 百度百科介绍</li> <li>MIME 参考手册</li> </ul> </li> </ul> </li> <li><code>accept</code> 上传文件类型 属性 浏览器支持 <ul> <li>IE9 以及更早的版本 不支持 <code><input</code>> 输入标签的 <code>accept</code> 上传文件 属性。</li> </ul> </li> </ul> </li> <li> <p>如何 在文件上传中，让输入字段 可以接受 GIF 和 JPEG 两种图像：</p> <ul> <li>使用 <code>accept</code> 上传文件类型 属性,逗号分隔 <ul> <li><code>accept="image/gif,image/jpeg"</code></li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pic<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pic<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/gif, image/jpeg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <ul> <li>如果不限制图像的格式，可以写为：<code>accept="image/*"</code>,用星号 *表示任意。</li> <li>只接受 gif 类型的图像 <ul> <li>属性之间 用空格分隔,属性值之间 用逗号分隔</li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo_form.asp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pic<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/gif<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/b6232f7165624cb4bc6b4cddad8632dc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b6232f7165624cb4bc6b4cddad8632dc.jpg" alt="【表单标签（知识点超全版本）】_第5张图片" width="514" height="401" style="border:1px solid black;"></a></p> <ul> <li>在选择文件的时候,只出现 gif 类型的图像</li> </ul> <hr> <h5>⑵ alt 属性: 图像替代文本 ( 图像不显示时 ，仅限 type=“image”)</h5> <ul> <li>⑵ <strong><code><input></code> 输入标签的<code>alt</code> 图像替代文本 属性</strong> <ul> <li>用于 <ul> <li>如何规定 图像的替代文本 ? <ul> <li>使用 <code>alt</code> 图像替代文本 属性</li> </ul> </li> <li>当用户由于某些原因 无法查看图像时 ,如何提供了 备选的信息 ? <ul> <li>使用 input-<code>alt</code> 图像替代文本 属性 <ul> <li>如果图像包含信息，使用 <code>alt</code> 描述图像</li> <li>如果图像在 <code><a></code> 元素中，跳转到的链接更重要的话，使用 <code>alt</code> 描述该链接。</li> </ul> </li> </ul> </li> <li>input-<code>alt</code> 属性 只能与哪个输入类型 搭配使用 ? <ul> <li>只能与 <code><input type="image"></code>图像类型 输入标签 配合使用</li> </ul> </li> </ul> </li> <li>注释： <ul> <li>为什么当 <code>type="image"</code>时,<code>alt</code> 图像替代文本 属性 是必需的属性，建议设置 <code>alt</code> 图像替代文本 属性 ? <ul> <li><strong>使用障碍</strong>: 因为 如果不使用该属性，有可能对 <strong>文本浏览器</strong> 或 <strong>非可视</strong> 的浏览器造成 使用障碍。 <ul> <li>❶ 不能显示图像 的浏览器 ,非可视 的浏览器,需要知道 图片的替代信息。</li> <li>如，❷ 图像<code>src</code> 属性缺失、错误或 ❸ 无法加载，则显示该属性的值，用来告诉用户，缺失的图像是什么。 <ul> <li>网速太慢、浏览器禁用图像、用户使用的是屏幕阅读器，无法显示图像；</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li>哪些浏览器 支持 <code>alt</code> 图像替代文本 属性 ? <ul> <li>所有主流的浏览器 都支持 <code>alt</code> 图像替代文本 属性。</li> </ul> </li> <li>图像类型 输入标签: input-<code>type,src,alt</code> <ul> <li><strong>偏移量发送</strong>(相对于 ❶ <strong>左上方</strong>): <ul> <li>当用户单击图像时，浏览器将以 ❷ <strong>像素为单位</strong>，将鼠标 相对于 图像边界的<strong>偏移量</strong> 发送到服务器,其中包括 <ul> <li>从图像 左边界开始的水平偏移量</li> <li>以及从图像 上边界开始的垂直偏移量。</li> </ul> </li> </ul> </li> </ul> </li> <li>属性搭配</li> <li>input-<code>type="image"</code>和 <code>src</code>,<code>alt</code>属性搭配 <ul> <li>图片提交按钮,图片资源url,图片的替代提示信息</li> </ul> </li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html/form_action.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>First name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Last name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/i/eg_submit.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <ul> <li> <p>空文本,直接点击图片提交<br> <a href="http://img.e-com-net.com/image/info8/54f8733e291e4a77b0d521d663cc713c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/54f8733e291e4a77b0d521d663cc713c.jpg" alt="【表单标签（知识点超全版本）】_第6张图片" width="324" height="184" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/0f4220c675914d04b3c7dd7081988ff5.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/0f4220c675914d04b3c7dd7081988ff5.png" alt="【表单标签（知识点超全版本）】_第7张图片" width="572" height="129" style="border:1px solid black;"></a></p> </li> <li> <p>结果: 服务器收到 两个空值,2个 相对于左上方的偏移量 x,y</p> </li> <li> <p>填写文本后,再点击图像提交<br> <a href="http://img.e-com-net.com/image/info8/bb8036b85e42468489737b118c46eeec.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bb8036b85e42468489737b118c46eeec.jpg" alt="【表单标签（知识点超全版本）】_第8张图片" width="299" height="178" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/6139d5268a6442e5a90e9c1fd83ac30f.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/6139d5268a6442e5a90e9c1fd83ac30f.png" alt="【表单标签（知识点超全版本）】_第9张图片" width="541" height="121" style="border:1px solid black;"></a></p> </li> <li> <p>四个值: 2个文本输入值,2个偏移量值</p> </li> </ul> <hr> <h5>⑶ checked 属性: 选中项 （布尔属性，仅限 type=“checkbox” 和 type=“radio”）</h5> <ul> <li>⑶ <strong><code><input></code> 输入标签的 <code>checked</code> 选中 属性</strong></li> <li>用于 <ul> <li>如何规定 在页面加载时 被预先选定的 input 元素 ? <ul> <li>使用 input-<code>checked</code> 选中属性</li> </ul> </li> </ul> </li> <li>配合使用 <ul> <li>input-<code>checked</code> 选中 属性 与谁 配合使用 ? <ul> <li>复选框 <code><input type="checkbox"></code> 或 单选框 <code><input type="radio"></code></li> <li>类型是,能被选中的元素</li> <li>复选框和单选按钮的值，仅在当前选中<code>checked</code>时，才会被包含在提交的数据中。如果是 <code>checked</code>，则提交：所选控件的 名称 <code>name</code> 和值 <code>value</code>。</li> </ul> </li> </ul> </li> <li>在页面加载后，如何设置 <code>checked</code> 选中 属性 ? <ul> <li>可以用 JavaScript 代码进行设置.</li> </ul> </li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html/form_action.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vehicle<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bike<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> I have a bike<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vehicle<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Car<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checked<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> I have a car<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><img src="http://img.e-com-net.com/image/info8/160111cf0a314250ba5cabbd1e425b6d.png" alt="在这里插入图片描述" width="0" height="0"><br> <a href="http://img.e-com-net.com/image/info8/ca2d3fc923d140a299f6bcdb2afc946c.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/ca2d3fc923d140a299f6bcdb2afc946c.png" alt="【表单标签（知识点超全版本）】_第10张图片" width="565" height="127" style="border:1px solid black;"></a></p> <ul> <li>选中的项目,会打上勾号</li> </ul> <hr> <h5>⑷ disabled 属性: 禁用元素 ( 不可点击，布尔属性 disabled=“disabled” )</h5> <ul> <li>⑷ <strong><code><input></code> 输入标签的 <code>disabled</code> 禁用属性</strong> <ul> <li>用于 <ul> <li>如何规定 被禁用 的 <code>input</code>输入 元素 ?</li> <li>使用 input- <code>disabled</code> 禁用属性</li> </ul> </li> <li>被禁用的 input 输入元素 可以用和点击吗 ? <ul> <li>不可用，也 不可点击。用户 不能与输入进行交互。</li> </ul> </li> <li>input-<code>disabled</code> 禁用属性 一般用在哪里 ? <ul> <li>一般设置 <code>disabled</code> 属性 禁用元素，当满足某些条件后，用 JavaScript 删除 <code>disabled</code>禁用值，将 input 输入 元素的值 切换为 可用。</li> <li>禁用–>可用</li> </ul> </li> </ul> </li> <li>注释： <ul> <li><code>disabled</code> 禁用属性无法与什么 <code>type</code>类型的 属性值一起使用 ? <ul> <li>无法与<code><input type="hidden"></code> 隐藏类型的 输入标签一起使用。</li> <li>隐藏了的元素,没必要再禁用，禁止用户交互。</li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html/form_action.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>First name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Last name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/fb213501a7124345979e67c5dc34915c.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/fb213501a7124345979e67c5dc34915c.png" alt="【表单标签（知识点超全版本）】_第11张图片" width="345" height="116" style="border:1px solid black;"></a></p> <ul> <li><strong>被禁用的元素</strong>: 无法获取焦点,不能点击,也不能输入内容。不会收到点击 <code> click</code> 事件，禁用的输入，不会随表单一起提交。 <ul> <li>显示为: 灰色区域。禁用输入，通常使用更暗的颜色，或使用一些其他形式的指示 <strong>字段不可使用</strong>。</li> </ul> </li> </ul> <hr> <h5>⑸ value 属性: 输入控件的值（按钮显示标签 + 文本默认值 + 选择项关联值）</h5> <ul> <li>⑸ <strong><code><input></code> 输入标签的<code>value</code> 值属性</strong> <ul> <li>用于 <ul> <li>如何为 <code>input</code>输入标签 设定值 ? <ul> <li>使用<code>value</code>值 属性</li> <li>输入控件的值。当在 HTML 中指定时，这是初始值，可以使用 JavaScript 访问相应的 <code>htmlputelement</code> 对象的 <code>value</code> 属性，随时修改或检索它。</li> <li><strong>可选和强制</strong>： <code>value</code> 属性总是可选的，但是对于 复选框（<code>checkbox</code>）、单选（<code>radio</code>）和隐藏 （<code>hidden</code>）应该被认为是强制的。</li> </ul> </li> </ul> </li> <li>对于不同的输入类型，<code>value</code> 属性的 <strong>用法</strong> 一样吗 ? <ul> <li> <p>不一样.三类: <strong>按钮的显示文本 + 文本默认值 + 选择项的关联值</strong></p> </li> <li> <p>① 如何定义 <strong>按钮上的 显示的文本</strong> ?</p> <ul> <li>当 <code>type="button", "reset", "submit" </code>,使用 <code>value</code>值属性 <ul> <li>总结: 按钮,提交按钮,重置按钮 = 按钮上的显示文本</li> <li><strong>输入值</strong>: 输入控件的值。</li> <li><strong>默认值</strong>: 在 HTML 中指定时，是初始值(默认值).</li> </ul> </li> </ul> </li> <li> <p>② 如何定义 输入字段的 <strong>初始值 ( 默认值)</strong> ?</p> <ul> <li>当<code>type="text", "password", "hidden" </code>,使用 <code>value</code>值属性 <ul> <li>总结: 文本,密码,隐藏 = 初始值</li> </ul> </li> </ul> </li> <li> <p>③ 如何定义 与输入 <strong>相关联的值</strong> ?</p> <ul> <li>当 <code>type="checkbox", "radio", "image" </code>,使用 <code>value</code>值属性 <ul> <li>总结: 复选框,单选框,图像 = 相关联的值。</li> </ul> </li> </ul> </li> </ul> </li> <li>注释： <ul> <li>什么类型的输入,必须设置 <code>value</code> 值属性 ? <ul> <li>复选框和单选框</li> <li><code><input type="checkbox"></code> 和 <code><input type="radio"></code> 中 必须设置<code>value</code> 属性。</li> <li><strong>选中项的 值</strong>: 提交表单数据时,提交的就是 选中项的 <code>value</code> 的属性值，选项内容不能为空，所以<code>value</code>值 所以 不能省略。</li> </ul> </li> <li><code>value</code> 值属性无法与什么类型的输入 一起使用 ? <ul> <li>文件上传，无法与 <code><input type="file"></code> 一同使用。上传文件，不需要默认文本值，上传的是文件。</li> </ul> </li> </ul> </li> </ul> </li> <li>有初始值的 邮箱和密码输入框 ( 载入后,默认就填写好的,可以删除和修改)</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html/form_action.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Email: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1079@qq.com<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> Password: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pwd<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>abcde123<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/67d411ce77094c8b9faf02ed38981c1a.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/67d411ce77094c8b9faf02ed38981c1a.gif" alt="在这里插入图片描述" width="514" height="86"></a></p> <ul> <li>和<code>placeholder</code>提示占位符不同的是 ：点击后,<code>value</code>初始值也不会消失,可以删除和修改。</li> </ul> <hr> <h5>⑹ tabindex 属性: tab 键 聚焦导航 （整数值，Tab 键访问顺序）</h5> <ul> <li>⑹ <strong><code><input></code> 输入标签的<code>tabindex</code>属性</strong> <ul> <li>值: 一个数值(可选的)</li> <li><strong>tab 键 聚焦</strong>: 整数值。定义了 输入是否应该 通过使用 Tab 键进行聚焦，以及元素是否 参与了 连续的聚焦导航。</li> <li><strong>访问元素 顺序</strong>: 这个值 还建立了 使用 Tab 键访问元素的顺序。</li> <li><strong><code>tabindex</code>的属性值</strong> (根据符号 有特殊的含义): <ul> <li><strong>负值</strong><code>-1</code>: <code>tabindex="-1"</code> <ul> <li><strong>用户可聚焦+ 不能连续导航</strong>: 如果<code>tabindex</code>为负值，则表示 该元素应该是 用户可聚焦的，但不能使用 连续的键盘导航。</li> <li>建议始终使用<code>-1</code>值，因为使用其他值 可能比较复杂。</li> </ul> </li> <li><strong>值 <code>0</code></strong>: <code>tabindex="0"</code> <ul> <li><strong>可聚焦 + 可被连续导航 (访问到)</strong>: <code>tabindex</code>为0 意味着 元素应该是可聚焦的，并且可以 通过连续的键盘导航 访问，但是 顺序 由用户代理决定，它应该应用用户的平台约定。</li> <li>当希望元素 具有可聚焦性 并参与键盘导航，而不是试图 自己管理 tab 顺序时，这通常是 <strong>使用的最佳值</strong>。</li> </ul> </li> <li><strong>正数</strong>: <ul> <li><strong>tab 顺序</strong>: <code>tabindex</code>的正数 表示元素的 tab顺序。</li> <li><strong>聚焦顺序</strong>: 每当用户按 Tab键时，下一个更高的<code>tabindex</code>值的元素 就会被聚焦。</li> <li><strong>反顺序</strong>: 大多数平台 都提供了一个 反tab特性，通常使用 <strong>Shift + Tab</strong> 的组合，从而 颠倒 制表符tab的顺序。</li> </ul> </li> <li><strong>注:省略 和无效值</strong>: 如果省略了<code>tabindex</code>或<code>tabindex</code>不是 有效的整数，用户代理 将遵循 <strong>平台约定</strong> 来确定该做什么。</li> <li><strong>谨慎使用</strong>：因为，除了隐藏<code>hidden</code>类型的输入外，所有<code>input</code>输入类型 都是可聚焦的，所以尽量别在表单控件上使用此属性。 <ul> <li>因为这样做，将需要管理文档中 所有元素的焦点顺序，如果操作不当，可能会损害可用性和可访问性。</li> </ul> </li> </ul> </li> </ul> </li> </ul> <hr> <h4>1.4.2 input 输入标签 新增的 html5 属性</h4> <ul> <li><strong>HTML5 中,<code><input></code> 输入 标签 新增的属性</strong> 有哪些 ?</li> </ul> <table> <thead> <tr> <th align="left">属性名</th> <th align="left">属性值</th> <th align="left">适用于类型 type=“”</th> <th align="left">用于</th> </tr> </thead> <tbody> <tr> <td align="left">① autocomplete</td> <td align="left">=on,off</td> <td align="left">all</td> <td align="left">规定是否使用输入字段的 <strong>自动完成</strong> 功能。实现自动完成功能的 <strong>两个前提</strong>: ❶ 需要自动完成的标签,必须设置<code>name</code>属性,这样才能 完成提交. ❷ 必须提交过一次,第二次输入的时候,才会有 自动完成提示.</td> </tr> <tr> <td align="left">② autofocus</td> <td align="left">=autofocus</td> <td align="left">almost all</td> <td align="left">规定输入字段 在页面加载时是否 获得<strong>焦点</strong>。（不适用于 <code>type="hidden"</code>,因为隐藏字段 不显示,肯定无法获得焦点）</td> </tr> <tr> <td align="left">③ form</td> <td align="left">=formname</td> <td align="left">all</td> <td align="left">规定输入字段 <strong>所属</strong> 的一个或多个 <strong>表单</strong> 。</td> </tr> <tr> <td align="left">④ formaction</td> <td align="left">=URL</td> <td align="left">image, submit</td> <td align="left">覆盖 表单<code><form></code>的 action 属性。（适用于 <code>type="submit"</code> 和<code> type="image"</code>）</td> </tr> <tr> <td align="left">⑤ formenctype</td> <td align="left">见注释</td> <td align="left">image, submit</td> <td align="left">覆盖 表单<code><form></code>的 enctype 属性。（适用于 <code>type="submit"</code> 和 <code>type="image"</code>）</td> </tr> <tr> <td align="left">⑥ formmethod</td> <td align="left">=get,post</td> <td align="left">image, submit</td> <td align="left">覆盖 表单<code><form></code>的 method 属性。（适用于 <code>type="submit"</code> 和 <code>type="image"</code>）</td> </tr> <tr> <td align="left">⑦ formnovalidate</td> <td align="left">=formnovalidate</td> <td align="left">image, submit</td> <td align="left">覆盖 表单<code><form></code>的 novalidate 属性。如果使用该属性，则提交表单时 不进行验证。</td> </tr> <tr> <td align="left">⑧ formtarget</td> <td align="left">=<code>_blank,_self,_parent,_top,framename</code></td> <td align="left">image, submit</td> <td align="left">覆盖 表单<code><form></code>的 target 属性。（适用于 <code>type="submit"</code> 和 <code>type="image"</code>）</td> </tr> <tr> <td align="left">⑨ height</td> <td align="left">=number pixels,%</td> <td align="left">image</td> <td align="left">定义 input 字段的 高度。（适用于 <code>type="image"</code>）</td> </tr> <tr> <td align="left">⑩ list</td> <td align="left">=datalist-id</td> <td align="left">almost all</td> <td align="left"><strong>关联 数据列表<code>datalist</code></strong>. <strong>引用</strong> 包含输入字段的 预定义选项的 <strong>datalist</strong> 。自动完成选项的<code><datalist></code>的 <code>id</code> 属性的值。</td> </tr> <tr> <td align="left">⑪ max</td> <td align="left">=number,date</td> <td align="left">numeric types（数字类型）</td> <td align="left">规定输入字段的 <strong>最大值</strong>。与 <code>min</code> 属性配合使用，来创建 <strong>合法值的 范围</strong>。</td> </tr> <tr> <td align="left">⑫ maxlength</td> <td align="left">=number</td> <td align="left">password, search, tel, text, url</td> <td align="left">规定输入字段中的字符的 <strong>最大长度</strong>。</td> </tr> <tr> <td align="left">⑬ min</td> <td align="left">=number,date</td> <td align="left">numeric types（数字类型）</td> <td align="left">规定输入字段的 <strong>最小值</strong>。与 <code>max</code> 属性配合使用，来创建 合法值的范围。</td> </tr> <tr> <td align="left">⑭ multiple</td> <td align="left">=multiple</td> <td align="left">email, file</td> <td align="left"><strong>多值</strong>. 如果使用该属性，则允许 <strong>一个以上的 值</strong>。</td> </tr> <tr> <td align="left">⑮ name</td> <td align="left">=field_name</td> <td align="left">all</td> <td align="left">定义 input 元素的 <strong>名称</strong>。</td> </tr> <tr> <td align="left">⑯ pattern</td> <td align="left">=regexp_pattern</td> <td align="left">password, text, tel</td> <td align="left">规定输入字段的 <strong>值的 模式或格式</strong>。例如 <code>pattern="[0-9]" </code>表示输入值必须是 0 与 9 之间的数字。</td> </tr> <tr> <td align="left">⑰ placeholder</td> <td align="left">=text</td> <td align="left">password, search, tel, text, url</td> <td align="left"><strong>占位符 (示例值)</strong>. 规定 帮助用户填写输入字段的 <strong>提示</strong>。</td> </tr> <tr> <td align="left">⑱ readonly</td> <td align="left">= readonly</td> <td align="left">almost all</td> <td align="left">规定输入字段为 <strong>只读</strong>。该值 不可编辑。</td> </tr> <tr> <td align="left">⑲ required</td> <td align="left">=required</td> <td align="left">almost all</td> <td align="left">指示输入字段的值是 <strong>必需的</strong>。</td> </tr> <tr> <td align="left">⑳ size</td> <td align="left">=number_of_char</td> <td align="left">email, password, tel, text, url</td> <td align="left"><strong>可见宽度</strong>. 定义输入字段的 <strong>宽度</strong>。(以字符 为单位)</td> </tr> <tr> <td align="left">㉑ src</td> <td align="left">=URL</td> <td align="left">image</td> <td align="left">定义 以提交按钮形式 显示的 <strong>图像的 URL</strong>。搭配<code>type="image"</code>使用.</td> </tr> <tr> <td align="left">㉒ step</td> <td align="left">=number</td> <td align="left">numeric types（数字类型）</td> <td align="left"><strong>间隔值</strong>.规定输入字的 <strong>合法数字 间隔</strong>。</td> </tr> <tr> <td align="left">㉓ width</td> <td align="left">=pixels,%</td> <td align="left">image</td> <td align="left">定义 input 字段的 <strong>宽度</strong>。（适用于 <code>type="image"</code>）</td> </tr> </tbody> </table> <hr> <h5>⑴ autofocus 属性: 自动对焦 ( 获得焦点,仅限一个)</h5> <ul> <li>⑴ <strong><code><input></code> 输入标签 的<code>autofocus</code> 属性</strong> <ul> <li>用于 <ul> <li>如何规定 当页面加载时 <code>input</code> 输入元素 自动获得焦点 ? <ul> <li>使用 <code>autofocus</code>自动对焦 属性</li> </ul> </li> <li><strong>使用限制</strong>: <ul> <li>指定在页面加载时 表单控件应该具有 输入焦点。</li> <li><strong>仅限一个</strong>: 文档中 只有一个与表单相关的元素 可以指定此属性.</li> </ul> </li> </ul> </li> <li>关于<code>autofocus</code>自动对焦 属性 , HTML 4.01 与 HTML 5 之间的差异 <ul> <li><code>autofocus</code> 自动对焦 属性是 HTML5 中的 新属性。</li> </ul> </li> <li>input-<code>autofocus</code>自动对焦 属性的语法 <ul> <li><code><input autofocus="autofocus"></code></li> </ul> </li> </ul> </li> <li>哪些浏览器 支持 input-<code>autofocus</code>自动对焦 属性 ? <ul> <li>IE 9+ 以及更早的版本 不支持 <code>input</code> 标签的 <code>autofocus</code> 属性</li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo_form.asp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> First name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token attr-name">autofocus</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>autofocus<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> Last name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <ul> <li><strong>获得焦点</strong>: 没有设置 自动对焦的,要输入数据,需要点击一下,获得焦点,光标才会在那个位置 <ul> <li>默认光标不在需要输入的位置的.<br> <a href="http://img.e-com-net.com/image/info8/7e124f5af526498b8bcd0edd0d95a350.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/7e124f5af526498b8bcd0edd0d95a350.png" alt="在这里插入图片描述" width="299" height="91"></a><br> <a href="http://img.e-com-net.com/image/info8/a1fe05cf95ca4c879b069991cee1eb30.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/a1fe05cf95ca4c879b069991cee1eb30.png" alt="在这里插入图片描述" width="341" height="94"></a></li> </ul> </li> <li><strong>自动对焦 和光标位置</strong>: 设置自动对焦的,光标默认就在需要输入的位置,可以直接输入.</li> </ul> <hr> <h5>⑵ src 属性: 图片地址 url （限 type=“image”）</h5> <ul> <li>⑵ <strong><code><input></code> 输入标签的<code>src</code> 图像地址 url 属性</strong> <ul> <li>用于 <ul> <li>如何规定 作为 图像提交按钮的 图像的URL。 <ul> <li>使用 <code>src</code> 图像资源 url 属性</li> </ul> </li> </ul> </li> <li>使用 <ul> <li>input-<code>src</code>图像地址 url 属性必须与谁一起使用 ? <ul> <li>图像类型输入: 与 <code><input type="image"></code> 同时使用。</li> </ul> </li> </ul> </li> <li>input-<code>src</code> 图像地址 url 属性的语法 <ul> <li><code><input src="url"></code></li> </ul> </li> <li>input-<code>src</code>图像地址 url 属性的属性值 <ul> <li>URL</li> <li>作为图像形式的提交按钮 图像的 URL。</li> </ul> </li> </ul> </li> <li>一个图像形式的提交按钮：</li> <li><strong>搭配属性</strong></li> <li>input-<code>type="image"</code> 图片输入 提交标签 和input-<code>src</code>图片资源 url 属性 搭配使用</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html/form_action.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>First name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Last name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/i/eg_submit.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/6e24549446e94741b34b61a0ae94ac20.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/6e24549446e94741b34b61a0ae94ac20.gif" alt="【表单标签（知识点超全版本）】_第12张图片" width="443" height="183" style="border:1px solid black;"></a></p> <ul> <li>图片类型的提交输入标签,点击后,会发送偏移量给服务器</li> </ul> <hr> <h5>⑶ step 属性: 间隔值</h5> <ul> <li>⑶ <strong><code><input></code> 输入标签的<code>step</code> 间隔 属性</strong> <ul> <li>用于 <ul> <li>如何规定 输入字段的 合法 数字间隔 ? <ul> <li>使用 <code>step</code>间隔值 属性</li> <li>（假如 step=“3”，则合法数字 应该是 -3、0、3、6，以此类推）。</li> </ul> </li> </ul> </li> <li>使用 <ul> <li>input-<code>step</code>间隔 属性可以与 什么属性搭配使用 ? <ul> <li>可以与 <code>max</code> 最大值 以及 <code>min</code> 最小值 属性配合使用，以创建 合法值的范围。设置 最大值/最小值 和间隔值.</li> </ul> </li> </ul> </li> <li><code>step</code>、<code>max</code> 以及<code> min</code> 属性适用于什么 类型的输入 ? <ul> <li>以下 类型的<code><input></code> 输入标签： <ul> <li><code>number, range, date, datetime, datetime-local, month, time</code> 以及 <code>week</code>。</li> <li>数值，时间和日期</li> </ul> </li> </ul> </li> <li>input-<code>step</code>间隔 属性的语法 <ul> <li><code><input step="number"></code></li> </ul> </li> <li>属性值 <ul> <li>number ;数字</li> <li>数字 间隔。</li> </ul> </li> </ul> </li> <li>设置数字间隔为 3 的 数字输入：</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>points<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <ul> <li> <p>不满足 数字间隔要求的输入,提交时,会提示有效值<br> <a href="http://img.e-com-net.com/image/info8/bc9c0f301a994c149f6cbf721e589e94.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/bc9c0f301a994c149f6cbf721e589e94.png" alt="在这里插入图片描述" width="387" height="93"></a></p> </li> <li> <p>没有设置数字间隔的数字输入框,点上下加减时,一般是一个一个的加减<br> <a href="http://img.e-com-net.com/image/info8/13425e0df4804b1d98cca4020fbcb07b.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/13425e0df4804b1d98cca4020fbcb07b.gif" alt="在这里插入图片描述" width="443" height="64"></a></p> </li> <li> <p><strong>间隔值</strong>: 设置了数字间隔的 数字输入,点上下加减时,会按照 数字间隔加减,间隔是 3 ,则每次加减 3</p> <ul> <li>如果没有设置<code>min</code>最小值,默认从 0 开始</li> <li>如果设置了<code>min</code>最小值,默认从 最小值开始<br> <a href="http://img.e-com-net.com/image/info8/a529f730c0e64a19b4001fe094083be5.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/a529f730c0e64a19b4001fe094083be5.gif" alt="在这里插入图片描述" width="545" height="62"></a></li> </ul> </li> <li> <p>设置<code>min</code>最小值为 2, <code>step</code>数字间隔为 3,到最小值后,不能再向下减<br> <a href="http://img.e-com-net.com/image/info8/3c242ec41a0c469384db7ac7313a0d1e.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/3c242ec41a0c469384db7ac7313a0d1e.gif" alt="在这里插入图片描述" width="545" height="62"></a><br> <a href="http://img.e-com-net.com/image/info8/2bce665f85404da090237efc7673f821.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/2bce665f85404da090237efc7673f821.png" alt="在这里插入图片描述" width="245" height="97"></a></p> </li> </ul> <hr> <h5>⑷ form 属性: 所属表单</h5> <ul> <li>⑷ <strong><code><input></code> 输入标签的 <code>form</code>表单 属性</strong> <ul> <li>用于 <ul> <li>如何规定 <code>input</code>输入 元素所属 的(一个或多个) 表单 ? <ul> <li>使用 <code>form</code> 表单属性</li> </ul> </li> </ul> </li> <li>input-<code>form</code> 表单 属性的值 有什么规定 ? <ul> <li>① 必须是<code>input</code> 元素所属的 <strong>表单的 id</strong>。</li> <li>② 如果要引用 一个以上的表单，使用什么分隔 ? <ul> <li>使用 <strong>空格分隔</strong></li> <li><strong>注意</strong>:目前, 一个输入 只能与一个表单相关联。</li> </ul> </li> </ul> </li> </ul> </li> <li>HTML 4.01 与 HTML 5 之间的差异 <ul> <li>form 属性是 <code><input></code> 标签在 HTML5 中的新属性。</li> </ul> </li> </ul> <hr> <ul> <li><strong>关联关系</strong>: 绑定 所属表单. 让位于 表单元素 外部的元素,依然是表单的一部分.</li> <li><strong>嵌套关系</strong> <ul> <li><code><form> action method id</code> <ul> <li><code><input> type name value</code></li> </ul> </li> <li><code><input> type name form</code></li> <li><strong>关联关系</strong>: input-<code>form="form-id"</code></li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html5/demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> First name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>下面的 "Last name" 字段位于 form 元素之外，但仍然是 表单的一部分。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> Last name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span> <span class="token attr-name">form</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/6483a28e3995403f8a1c9b8a034ae33f.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/6483a28e3995403f8a1c9b8a034ae33f.png" alt="【表单标签（知识点超全版本）】_第13张图片" width="530" height="147" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/5f115cc4f803423eb8d27e2764ecda67.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/5f115cc4f803423eb8d27e2764ecda67.png" alt="【表单标签（知识点超全版本）】_第14张图片" width="582" height="173" style="border:1px solid black;"></a></p> <ul> <li><strong>绑定所属表单</strong>: 不在 <code><form></code>表单元素内部的 <code><input></code>输入元素,通过 input-<code>form="form1"</code>仍然是 表单的一部分,提交时,数据也会一起提交</li> <li>待解决: 测试,用空格分隔的列表,同时绑定两个 表单时,都绑定不成功了.（目前不支持绑定多个表单，仅限一个表单）</li> </ul> <hr> <h5>⑸ formaction 属性: (表单提交到的) 服务器页面地址（限 type=“submit”，type=“image”）</h5> <ul> <li>⑸ <strong><code><input></code> 输入标签的 <code>formaction</code> 服务器页面地址 属性</strong> <ul> <li>用于 <ul> <li>如何覆盖 <code>form</code> 表单元素的 <code>action</code>服务器页面地址 属性 ? <ul> <li>使用 <code>formaction</code> 服务器页面地址 属性</li> </ul> </li> </ul> </li> <li><code>formaction</code> 服务器页面地址 属性 适用于什么 <code>type</code>类型 输入标签 ? <ul> <li>提交和图片 类型的输入标签: <code>type="submit"</code> 以及 <code>type="image"</code>。</li> </ul> </li> <li>使用 <code>formaction</code> 服务器页面地址 属性的属性值 <ul> <li>URL</li> <li>input-<code>formaction="url"</code></li> <li>向何处发送 表单数据</li> </ul> </li> </ul> </li> <li><strong>指定 不同服务器页面</strong>: 带有 两个提交按钮 的表单,如何把表单数据,提交到不同的服务器 ?（不同的 action 值）：</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html5/demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> First name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> Last name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">formaction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html5/demo_admin.asp<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>以管理员身份提交<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <hr> <h5>⑹ formenctype 属性: (表单数据) 编码类型（限 type=“submit”，type=“image”）</h5> <ul> <li>⑹ <strong><code><input></code> 输入标签的 <code>formenctype</code> 表单编码类型 属性</strong> <ul> <li>用于 <ul> <li>如何覆盖<code> form</code> 表单 元素的 <code>enctype</code> 编码类型 属性 ? <ul> <li>使用 <code>formenctype</code>表单编码类型 属性</li> </ul> </li> <li><code>formenctype</code>表单编码类型 属性 常与什么 <code>type</code>类型的输入标签 配合使用 ? <ul> <li>提交和图片: 与 <code>type="submit"</code> 和 <code>type="image"</code> 配合使用。</li> </ul> </li> </ul> </li> <li><code>formenctype</code>表单编码 属性的属性值 有哪些 ? <ul> <li>发送前,表单数据编码类型</li> <li>① <strong>编码 所有字符</strong>: <code>formenctype="application/x-www-form-urlencoded"</code> <ul> <li>在发送前 对 所有字符 进行 url 编码（默认） .</li> </ul> </li> <li>② <strong>不编码 字符</strong>: <code>formenctype="multipart/form-data"</code> <ul> <li>不对字符 编码 <ul> <li>什么时候 必须设置 不对字符 编码 ? <ul> <li>当使用有 文件上传 控件的表单时</li> </ul> </li> </ul> </li> </ul> </li> <li>③ <strong>不编码 特殊字符</strong>: <code>formenctype="text/plain"</code> <ul> <li>将 空格 转换为 “+” 符号，不编码 特殊字符 .</li> </ul> </li> </ul> </li> </ul> </li> <li><strong>指定 不同的编码方式</strong>: 如何对 带有两个 提交按钮 的表单,采取不一样的编码方式 ?（拥有 不同的 编码方式）：</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo_post_enctype.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> First name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">formenctype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multipart/form-data<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <hr> <h5>⑺ formmethod 属性: (表单数据) 发送/传输方法 （限 type=“submit”，type=“image”）</h5> <ul> <li>⑺ <strong><code><input></code> 输入标签的<code>formmethod</code> 表单数据 发送方法 属性</strong> <ul> <li>用于 <ul> <li>如何覆盖 <code>form</code> 元素的 <code>method</code> 属性 如何设置 发送表单数据的方法 ? <ul> <li>使用<code>formmethod</code> 数据传输方法 属性</li> </ul> </li> </ul> </li> <li>可以通过哪些方式 发送 表单数据 ? <ul> <li>① 以 URL 变量 (使用<code>method="get"</code>)<strong>一次性传输</strong> 的形式 来发送</li> <li>② 以 HTTP post (使用 <code>method="post"</code>)<strong>多段传输</strong> 的形式来发送</li> </ul> </li> <li>使用 <ul> <li><code>formmethod</code>表单数据 发送方法 属性,常与什么 <code>type</code>属性值 配合使用 ? <ul> <li>提交 和图片提交的 输入标签: 与 <code>type="submit"</code> 以及 <code>type="image"</code> 配合使用。</li> <li>因为这两个是提交按钮,会向服务器 发送数据.</li> </ul> </li> </ul> </li> <li><code>formmethod</code>表单数据发送 方法 属性的语法 <ul> <li><code><input formmethod="get|post"></code></li> </ul> </li> <li><code>formmethod</code>表单数据发送 方法 属性的属性值 <ul> <li>get <ul> <li>以 URL 变量 (使用<code>method="get"</code>) 的形式 来发送表单数据<code>name=value&name=value</code></li> </ul> </li> <li>post <ul> <li>以 HTTP post 事务 的形式 发送表单数据（form-data）</li> </ul> </li> </ul> </li> </ul> </li> <li><strong>指定 两种发送方法</strong>: 如何让部分提交按钮 设置其他的发送表单数据的方法 ?覆盖了表单的 get 方法</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> First name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> Last name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">formmethod</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">formaction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo_post.asp<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <hr> <h5>⑻ formnovalidate 属性: 不验证 表单数据 （限 type=“submit”，type=“image”）</h5> <ul> <li>⑻ <strong><code><input></code> 输入标签的<code>formnovalidate</code></strong> 表单不验证 属性 <ul> <li>用于 <ul> <li>如何覆盖 <code>form</code> 表单 元素的 <code>novalidate</code> 属性 ? <ul> <li>在 <code>input</code> 输入 元素中使用 <code>formnovalidate</code> 表单不验证 属性</li> </ul> </li> <li>如果使用该属性，则提交表单时按钮 不会执行验证过程。</li> </ul> </li> <li><code>formnovalidate</code> 表单不验证 属性 适用于哪些标签 ? <ul> <li><code>formnovalidate</code> 表单不验证 属性,常与什么 <code>type</code>属性值 配合使用 ? <ul> <li>提交 和图片提交的 输入标签: 与 <code>type="submit"</code> 以及 <code>type="image"</code> 配合使用。</li> <li>因为这两个是提交按钮,会在向服务器 发送数据时，进行对数据的验证.</li> </ul> </li> </ul> </li> <li><code>formnovalidate</code> 表单不验证 属性的 语法是怎样的 ? <ul> <li>自重复: <code><input formnovalidate="formnovalidate"></code></li> </ul> </li> </ul> </li> <li>如何设置,带有两个提交按钮的表单（一个进行验证，另一个不验证）： <ul> <li><code>form</code> 表单 元素中不设置 不验证,在 提交类型的输入元素中 设置 <code>formnovalidate="formnovalidate" </code></li> </ul> </li> <li><strong>指定 验证和不验证 两种模式</strong></li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> E-mail: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>userid<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">formnovalidate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formnovalidate<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/54b8444c348f4b3c85d1aae5f94dd7d6.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/54b8444c348f4b3c85d1aae5f94dd7d6.gif" alt="【表单标签（知识点超全版本）】_第15张图片" width="446" height="136" style="border:1px solid black;"></a></p> <ul> <li>在表单元素的子元素中,进行单独设置"不验证",格式不正确 也可以提交成功.</li> </ul> <hr> <h5>⑼ formtarget 属性: (响应页面) 打开位置 （限 type=“submit”，type=“image”）</h5> <ul> <li>⑼ <strong><code><input></code> 输入标签的<code>formtarget</code> 打开位置 属性</strong> <ul> <li>用于 <ul> <li>如何覆盖 <code>form</code> 表单 元素的 <code>target</code> 打开位置属性 ?</li> <li>使用 <code>formtarget</code>表单打开位置 属性</li> </ul> </li> <li>使用 <ul> <li><code>formtarget</code> 打开位置 属性 常用于 什么样的 <code>type</code> 类型的 输入 标签? <ul> <li>提交和图片提交 标签: 与 <code>type="submit"</code> 以及 <code>type="image"</code> 配合使用。都会提交表单,需要指明 服务器响应页面的 打开位置.</li> </ul> </li> </ul> </li> <li>注释： <ul> <li>HTML5 支持 框架和框架集 吗 ? <ul> <li>不支持</li> </ul> </li> <li>现在，<code>_parent, _top</code> 和 <code>frame-name</code> 值大多用哪里? <ul> <li><code>iframe</code>内联框架标签。</li> </ul> </li> </ul> </li> <li><code>formtarget</code>打开位置 属性的语法 <ul> <li><code><input formtarget="value"></code></li> </ul> </li> <li><code>formtarget</code>打开位置 属性的属性值 <ul> <li><code>_blank</code> <ul> <li>在 <strong>新窗口/选项卡</strong> 打开响应页面.</li> </ul> </li> <li><strong><code>_self</code></strong> <ul> <li>在 <strong>同一框架</strong> 中 打开响应页面.（默认）</li> </ul> </li> <li><code>_parent</code> <ul> <li>在 <strong>父框架</strong> 中打开响应页面.</li> </ul> </li> <li><code>_top</code> <ul> <li>在 <strong>整个窗口</strong> 中打开响应页面.</li> </ul> </li> <li><code>framename</code> <ul> <li>在 <strong>指定的框架</strong> 中打开响应页面.</li> </ul> </li> </ul> </li> </ul> </li> </ul> <hr> <ul> <li><strong>指定 不同的打开位置</strong>: 如何让 带有两个提交按钮的表单，响应页面 在不同的窗口打开 ?</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> First name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> Last name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">formtarget</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/cc5241a5e046408d837478234bdaa983.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/cc5241a5e046408d837478234bdaa983.png" alt="在这里插入图片描述" width="330" height="96"></a></p> <ul> <li>第一个在 本窗口打开,第二个在一个 新的窗口中打开.</li> </ul> <hr> <h5>⑽ height 属性: 图片高度 （限 type=“image”）</h5> <ul> <li>⑽ <strong><code><input></code> 输入标签的<code>height</code> 图片高度 属性</strong> <ul> <li>用于 <ul> <li>如何规定 <code><input type="image"></code> 图片提交按钮 标签的的 高度 ? <ul> <li>使用 <code>height</code> 图片高度 属性</li> </ul> </li> </ul> </li> <li><code>height</code> 图片高度 属性在 input 中 适用于 什么<code>type</code> 类型的 输入标签 ? <ul> <li>图片: 只适用于 图片提交按钮 类型的输入 标签 <code><input type="image"></code></li> </ul> </li> <li>提示： <ul> <li>为什么 要为图片指定 高度和宽度 ? <ul> <li><strong>预留空间</strong>: 因为设置了高宽, ,当页面加载时 会为图片 预留 需要的 空间。</li> <li>如果没有为图片 设置高宽会怎样 ? <ul> <li><strong>页面布局变化</strong>: 浏览器 就 无法了解 图像的尺寸，无法为图片 预留合适的空间。</li> <li>当页面和图片加载时，页面布局 会发生变化。</li> </ul> </li> </ul> </li> </ul> </li> <li>input-<code>height</code> 图片高度 属性的语法 <ul> <li><code><input height="pixels|%"></code></li> </ul> </li> <li>input-<code>height</code> 图片高度 属性的属性值 <ul> <li>pixels <ul> <li>以 <strong>像素</strong> 计的高度。（比如 “100px” 或仅仅是 “100”）。</li> </ul> </li> <li>% <ul> <li>以 包含元素 的 <strong>百分比</strong> 计的高度（比如 “50%”）</li> </ul> </li> </ul> </li> </ul> </li> <li>如何用图片 作为提交按钮 ? <ul> <li><code><input> type="image"</code>常搭配使用的属性: <code>src, alt, width, height</code> (<strong>图片地址,替代文本,宽高</strong>)</li> <li>当时图片类型的输入 标签时,一般是这 5个属性</li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html5/demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> First name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> Last name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/i/eg_submit.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>128<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>128<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/c309b74f79a848fea2c6b33888416fb2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c309b74f79a848fea2c6b33888416fb2.jpg" alt="【表单标签（知识点超全版本）】_第16张图片" width="312" height="190" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/2971cb667353421a8cf410def62b60c6.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/2971cb667353421a8cf410def62b60c6.png" alt="【表单标签（知识点超全版本）】_第17张图片" width="476" height="118" style="border:1px solid black;"></a></p> <ul> <li><strong>提交 和发送值</strong>: 直接点击 图片提交按钮,会发送 x,y值(相对于左上的值)</li> </ul> <hr> <h5>⑾ list 属性: 绑定 datalist 数据列表（设置 预选值）</h5> <ul> <li>⑾ <strong><code><input></code> 输入标签的<code>list</code> 列表绑定 属性</strong> <ul> <li>用于 <ul> <li><strong>预定义 选项值 (建议值 选项列表)</strong>: 如何引用 <code>datalist</code> 数据列表，作为 输入字段 的 预定义选项 ?</li> <li>使用 <code>list</code> 列表绑定 属性</li> <li><strong>不支持类型</strong>: 注意 (<code>hidden, password, checkbox, radio, file</code> ) 隐藏、密码、复选框、单选、文件或任何按钮类型 都不支持<code>list</code>属性。(因为,这些一般不需要 预定义的建议值)</li> <li><strong>支持类型</strong>，如 搭配 <code>type="url"</code>,url 地址，可以设定预选值。</li> </ul> </li> <li>input-<code>list</code> 列表绑定 属性的属性值 <ul> <li>input-<code>list="datalist-id"</code></li> <li>datalist-id <ul> <li>文档中的 绑定的 数据列表 <code>datalist</code> 的 id。</li> <li>list=“datalist 的 id”</li> </ul> </li> </ul> </li> <li>搭配 <code>,datalist</code> 数据列表 标签使用</li> </ul> </li> <li><strong>嵌套关系</strong> <ul> <li><code><form> </code>表单 <ul> <li><code><input> type, list ,name</code></li> <li><code><datalist> id</code> 数据列表 <ul> <li><code><option> label value</code> 选项</li> <li>关联关系: input-<code>list</code>=datalist-<code>id</code></li> </ul> </li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo_form.asp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 网页: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url_list<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>link<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url_list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>W3Schools<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3schools.com<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Google<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.google.com<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Microsoft<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.microsoft.com<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/93077779a9ff46ff98cb7a81171f579f.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/93077779a9ff46ff98cb7a81171f579f.png" alt="【表单标签（知识点超全版本）】_第18张图片" width="370" height="137" style="border:1px solid black;"></a></p> <ul> <li>数据列表的<code>value</code>选项值 = 关联 <code><input></code> 输入标签的 建议值选项列表</li> </ul> <hr> <h5>⑿ max 属性: 最大值 （max=“number|date”）</h5> <ul> <li> <p>⑿ <strong><code><input></code> 输入标签的<code>max</code> 最大值 属性</strong></p> <ul> <li>用于 <ul> <li>如何规定 输入字段 所允许的 最大值 ?</li> <li>使用 <code>max</code> 最大值 属性</li> </ul> </li> <li>使用 <ul> <li>如何创建 合法值范围 ? <ul> <li><code>max</code>最大值 属性与 <code>min</code> 最小值 属性配合使用</li> </ul> </li> </ul> </li> <li><code>max</code> 最大值 属性与 <code>min</code> 最小值 属性 适用于 什么标签 ? <ul> <li>以下 <code><input></code> 输入标签的 <code>type</code>类型( 有输入值的类型,这些才需要 限定值的范围)： <ul> <li><code>number, range, date, datetime, datetime-local, month, time</code> 以及 <code>week</code>。</li> <li>输入数字和日期的字段(8个类型的标签 可以使用)</li> </ul> </li> </ul> </li> <li>input-<code>max</code>最大值 属性的语法 <ul> <li><code><input max="number|date"></code>,根据 输入标签 <code>type</code>类型不同,格式略有不同.</li> </ul> </li> <li>input-<code>max</code>最大值 属性的属性值: 一般是 <strong>数字和日期</strong> <ul> <li>number <ul> <li>数字值。最大数值.</li> </ul> </li> <li>date <ul> <li>日期。最大日期.</li> </ul> </li> </ul> </li> </ul> </li> <li> <p>如何设置 带有指定范围 的 数字输入 ?</p> <ul> <li>input-<code>type="number"</code> 数字输入 类型的标签,必须是整数值</li> </ul> </li> </ul> <pre><code class="prism language-html">Points: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>points<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/b947acfec1ba4585b5daa68b4a5768ee.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b947acfec1ba4585b5daa68b4a5768ee.jpg" alt="在这里插入图片描述" width="237" height="92"></a><br> <a href="http://img.e-com-net.com/image/info8/875592a9334743eb8788a0f3f907114d.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/875592a9334743eb8788a0f3f907114d.png" alt="在这里插入图片描述" width="390" height="98"></a><br> <img src="http://img.e-com-net.com/image/info8/b7fa21caeb504a69a0a729f3a3834b05.jpg" alt="在这里插入图片描述" width="0" height="0"></p> <ul> <li><strong>无效提示</strong>: 不满足要求,在提交时,会出现提示</li> </ul> <hr> <h5>⒀ maxlength 属性: (正整数,允许输入的 最大字符数 ，限 type=“text”，type=“password”)</h5> <ul> <li>⒀ <strong><code><input></code> 输入标签的<code>maxlength</code> 最大 字符数长度 属性</strong> <ul> <li>用于 <ul> <li>如何 (以字符个数,即以字符为单位)的形式 规定输入字段的 最大长度 ?</li> <li>使用 <code>maxlength</code>最大 字符数长度 属性</li> </ul> </li> <li>使用 <ul> <li><code>maxlength</code> 最大长度 属性与什么<code>type</code>类型的输入标签 配合使用 ?</li> <li>单行文本和密码框 的输入 标签: 与 <code><input type="text"></code> 或 <code><input type="password"></code> 配合使用。这两种 一般需要限定 输入字符的长度.</li> </ul> </li> <li>input-<code>maxlength</code> 最大长度 的属性值 <ul> <li>input-<code>maxlength="number"</code></li> <li>number 数字</li> <li>输入字段中允许的 最大字符数</li> </ul> </li> </ul> </li> <li>把文本输入区的最大长度 分别设置为: 5 和 9 个字符</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form_action.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fullname<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Address: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Address<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>9<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/59eba331ab23448d8c72a7d67cd8a937.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/59eba331ab23448d8c72a7d67cd8a937.png" alt="【表单标签（知识点超全版本）】_第19张图片" width="304" height="112" style="border:1px solid black;"></a></p> <ul> <li><strong>长度限制 和不允许输入</strong>: 部分浏览器, 当输入值 超过 指定的最大长度后,后面不能再输入一个字符. <ul> <li>再输入字符 会没反应,因为已经到最大长度了.</li> </ul> </li> </ul> <hr> <h5>⒁ multiple 属性: 多个值 （限 type=“email”，type=“file”）</h5> <ul> <li>⒁ <strong><code><input></code> 输入标签的<code>multiple </code>多值 属性</strong> <ul> <li>用于 <ul> <li>如何规定 输入字段 可选择多个值 ? <ul> <li>使用<code>multiple</code> 多值属性</li> </ul> </li> <li>如果使用该属性，则字段可接受 多个值。</li> </ul> </li> <li>注释： <ul> <li><code>multiple</code> 多值 属性使用与什么类型的输入标签 搭配使用 ? <ul> <li>以下 <code><input></code> 类型,邮件和文件上传 类型的 输入标签：<code>email</code> 和 <code>file</code>。可以选择多值 的类型 (比如,多个邮件,多个上传文件)</li> </ul> </li> </ul> </li> </ul> </li> <li>如何设置 可接受多个值的 文件上传字段：</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html5/demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 选择图片：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multiple<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>请尝试在浏览文件时选取一个以上的文件。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/3aa6b0fc714e44b78a6f6521b6dd3288.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3aa6b0fc714e44b78a6f6521b6dd3288.jpg" alt="【表单标签（知识点超全版本）】_第20张图片" width="592" height="421" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/816c40bcf7e9427f9bc0e3587f189346.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/816c40bcf7e9427f9bc0e3587f189346.jpg" alt="在这里插入图片描述" width="435" height="82"></a><br> <a href="http://img.e-com-net.com/image/info8/c43dfbe1687f44e8a08b9f06a6ae4658.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/c43dfbe1687f44e8a08b9f06a6ae4658.png" alt="【表单标签（知识点超全版本）】_第21张图片" width="427" height="129" style="border:1px solid black;"></a></p> <ul> <li><strong>选择 多个上传文件</strong>: 在文件类型的输入标签中,使用多值属性,可以一次性选择 多个文件</li> </ul> <hr> <h5>⒂ name 属性: 名称 （name/value 值对， 传递值）</h5> <ul> <li>⒂ <strong><code><input></code> 输入标签的<code>name</code> 名称 属性</strong> <ul> <li>用于 <ul> <li>如何规定 <code><input></code> 输入 元素的名称 ? <ul> <li>使用 <code>name</code> 名称 属性</li> </ul> </li> <li><strong>数据标识+ 数据引用</strong>: 如何对 提交到服务器后的 表单数据 进行标识，或者在客户端通过 JavaScript 引用表单数据 ? <ul> <li>使用 input-<code>name</code> 名称 属性</li> <li><strong>指定名称 + 传递值</strong>: 指定 输入控件的 名称的字符串。提交表单数据时，这个名称 和控件的值<code>value</code> 一起提交. <ul> <li>△ <strong>特别的<code>name</code>值</strong>: <code>name="_charset_"</code>,有一个特殊的含义。 <ul> <li><code><input type="hidden" name="_charset_" /></code></li> <li><strong>表单数据 字符编码</strong>: 如果用作 没有值的隐藏控件的名称<code>name</code> ，那么在 提交期间，值属性 将自动给出 一个包含 提交字符编码的值。,仅针对<code>type="hidden"</code>。</li> </ul> </li> <li><code>name="isindex"</code>不允许使用.</li> </ul> </li> </ul> </li> </ul> </li> <li>注释： <ul> <li><strong>传递值</strong>: 只有设置了 input-<code>name</code> 名称 属性的表单元素 才能在 提交表单时 传递它们的值 .(要传递值,就必须设置 名称 <code>name</code> 属性)</li> <li><strong>不提交值</strong>: 如果 没有指定名称<code>name</code>，或者名称 为空，则不会 将输入的值 与表单一起提交。</li> </ul> </li> <li><strong>有效值</strong>: 如果指定了<code>name</code>属性，则值不能为 空字符串或<code>isindex</code>。</li> <li>不能使用<code>isindex</code>的原因: <ul> <li><strong>曾有 特殊支持</strong>: <ul> <li>许多用户代理 以前都实现了对具有<code>isindex</code>名称值的 第一个 表单文本控件的 特殊支持，而这个规范 以前为它定义了 相关的用户代理需求。</li> <li>但是，一些用户代理 随后取消了 这种特殊支持，相关的需求 也从这个规范中 删除了。因此，为了避免 遗留用户代理中的问题 重新解释，不再允许 使用<code>isindex</code>名称。</li> <li>▲ <strong>总结</strong>: 表单元素 利用<code>name</code> 名称 属性 来传递值.</li> </ul> </li> </ul> </li> </ul> </li> <li>带有两个文本字段 和一个提交按钮的 HTML 表单：</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html/form_action.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fullname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Email: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>请在提交按钮上单击，输入会发送到服务器上名为 "form_action.asp" 的页面。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/a165d9553dfe4dccbb1d9c236fd2db68.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/a165d9553dfe4dccbb1d9c236fd2db68.png" alt="【表单标签（知识点超全版本）】_第22张图片" width="606" height="166" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/5fcad39be0884d54ad8fbd3945922b99.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/5fcad39be0884d54ad8fbd3945922b99.png" alt="【表单标签（知识点超全版本）】_第23张图片" width="564" height="120" style="border:1px solid black;"></a></p> <ul> <li>返回的值对,input-<code>name</code>=输入值</li> </ul> <hr> <h5>⒃ pattern 属性: 格式设置 ( 正则表达式 )</h5> <ul> <li>⒃ <strong><code><input></code> 输入 标签的<code>pattern</code> 正则模式 属性</strong> <ul> <li>用于 <ul> <li>如何验证 输入字段的 模式 ? <ul> <li>使用 input-<code>pattern</code> 正则模式属性 <ul> <li>[ˈpætərn]</li> </ul> </li> </ul> </li> <li>模式 指的是 什么 ? <ul> <li>正则表达式。</li> </ul> </li> </ul> </li> <li>注释： <ul> <li>input-<code>pattern</code>正则 模式 属性适用于什么类型的标签 ?</li> <li>以下 类型的<code><input></code>输入标签 (需要 限定 内容格式的类型)： <ul> <li><code>text, search, url, telephone, email</code> 以及 <code>password</code> 。</li> </ul> </li> </ul> </li> <li>提示： <ul> <li>如何对正则模式 要求的格式,进行描述和提示 ? <ul> <li>使用标准的 <code>title</code> 工具提示 属性来提示</li> <li>这个<code>title</code>的 属性值内容提示,在一些浏览器中 会跟着无效提示消息 一起展示给用户,所以很有用.</li> </ul> </li> </ul> </li> <li>input-<code>pattern</code>正则模式 属性的语法 <ul> <li><code><input pattern="regexp"></code></li> </ul> </li> <li>input-<code>pattern</code>正则模式 属性的属性值 <ul> <li>input-<code>pattern="regexp"</code> <ul> <li>regexp</li> </ul> </li> <li>指定 验证输入值的 格式.</li> </ul> </li> </ul> </li> <li><strong>指定格式</strong>: 把文本输入,设置为 只能包含三个字母的模式（数字或特殊字符）： <ul> <li>input-<code>pattern="[A-z]{3}"</code></li> </ul> </li> <li><strong>搭配属性</strong> <ul> <li>input-<code>pattern</code>和 input-<code>title</code>一起使用 ,设置指定格式 和要求格式的提示.</li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html5/demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 国家代码：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>country_code<span class="token punctuation">"</span></span> <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[A-z]{3}<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>三个字母的国家代码<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/3f91916bfc454b1ab611dfd137a3d6ac.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3f91916bfc454b1ab611dfd137a3d6ac.jpg" alt="【表单标签（知识点超全版本）】_第24张图片" width="340" height="119" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/d0da94d37fb14821834a73a1109b1a31.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d0da94d37fb14821834a73a1109b1a31.jpg" alt="【表单标签（知识点超全版本）】_第25张图片" width="311" height="112" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/b1fcd843ac224b1db337a93f8541ee4a.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/b1fcd843ac224b1db337a93f8541ee4a.png" alt="【表单标签（知识点超全版本）】_第26张图片" width="517" height="126" style="border:1px solid black;"></a><br> <img src="http://img.e-com-net.com/image/info8/15da5798376241f8be64952166c4bdaa.gif" alt="在这里插入图片描述" width="0" height="0"></p> <ul> <li>结果: <ul> <li>不符合要求,提交时,会出现提示,让重新填写,直到符合要求,才能提交成功</li> <li><strong>提示显示</strong>: <ul> <li>鼠标移动到输入框 位置上时,会显示<code>title</code>描述提示 信息</li> <li>跟着无效提醒信息 一起显示.</li> </ul> </li> </ul> </li> </ul> <hr> <h5>⒄ placeholder 属性: 占位符 ( 示例值 )</h5> <ul> <li> <p>⒄ <strong><code><input></code> 输入 标签的<code>placeholder</code> 提示占位符 属性</strong></p> <ul> <li>用于 <ul> <li>如何提供 输入字段 示例值的 提示信息（hint） ? <ul> <li>使用 input-<code>placeholder</code> 提示占位符 属性</li> </ul> </li> <li>占位符提示的显示 <ul> <li><strong>显示和消失</strong>: 提示 会在输入字段 <strong>为空时 显示</strong>，并会在字段 <strong>获得焦点时消失</strong>。</li> </ul> </li> </ul> </li> <li>注释：</li> <li><code>placeholder</code> 提示占位符 属性 适用于哪些标签 ? <ul> <li>以下的类型的 <code><input></code> 输入标签( 输入前, 需要 示例值的 标签)：</li> <li><code>text, search, url, telephone, email</code> 以及 <code>password</code>。</li> </ul> </li> <li><code>placeholder</code> 占位符 属性 的语法 <ul> <li><code><input placeholder="text"></code></li> </ul> </li> </ul> </li> <li> <p>带有 <code>placeholder</code>占位符 文本的搜索字段：</p> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html5/demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 搜索 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user_search<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Search W3School<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/18ceee173798495ba97f4169ac66f7f5.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/18ceee173798495ba97f4169ac66f7f5.gif" alt="【表单标签（知识点超全版本）】_第27张图片" width="446" height="136" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/b882ee00e28c4bb18e8c1ed68346b852.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/b882ee00e28c4bb18e8c1ed68346b852.gif" alt="【表单标签（知识点超全版本）】_第28张图片" width="446" height="136" style="border:1px solid black;"></a></p> <ul> <li><strong>提示占位符 消失的时机</strong> <ul> <li>测试: 360浏览器,谷歌浏览器,在获得焦点的时候,提示占位符,没有消失,<strong>输入字符</strong>后,提示占位符才消失</li> <li>IE 浏览器中,<strong>获得焦点</strong>,没有输入字符,提示占位符就消失了</li> </ul> </li> </ul> <hr> <h5>⒅ readonly 属性: 只读属性 ( 不能修改，限 type=“text”，type=“password” )</h5> <ul> <li>⒅ <strong><code><input></code> 输入标签的<code>readonly</code> 只读属性</strong> <ul> <li>用于 <ul> <li>如何规定 输入字段为 只读 ?</li> <li>使用 input-<code>readonly</code> 只读属性</li> </ul> </li> <li>input-<code>readonly</code> 只读 属性 的特性有哪些 ? <ul> <li><strong>只读</strong>:不能修改,能选中和拷贝</li> <li>只读字段 可以修改吗 ? <ul> <li><strong>不能修改</strong></li> </ul> </li> <li>可以使用 tab 键 切换到只读字段 吗 ? <ul> <li>可以</li> </ul> </li> <li>可以 <strong>选中或拷贝</strong> 只读字段的文本 吗? <ul> <li>可以</li> </ul> </li> <li><strong>禁用 和只读的区别</strong>: <ul> <li>只读控件 仍然可以工作，而禁用的控件 通常在启用之前 不能作为控件工作。</li> <li><strong>禁用: 值不会被提交</strong>: 一些浏览器中,禁用的元素 是不可选的(且其值 不能 被提交) (在除 firefox 以外的浏览器中，如 chrome，禁用的 textarea 内容 是 可选择和可复制的。)</li> <li><strong>只读: 可选中+可复制+值可被提交</strong>: 而<code>readonly</code>元素是 可选择的，其内容 可复制(且其值 可被提交);你就是 不能编辑内容。</li> </ul> </li> <li><strong>只读 和不能为空</strong>: 在指定<code>readonly</code>属性的 输入标签上 不允许使用<code>required</code>不为空 属性。(因为只读属性 不能输入值,所以不能要求 不为空)</li> <li><strong>只读 使用范围</strong>: 文本控件. 只有文本控件 可以设置为只读，因为对于 其他控件(如复选框和按钮)来说，只读和禁用之间 没有有用的区别，所以<code>readonly</code>属性不适用。</li> </ul> </li> <li>使用 <ul> <li>如何防止用户 对值 进行修改，直到满足某些条件为止（比如选中了一个复选框）。 <ul> <li>使用 input-<code>readonly</code> 只读 属性 ,使用 JavaScript 消除<code> readonly</code> 值，将输入字段切换到可编辑状态。</li> </ul> </li> <li><code>readonly</code>只读 属性可与哪些标签 搭配使用 ?</li> <li>单行文本和密码框 的输入 标签. <code><input type="text"></code> 或 <code><input type="password"></code> 配合使用。</li> </ul> </li> <li>input- <code>readonly</code>只读 属性的语法 <ul> <li><code><input readonly="readonly"></code></li> </ul> </li> <li>input- <code>readonly</code>只读 属性的属性值 <ul> <li>readonly</li> </ul> </li> </ul> </li> <li>把输入字段 设置为只读 <ul> <li><code>readonly="readonly"</code></li> </ul> </li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html/form_action.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Name:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Country:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>country<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>China<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/5c232a2160384c32829f4876c4ec305c.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/5c232a2160384c32829f4876c4ec305c.gif" alt="【表单标签（知识点超全版本）】_第29张图片" width="446" height="136" style="border:1px solid black;"></a></p> <ul> <li>使用 <code>value</code>当前值属性,设置文本的默认值</li> <li>设置<code>readonly</code>只读的文本,可以复制和选中,但不能修改.</li> </ul> <hr> <h5>⒆ required 属性: 不能为空</h5> <ul> <li>⒆ <strong><code><input></code> 输入标签的<code>required</code> 必需 属性</strong> <ul> <li>用于 <ul> <li>如何规定 输入字段 在提交之前 必须填写,不能为空 ? <ul> <li>使用 input-<code>required</code>必需 属性</li> <li>美[rɪˈkwaɪərd]</li> </ul> </li> <li>如何设置字段为 <strong>必填或必选</strong>的 ? <ul> <li>使用 <code>required</code>必需 属性</li> </ul> </li> </ul> </li> <li>注释： <ul> <li>input-<code>required</code> 必需属性 适用于以下哪些 类型的 <code><input></code>输入标签 ? <ul> <li><code>text, search, url, telephone, email, password, date pickers, number, checkbox, radio</code> 以及 <code>file</code>。(需要输入值 的标签)</li> </ul> </li> <li><strong>不能为空 使用范围</strong>: 所有输入类型 都支持<code>required</code>属性，但以下类型除外: <ul> <li>颜色,隐藏,范围,提交,图像提交按钮,重置, 按钮.( <code>color, hidden, range, submit, image, reset, button</code>),一般不需要输入值的类型.</li> <li><strong>不能为空 和伪类</strong>: <ul> <li>当输入标签 具有<code>required</code>属性时，<code>:required</code>伪类 也将应用于它。</li> <li>相反，没有<code>required</code>属性的输入将应用<code>:optional</code>伪类 , 美 /ˈɑːpʃənl/ 可选择的; (不支持它的元素除外)。</li> </ul> </li> </ul> </li> </ul> </li> <li><code>required</code> 必需 属性的语法 <ul> <li><code><input required="required"></code></li> </ul> </li> </ul> </li> <li>设置文本输入 为必填.</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>usr_name<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>required<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/cc41754d298d48c8837e73db1def33d7.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/cc41754d298d48c8837e73db1def33d7.gif" alt="【表单标签（知识点超全版本）】_第30张图片" width="446" height="136" style="border:1px solid black;"></a></p> <ul> <li><strong>不能为空</strong>: 设置为<code>required</code>必需的文本,不能为空,必须填写 <ul> <li>如果没有填写,值为空,无法提交成功.会有需要填写的提示</li> </ul> </li> </ul> <hr> <h5>⒇ size 属性: 可见宽度</h5> <ul> <li>⒇ <strong><code><input></code> 输入标签的<code>size</code>尺寸 属性</strong> <ul> <li>用于 <ul> <li>如何规定 输入字段的 宽度 ? <ul> <li>使用 input-<code>size</code>尺寸 属性</li> <li>以字符 为单位</li> </ul> </li> </ul> </li> <li>使用 <ul> <li>▼ input-<code>size</code>尺寸属性=<strong>可见字符</strong>数+输入<strong>框的宽度</strong>(像素为单位) <ul> <li>① 如何指定 单行文本和密码框 <strong>可见的字符数</strong> ? <ul> <li>对于 <code><input type=" text"></code> 和 <code><input type=" password"></code>，使用 <code>size</code>尺寸 属性</li> </ul> </li> <li>② 对于其他类型的输入，<code>size</code> 属性定义的是什么 ? <ul> <li>以 像素为单位的 <strong>输入字段的宽度</strong>。</li> </ul> </li> </ul> </li> </ul> </li> <li><code>size</code> 尺寸 属性语法 <ul> <li><code><input size="number"></code></li> </ul> </li> <li><code>size</code>尺寸 属性的属性值 <ul> <li>单位: 以字符 或者像素 为单位. <code>characters/pixels</code></li> <li><code>input</code>输入 元素的宽度。</li> </ul> </li> <li><strong>兼容性提示</strong> <ul> <li>由于 <code>size</code> 属性是一个 可视化的设计属性，推荐使用 CSS 来代替它。</li> <li>所以,尽量不要使用 <code>size</code> 属性,等同于 css 的 <code>width</code> 宽度属性</li> <li>CSS 语法：<code><input style="width:100px" /></code></li> </ul> </li> </ul> </li> <li><strong>可见宽度</strong>: 设置文本和密码 输入标签的可见字符数,显示的宽度会随<code>size</code>尺寸改变</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html/form_action.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>邮箱: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>密码: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>psw<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <ul> <li>把邮箱输入框的 可见宽度 变长.<br> <a href="http://img.e-com-net.com/image/info8/dc3aae8d596e45f7a859a277c92c8636.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/dc3aae8d596e45f7a859a277c92c8636.gif" alt="【表单标签（知识点超全版本）】_第31张图片" width="443" height="129" style="border:1px solid black;"></a></li> <li><strong>可见宽度 和字符左移</strong>: 设置了<code>size</code>尺寸属性,文本和密码的可见字符数,是固定的,输入更多的时候,前面的字符会左移,以便显示后面的字符 <ul> <li><code>size</code>尺寸属性改变,文本和密码框的 可见宽度,也会改变.</li> </ul> </li> </ul> <hr> <h4>1.4.3 type 属性: 输入的类型</h4> <ul> <li>因为<code>type</code>属性 涉及的知识点和细节 比较多,另写了一个博客,详情请见 【input 标签的 type 属性详解】</li> </ul> <hr> <h3>1.5 ★ textarea 定义 多行文本输入</h3> <ul> <li>⑴ <strong>用于</strong> <ul> <li><strong>多行 文本</strong>: 如果用户想输入多行文本时，比如评论，如何实现？ <ul> <li>使用 <code> <textarea></code> 多行文本域 标签</li> <li>元素表示一个 多行纯文本 编辑控件，在希望允许用户 输入大量 自由格式文本时非常有用 (例如, 用户的评论)。</li> </ul> </li> </ul> </li> <li>⑵ <strong>不限数量 文本</strong>: 多行文本区标签 默认可容纳多少数量的文本？ <ul> <li>默认 不限数量 。</li> <li>如果想限制多行文本的数量，怎么办？ <ul> <li>搭配 <code>maxlength</code> 属性，可以自定义 允许输入的最大字符数 长度（单位是字符数，所以，它的属性值必须是 <strong>非负整数</strong>）。</li> </ul> </li> </ul> </li> <li>⑶ <strong>默认字体</strong>: <code>textarea</code>多行文本域 标签 的文本的 默认字体是什么 ? <ul> <li><strong>等宽</strong> 字体,。通常是 Courier['kʊrɪɚ] 字体,不同浏览器中 默认字体可能会不同，但基本上都是等宽的。如谷歌中，默认是<code>monospace</code>字体，默认显示如下↓（默认的宽高和字体） <ul> <li><a href="http://img.e-com-net.com/image/info8/0d28fff6cd2044b7bab6a625035ca979.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0d28fff6cd2044b7bab6a625035ca979.jpg" alt="在这里插入图片描述" width="276" height="50"></a></li> </ul> </li> </ul> </li> </ul> <hr> <ul> <li>⑷ <strong>多行文本 宽高</strong>: <ul> <li>如果想 更改多行文本域的宽高，如何设置？ <ul> <li>① 行数和列数 属性: 在<code> <textarea></code> 标签中，可以通过 <code>cols</code> 和 <code>rows</code> 属性来规定 文本域 的 尺寸。</li> <li>② ▲ <strong>优先CSS 宽高 属性</strong>: 建议使用 CSS 的 <code>height</code> 高度和 <code>width</code> 宽度属性。</li> <li>指定确切大小的好处是什么？ <ul> <li>设置这些是 <strong>保持一致性</strong> 的好办法，因为 各个浏览器的默认值 可能不同。</li> </ul> </li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请输入您的评论：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comment<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> </code></pre> <ul> <li> <p>显示结果</p> <ul> <li><a href="http://img.e-com-net.com/image/info8/66878d94cb5b40498292dac5a339a835.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/66878d94cb5b40498292dac5a339a835.jpg" alt="【表单标签（知识点超全版本）】_第32张图片" width="350" height="163" style="border:1px solid black;"></a></li> </ul> </li> <li> <p>⑸ <strong>如何设置多行文本的 默认值？</strong>:</p> <ul> <li><strong>标签内容=默认值</strong>: 如果想设置 多行文本<code><textarea></code>的默认内容，可以在 开始和结束标记之间 输入它。</li> <li><strong>注意</strong>: <code><textarea></code>不支持<code>value</code>属性。 <ul> <li><a href="http://img.e-com-net.com/image/info8/6a3113c56325459a880efaadea75565c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6a3113c56325459a880efaadea75565c.jpg" alt="在这里插入图片描述" width="650" height="87"></a></li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请输入您的评论：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comment<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>我是评论区默认的内容...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> </code></pre> <ul> <li>显示结果 <ul> <li><a href="http://img.e-com-net.com/image/info8/41325b37d03d4efcb9e4c1642544823e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/41325b37d03d4efcb9e4c1642544823e.jpg" alt="【表单标签（知识点超全版本）】_第33张图片" width="342" height="161" style="border:1px solid black;"></a></li> </ul> </li> </ul> <hr> <ul> <li> <p>⑹ <strong>多行文本 基线的 不一致</strong></p> <ul> <li>多行文本的 基线 在各个浏览器中 是一致的吗？</li> <li>不一致。</li> <li>原因： <strong>规范未定义</strong>， HTML规范 没有定义<code><textarea></code>的基线位置，因此不同的浏览器 将其设置为 不同的位置。 <ul> <li>对于Gecko， <code><textarea></code>基线是在<code>textarea</code>第一行的基线上 设置的，在另一个浏览器上，它可能是在<code><textarea></code>框的底部 设置的。</li> <li>所以，<strong>多行文本 不要使用 基线垂直对齐</strong>: <code>vertical-align: baseline </code>, 这种行为 是不可预测的。</li> </ul> </li> </ul> </li> <li> <p>⑺ <strong>换行模式</strong>：如何规定 多行文本的 换行模式？</p> <ul> <li>换行属性: 可以通过 <code><textarea></code> 标签的 <code>wrap</code>换行 属性设置 文本输入区内 的 换行模式。</li> </ul> </li> </ul> <hr> <ul> <li>⑻ <strong>(多行文本) 默认 可调整大小</strong>: <ul> <li>在大多数浏览器中，多行文本域 <code><textarea></code>默认是 可调整大小的吗？</li> <li>是的。</li> <li><strong>调整大小手柄</strong>: 在右下角的拖动手柄，它可以用来改变页面上元素的大小。 <ul> <li><a href="http://img.e-com-net.com/image/info8/1c81a81c0ae541409c822d6938e6533c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1c81a81c0ae541409c822d6938e6533c.jpg" alt="【表单标签（知识点超全版本）】_第34张图片" width="182" height="178" style="border:1px solid black;"></a></li> </ul> </li> <li><strong>调整大小属性</strong>: <ul> <li>为什么默认 可调整大小？ <ul> <li>这是由 CSS 属性 <code>resize</code> 控制的——默认情况下 大小调整 是启用的。</li> </ul> </li> <li>如何设置为 <strong>不可调整大小</strong>:？ <ul> <li>可以使用<code> resize: none;</code>显式地禁用它。禁用后，右下角的拖动手柄就会消失。 <ul> <li><a href="http://img.e-com-net.com/image/info8/e378b47963d645e0843c434138bda1f5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e378b47963d645e0843c434138bda1f5.jpg" alt="【表单标签（知识点超全版本）】_第35张图片" width="239" height="163" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> <hr> <ul> <li> <p><strong>行间 分隔</strong>: 在<code><textarea></code>多行文本 输入区内的 文本行间 分隔</p> <ul> <li><strong>回车换行 (十六进制)</strong>: 用<code> "%OD%OA"</code> （回车/换行）进行 分隔。</li> </ul> </li> <li> <p><strong>知识补充</strong></p> <ul> <li>▼<strong>十六进制</strong> 和<strong>回车/换行</strong></li> <li>十六进制 是什么 ? <ul> <li>在数学中, 是一种逢16进1的<strong>进位制</strong>.</li> </ul> </li> <li>十六进制 怎么表示 ? <ul> <li><strong>数字和字母</strong>: 一般用数字 0到9 和字母 A到F（或a -f）表示</li> <li>A-F(a-f)表示: 10~15，这些称作十六进制数字</li> </ul> </li> <li>回车和换行 <ul> <li>① 回车是什么意思 ? <ul> <li><strong>本行 开始处</strong>: 光标移动到 同一行的开始处</li> <li><code>“0D”</code>是把光标移到 <strong>同一行的顶头</strong>——回车(CR)。</li> <li>回车: Carriage returns</li> </ul> </li> <li>② 换行是什么意思 ? <ul> <li><strong>下一行</strong>: 光标移动到 下一行</li> <li><code>“0A”</code>是把光标移到 <strong>下一行</strong>——换行(LF)。</li> <li>换行: line-feeds</li> </ul> </li> <li>③ 怎样使 光标移动到 下一行的开始处 ? <ul> <li>回车和换行一起使用.</li> <li>16 进制代码中“<code>0A</code>”是换行，如果只有“<code>0D</code>”回车，光标只会回到 这一行的开始处，只有“<code>0A</code>“、”<code>0D</code>”<strong>一起用</strong>，才能使光标到 <strong>下一行的开始处</strong>。</li> </ul> </li> </ul> </li> </ul> </li> </ul> <hr> <ul> <li><strong>示例1</strong>: 如何设置 多行文本的最大长度 ？如何设置不能为空？当值无效 和有效时 ，如何设置不同的边框样式？ <ul> <li>搭配 最大字符数长度 <code>maxlength</code> 属性，不能为空 <code>require</code>属性。</li> <li>验证值的有效和无效：<strong>搭配 css 伪类</strong>，有效值伪类 <code>:valid,</code>,无效值伪类<code> : invalid</code></li> </ul> </li> <li>html</li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>story<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>请写下您创作的故事:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>story<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>story<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>15<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>required<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>我是默认值,请输入您的故事...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交表单<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> </code></pre> <ul> <li>css</li> </ul> <pre><code class="prism language-css"> <span class="token selector">textarea:valid</span> <span class="token punctuation">{</span> <span class="token comment">/*设置值有效时 边框的样式 */</span> <span class="token property">border</span><span class="token punctuation">:</span> 2px solid green<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">textarea:invalid</span> <span class="token punctuation">{</span> <span class="token comment">/*设置值无效效时 边框的样式 */</span> <span class="token property">border</span><span class="token punctuation">:</span> 2px dashed red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <ul> <li>值有效时 <ul> <li><a href="http://img.e-com-net.com/image/info8/5581ff9d52c34a11b3ef47dfbbdda97d.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/5581ff9d52c34a11b3ef47dfbbdda97d.png" alt="【表单标签（知识点超全版本）】_第36张图片" width="249" height="221" style="border:1px solid black;"></a></li> </ul> </li> <li>值无效时 <ul> <li><a href="http://img.e-com-net.com/image/info8/58e205d141ba420cb7682096a9d01531.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/58e205d141ba420cb7682096a9d01531.png" alt="【表单标签（知识点超全版本）】_第37张图片" width="253" height="220" style="border:1px solid black;"></a></li> </ul> </li> <li>部分浏览器,当达到最大长度限制时,不再允许输入 字符,所以不会超出数目。</li> </ul> <hr> <h4>1.5.1 textarea 多行文本域 标签 的属性 有哪些 ?</h4> <ul> <li>多行文本标签 <code>textarea</code> 包含 全局属性（Global attributes ）。 <ul> <li>什么是全局属性？ <ul> <li>全局属性是所有 HTML 元素的 <strong>公共属性</strong>;它们可以 <strong>用于所有元素</strong>，尽管它们可能对某些元素 并没有起什么影响。</li> </ul> </li> </ul> </li> <li><strong><code><textarea></code> 多行文本域 标签的常用属性</strong> 有哪些 ?</li> </ul> <table> <thead> <tr> <th align="left">属性</th> <th align="left">属性值</th> <th align="left">用于</th> </tr> </thead> <tbody> <tr> <td align="left">① rows</td> <td align="left">= number，正整数。</td> <td align="left">规定文本区内的 <strong>可见行数</strong>。</td> </tr> <tr> <td align="left">② cols</td> <td align="left">= number，正整数。</td> <td align="left">规定文本区内的 <strong>可见列数</strong>。</td> </tr> <tr> <td align="left">③ disabled</td> <td align="left">=disabled</td> <td align="left">规定 <strong>禁用</strong> 该文本区。禁用后，呈灰色，没有插入光标，不可输入。<a href="http://img.e-com-net.com/image/info8/f862eb3f62b64cac89baed72a394d4ab.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f862eb3f62b64cac89baed72a394d4ab.jpg" alt="【表单标签（知识点超全版本）】_第38张图片" width="214" height="164" style="border:1px solid black;"></a></td> </tr> <tr> <td align="left">④ name</td> <td align="left">= string，一个字符串。</td> <td align="left">规定文本区的 <strong>名称</strong>。<code>name</code> 属性，用于设置提交表单时，提交给服务器的 关联数据的名称。</td> </tr> <tr> <td align="left">⑤ id</td> <td align="left">= string，一个字符串。</td> <td align="left">一个 <code>id</code> 属性，允许<code><textarea></code>与<code><label></code>元素相关联，以实现可访问性。</td> </tr> <tr> <td align="left">⑥ readonly</td> <td align="left">= readonly</td> <td align="left">规定文本区为 <strong>只读</strong>。此布尔属性指示 用户 <strong>不能修改</strong> 控件的值（只读能选中，但没有插入光标，不能输入，在一些浏览器中，禁用的元素内容，也能选中，比如 谷歌）。与禁用属性不同，只读属性 不会阻止用户 ❶ 单击或选择控件。只读控件的 ❷ 值 仍然与表单一起提交。<a href="http://img.e-com-net.com/image/info8/a606198c971546cc9af77328425de5b0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a606198c971546cc9af77328425de5b0.jpg" alt="【表单标签（知识点超全版本）】_第39张图片" width="217" height="164" style="border:1px solid black;"></a><a href="http://img.e-com-net.com/image/info8/d85bbb2335f84561b57bff5c85b6abea.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d85bbb2335f84561b57bff5c85b6abea.jpg" alt="【表单标签（知识点超全版本）】_第40张图片" width="212" height="155" style="border:1px solid black;"></a></td> </tr> </tbody> </table> <hr> <h5>⑴ rows 属性: (多行文本) 可见行数（正整数）</h5> <ul> <li>⑴ <strong><code><textarea></code> 多行文本域 标签<code>rows</code> 属性</strong> <ul> <li>用于 <ul> <li>如何规定 多行文本 <code>textarea</code> 的 可见行数 ? <ul> <li><code>rows</code> 行数属性</li> <li>控件的 可见文本行数。</li> </ul> </li> </ul> </li> <li>语法 <ul> <li><code><textarea rows="number"></code></li> </ul> </li> <li>属性值 <ul> <li>number</li> <li>数字.规定文本区的高度(以行数计)。</li> </ul> </li> </ul> </li> </ul> <hr> <h5>⑵ cols 属性: (多行文本) 可见列数（正整数）</h5> <ul> <li>⑵ <strong><code><textarea></code> 多行文本域 标签<code>cols</code> 属性</strong> <ul> <li>用于 <ul> <li>如何规定 多行文本<code>textarea</code> 的可见列数 ? <ul> <li>使用<code>cols</code> 列数属性</li> <li>文本控件的 可见宽度，以 <strong>平均 字符宽度</strong> 表示。</li> <li><strong>正整数</strong>: 如果指定它，它必须是一个 正整数。</li> <li><strong>默认值</strong>: 如果未指定，列数的默认值为多少？ <ul> <li><code>20</code>。</li> </ul> </li> </ul> </li> </ul> </li> <li>语法 <ul> <li><code>textarea cols="number"></code></li> </ul> </li> <li>属性值 <ul> <li>number</li> <li>规定 <strong>文本区的宽度</strong>（以 <strong>平均 字符数</strong> 计）。</li> </ul> </li> </ul> </li> <li>一个 10个 字符宽, 3 行高的文本区： <ul> <li>高3个字符,占据3行</li> <li>宽10个字符,占据10列</li> </ul> </li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>我是textarea 标签的内容.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/c881d7f580004531876063404ebccdb5.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/c881d7f580004531876063404ebccdb5.png" alt="在这里插入图片描述" width="142" height="61"></a><br> <a href="http://img.e-com-net.com/image/info8/7d90c76373ee4ef6910ab416d1388d0e.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/7d90c76373ee4ef6910ab416d1388d0e.png" alt="在这里插入图片描述" width="140" height="73"></a><br> <a href="http://img.e-com-net.com/image/info8/9f25cc59bab84a939b1b647a6e0c97d4.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/9f25cc59bab84a939b1b647a6e0c97d4.png" alt="在这里插入图片描述" width="111" height="63"></a><br> <a href="http://img.e-com-net.com/image/info8/38238f22d3cf49f682da5eed4fc2eafd.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/38238f22d3cf49f682da5eed4fc2eafd.png" alt="【表单标签（知识点超全版本）】_第41张图片" width="151" height="106" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/e2a1ca1123e74d1183caa7e3eea0a898.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/e2a1ca1123e74d1183caa7e3eea0a898.gif" alt="在这里插入图片描述" width="265" height="72"></a></p> <ul> <li>可见的只有三行</li> <li>10 个字符宽,没有滚动条的时候,一行六个汉字,有滚动条时, 一行5个汉字</li> </ul> <hr> <h4>1.5.2 textarea 多行文本域 标签 的 html5 新属性</h4> <ul> <li><strong><code><textarea></code> 标签的 html5中的新属性</strong> 有哪些 ?</li> </ul> <table> <thead> <tr> <th align="left">属性</th> <th align="left">属性值</th> <th align="left">用于</th> </tr> </thead> <tbody> <tr> <td align="left">① wrap</td> <td align="left">= hard,soft（默认）。❶ 默认值<code>soft</code>，浏览器不插入 额外换行符。❷ <code>hard</code> ：浏览器 <strong>自动插入换行符</strong>(<code>CR+LF</code>),即回车换行，遇到<code>cols</code>设置的边界就换。所以，<code>hard</code>属性值，必须搭配 <code>cols</code>属性。❸ 共同点1：在控件的界面中，浏览器 都会自动换行。共同点2：用户按下 enter 的地方，在提交值中，都会保留换行。❹ 区别：在提交到服务器的文本中，<code>hard</code>会保留自动换行，转化为 <code>%0D%0A</code>，<code>soft</code> 不会保留 浏览器自动的换行符。</td> <td align="left">提交表单时，在提交值中， 文本是否保留 浏览器的自动换行。</td> </tr> <tr> <td align="left">② autofocus</td> <td align="left">=autofocus</td> <td align="left">规定在 页面加载后文本区域 自动<strong>获得焦点</strong>。</td> </tr> <tr> <td align="left">③ form</td> <td align="left">= form_id</td> <td align="left">规定文本区域 <strong>所属</strong> 的一个或多个 <strong>表单</strong>。让标签可以写在 <code>form</code> 标签之外的位置。</td> </tr> <tr> <td align="left">④ maxlength，minlength</td> <td align="left">=number，非负整数，即 正整数。因为字符的数目，不可能是负值或浮点数。</td> <td align="left">规定文本区域的 <strong>最大和最小字符数</strong>。如果 未指定此值，则用户可以输入 无限个字符。</td> </tr> <tr> <td align="left">⑤ placeholder</td> <td align="left">=text</td> <td align="left">规定描述文本区域 预期值 的简短 <strong>占位符提示</strong>。</td> </tr> <tr> <td align="left">⑥ required</td> <td align="left">=required</td> <td align="left">规定文本区域 是<strong>必填的</strong>。</td> </tr> </tbody> </table> <hr> <h5>⑴ wrap 属性: 提交值中，文本是否保 留自动换行符</h5> <ul> <li>⑴ <strong><code><textarea></code> 多行文本域 标签<code>wrap</code> 属性</strong> <ul> <li>用于 <ul> <li>如何设置控件中的提交值中的 文本的换行方式 ?</li> <li>使用 <code>wrap</code> （ 美 /ræp/），换行 属性</li> </ul> </li> <li>哪些浏览器支持 <code>wrap</code>换行 属性 ? <ul> <li>所有主流浏览器 都支持 <code>wrap</code> 属性。</li> </ul> </li> <li>语法 <ul> <li><code><textarea wrap="soft|hard"></code></li> </ul> </li> <li>属性值 <ul> <li>① <strong>不自动 换行</strong>: <code>soft</code> <ul> <li>当提交数据时，<code>textarea</code> 中的文本 <strong>不保留 自动换行符</strong>。默认值。</li> <li><strong><code>CR+LF</code> 换行回车对</strong>: 浏览器 确保值中的 所有换行符都由一个<code>CR+LF</code>对 组成，但 不插入 任何额外的换行符。</li> <li>自动换行 失效,没有额外换行符.</li> </ul> </li> <li>② <strong>自动 换行：遇到<code>cols</code>设置的边界换</strong>: <code>hard</code> <ul> <li><strong>自动换行</strong>: 如何实现自动换行？ <ul> <li>浏览器 <strong>自动插入换行符</strong>(<code>CR+LF</code>),即回车换行，使每一行的宽度 不超过控件的宽度; <ul> <li>❶ 回车 <code>CR</code>：Carriage Return，对应 ASCII 中转义字符 <code>\r</code>，表示回车 ，定位 在左边界。</li> <li>❷ 换行 <code>LF</code>：Linefeed， 美 /ˈlaɪnfiːd/，对应 ASCII 中转义字符 <code>\n</code>，表示换行，向下移一行。</li> <li>❸ 回车换行：<code>CRLF</code>：Carriage Return & Linefeed，<code>\r\n</code>，表示回车并换行，即 下一行的左边界。</li> </ul> </li> </ul> </li> <li><strong>包含在 数据中</strong>: 当在表单中提交时，<code>textarea</code> 中的文本 <strong>换行（包含换行符）</strong>。</li> <li><strong>必须 搭配 列数属性 <code>cols</code></strong>: 当使用 “<code>hard</code>” 时，<strong>必须规定</strong> <code>cols</code> 属性,才能生效. ( 指定了清晰 具体的可见列数,所有浏览器 才知道该在哪里自动换行.)</li> <li>自动换行有效,自动换行位置 插入换行符.</li> </ul> </li> <li><strong>默认值</strong>: 如果 未指定此属性，则使用 <strong>不自动换行<code>soft</code></strong> 作为其 默认值。</li> </ul> </li> <li>当提交表单时，<code>wrap="hard" </code>的文本区域中的<strong>文本会 包含换行符</strong>（如果有换行符）：</li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/demo/demo_form.asp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>usrtxt<span class="token punctuation">"</span></span> <span class="token attr-name">wrap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hard<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> At W3School you will find free Web-building tutorials. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <ul> <li> <p>把上面的代码，输入 W3School TIY Editor 这个在线编辑器中，可以连接 W3School 的服务器，自己测试结果。<br> <a href="http://img.e-com-net.com/image/info8/cc45a8b36b5d40b59a8d7696bd29ecfc.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/cc45a8b36b5d40b59a8d7696bd29ecfc.png" alt="在这里插入图片描述" width="236" height="76"></a><br> <a href="http://img.e-com-net.com/image/info8/8e1a0040be3548938dff073212e5e78e.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/8e1a0040be3548938dff073212e5e78e.png" alt="在这里插入图片描述" width="223" height="55"></a></p> </li> <li> <p><strong>属性值 <code>hard</code> 和 <code>soft</code> 的区别有哪些？</strong></p> <ul> <li>共同点1：在控件的界面中，浏览器 都会自动换行。</li> <li>共同点2：用户按下 enter 的地方，在提交值中，都会保留换行。</li> <li>区别：在提交到服务器的文本中，<code>hard</code>会保留自动换行，转化为 <code>%0D%0A</code>，<code>soft</code> 不会保留 浏览器自动的换行符。 <ul> <li>回车换行:<code>%0D%0A</code></li> </ul> </li> <li><strong><code>wrap="hard"</code>的自动换行</strong>: <ul> <li>提交数据时, 自动换行符号 也会被提交.</li> <li>如图， find ,building 前面都有一个 回车换行,结尾处 的后面有一个回车换行 <ul> <li><a href="http://img.e-com-net.com/image/info8/040b7f2c4c4543ebbcfad3f1c99af2eb.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/040b7f2c4c4543ebbcfad3f1c99af2eb.png" alt="【表单标签（知识点超全版本）】_第42张图片" width="650" height="145" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> <li>如果 textarea-<code>wrap="soft"</code> <ul> <li>find 和 building 前的自动换行,在提交值时，不会保留。<br> <a href="http://img.e-com-net.com/image/info8/b1d1f1f25d8c4f38b10ed60e5b7325c1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b1d1f1f25d8c4f38b10ed60e5b7325c1.jpg" alt="在这里插入图片描述" width="650" height="62"></a></li> </ul> </li> </ul> </li> </ul> <hr> <h3>1.6 ★ button 定义一个 按钮 （type 属性必需，value 属性值=标签内容）</h3> <ul> <li>⑴ <strong>用于</strong> <ul> <li><strong>可单击按钮</strong>: 如何定义一个 可单击的按钮 ? <ul> <li>使用 <code><button></code>按钮 标签</li> <li>HTML元素是一个 <strong>交互式元素</strong>。 <ul> <li>什么是 交互式元素？可由用户 （鼠标、键盘、手指、语音命令或其他辅助技术）<strong>激活</strong>。一旦激活，它就会 <strong>执行一个 可编程的操作</strong>，比如提交一个表单或打开一个对话框。</li> <li>总结：<strong>激活后，可执行某个操作。</strong></li> </ul> </li> <li><strong>使用范围</strong>: <ul> <li><strong>文档 或者表单中</strong> 需要 按钮的地方. 元素表示 可单击按钮，可在 需要简单、标准按钮功能的 表单或文档中的任何地方 使用该按钮。</li> </ul> </li> <li><strong>按钮 默认外观是怎样的？</strong>: <ul> <li>默认情况下，HTML 按钮 通常以类似于 （运行用户代理的） <strong>平台的样式</strong> 显示。</li> </ul> </li> <li>按钮的外观 可以更改吗？ <ul> <li>可以。可 使用 CSS 更改按钮的外观。</li> </ul> </li> </ul> </li> </ul> </li> <li><strong>示例</strong></li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>我是按钮的标签内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <ul> <li>按钮标签 <code>button</code> 有无标签内容的样子 是怎样的？ <ul> <li>后面的是默认 无标签内容的样子。</li> <li><a href="http://img.e-com-net.com/image/info8/1b0582e6ada74d46b35941133bccd33c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1b0582e6ada74d46b35941133bccd33c.jpg" alt="在这里插入图片描述" width="169" height="54"></a></li> </ul> </li> </ul> <hr> <ul> <li>⑵ <strong>标签内容</strong>: 按钮标签 <code>button</code> 的标签内容,可以是什么 ? <ul> <li>文本或图像等。</li> </ul> </li> <li>⑶ <strong>不允许的 标签内容</strong>: 按钮 标签 <code><button></code> 的内容，不能是什么 ? <ul> <li>图像映射等 <strong>不能是可交互的内容</strong>。</li> <li>为什么 不能是图像映射等 可交互的内容？ <ul> <li>因为有干扰，同时有两个交互的操作，会回应的是哪个呢。</li> <li><strong>干扰行为</strong>: 比如 图像映射和按钮，都需要对单击做出回应时，就会产生错乱。</li> </ul> </li> </ul> </li> </ul> <hr> <ul> <li>⑷ <strong>两种按钮的 区别</strong>: <code><button></code> 按钮标签 与 <code><input type="button"></code> 输入按钮标签 相比 有什么区别？ <ul> <li>关键词：标签内容和样式。</li> <li>① <strong>能否放置 标签内容</strong>: 使用 <code> input</code> 元素创建的按钮 input-<code>type="button"</code> 不可以放置内容,因为 <code><input></code>输入标签 是空标签. <ul> <li>按钮标签 <code>button</code> 可以添加 文本 和 HTML 标签(例如 <code><em></code>,<code> <strong></code>, <code><img></code>)。</li> </ul> </li> <li>② <strong>更容易 设置样式</strong>: <code><button></code>元素比<code><input></code>元素 更容易设置样式。 <ul> <li><strong>伪类</strong>: 使用<code>::after</code>和<code>::before</code> 伪元素 来实现复杂的呈现，而<code><input</code>>只接受文本<code>value</code>属性。</li> </ul> </li> </ul> </li> </ul> <hr> <ul> <li>⑸ <strong>搭配属性</strong> : 类型 <code>type</code> 属性 <ul> <li>△<strong>注意</strong>: 为什么 必须为 按钮 指定 <code>type </code>类型 属性？ <ul> <li>因为 不同浏览器 默认按钮类型 不同,会造成按钮的不同,使浏览器兼容出现问题。</li> </ul> </li> <li>按钮有哪些<strong>默认类型</strong>？ <ul> <li>IE 的默认类型<code>type</code>是 <code>" button"</code>，而其他浏览器中（包括 W3C 规范）的默认值是 提交" <code>submit"</code>。</li> </ul> </li> </ul> </li> <li>⑹ HTML 4.01 与 HTML 5 之间的差异 <ul> <li><strong>新属性</strong>: HTML 5 中 对按钮加了很多的新属性： <ul> <li><code>autofocus, form, formaction, formenctype, formmethod, formnovalidate</code> 以及 <code>formtarget</code>。</li> </ul> </li> </ul> </li> </ul> <hr> <ul> <li>⑺ <strong>被提交值 的区别</strong>: 如果在 HTML 表单中使用 <code><button></code> 按钮元素，不同的浏览器会 提交相同的按钮值吗 ? <ul> <li>提供 不同位置的 值。 <ul> <li><strong>表单中 优先使用谁</strong>: 在 HTML 表单中创建按钮,建议用什么创建按钮 ? <ul> <li>使用 <code><input></code> 输入元素。为什么？ <ul> <li><strong>被提交值的差异</strong>：因为不同浏览器提交的，可能是不同位置的值，可能是 ❶ 标签内容，也可能是 <code>value</code> 属性的 ❷ 属性值。这就造成 提交值的差异。</li> </ul> </li> </ul> </li> <li><strong>被提交值 的区别</strong>：不同浏览器中 有什么区别？ <ul> <li>IE 将提交 <ul> <li><code><button></code> 按钮 标签的文本。</li> </ul> </li> <li>其他浏览器 将提交 <ul> <li>按钮 <code>value</code> 值 属性的内容。</li> </ul> </li> </ul> </li> <li>▲ <strong>总结</strong>: <ul> <li>所以,建议 在 HTML 表单中使用<code><input> </code>元素来 创建按钮。</li> <li>或者,让提交值相同： button-<code>value</code> 属性的内容 = <code><button></code> 标签的文本。</li> </ul> </li> </ul> </li> <li>关键词：提交值，标签内容，属性值。</li> </ul> </li> </ul> <hr> <ul> <li>⑻<strong>按钮<code><button></code>的 浏览器兼容性问题</strong> 有哪些？ <ul> <li>① <strong>类型</strong>: 必须为 按钮 指定 <code>type </code>类型 属性。(不同浏览器 默认按钮类型 不同)</li> <li>② <strong>值属性 和标签内容</strong>: button-<code>value</code> 属性值 = <code><button></code> 标签内容. (不同的浏览器会 提交不同位置的值)</li> </ul> </li> </ul> <hr> <h4>1.6.1 button 按钮标签的 属性</h4> <table> <thead> <tr> <th align="left">属性名</th> <th align="left">属性值</th> <th align="left">用于</th> </tr> </thead> <tbody> <tr> <td align="left">① autofocus</td> <td align="left">=autofocus</td> <td align="left">html5. 规定当 页面加载时 按钮应当 <strong>自动获得 输入焦点</strong>。(文档中只有一个元素 可以具有此属性，如，一次只能在一个地方输入。)</td> </tr> <tr> <td align="left">② disabled</td> <td align="left">=disabled</td> <td align="left">规定应该 <strong>禁用</strong> 该按钮。</td> </tr> <tr> <td align="left">③ form</td> <td align="left">=form_name</td> <td align="left">规定<strong>按钮属于</strong>一个或多个<strong>表单</strong>。</td> </tr> <tr> <td align="left">④ formaction</td> <td align="left">=url</td> <td align="left"><strong>覆盖</strong> form 元素的 action 属性。注释：该属性与<code>type="submit"</code>提交按钮 配合使用。</td> </tr> <tr> <td align="left">⑤ formenctype</td> <td align="left">=<code>application/x-www-form-urlencoded,multipart/form-data,text/plain</code></td> <td align="left"><strong>覆盖</strong> form 元素的 enctype 属性。注释：该属性与<code>type="submit"</code>提交按钮 配合使用。</td> </tr> <tr> <td align="left">⑥ formmethod</td> <td align="left">=get, post</td> <td align="left"><strong>提交方法</strong>. <strong>覆盖</strong> form 元素的 method 属性。注释：该属性与 <code>type="submit" </code> 提交按钮 配合使用。指定 浏览器用于 提交表单的 HTTP方法.</td> </tr> <tr> <td align="left">⑦ formnovalidate</td> <td align="left">=formnovalidate</td> <td align="left"><strong>覆盖</strong> form 元素的 novalidate 属性。注释：该属性与 <code>type="submit" </code>提交按钮 配合使用。</td> </tr> <tr> <td align="left">⑧ formtarget</td> <td align="left">=_blank,_self,_parent,_top,framename</td> <td align="left"><strong>覆盖</strong> form 元素的 target 属性。注释：该属性与 <code>type="submit" </code> 提交按钮 配合使用。</td> </tr> <tr> <td align="left">⑨ name</td> <td align="left">= button_name</td> <td align="left">规定按钮的 <strong>名称</strong>。</td> </tr> <tr> <td align="left">⑩ type</td> <td align="left">=button,reset,submit</td> <td align="left">规定按钮的 <strong>类型</strong>。</td> </tr> <tr> <td align="left">⑪ value</td> <td align="left">=text</td> <td align="left">规定按钮的 <strong>初始值</strong>。可由脚本进行修改。当按钮与表单数据一起提交时，定义与按钮名称 相关联的值。当使用此按钮 提交表单时，该值以参数的形式 传递给服务器。</td> </tr> </tbody> </table> <h5>⑴ autofocus : 自动获得焦点</h5> <ul> <li>⑴ <strong><code><button></code>按钮标签的<code>autofocus</code>自动获得焦点 属性</strong> <ul> <li>如何让按钮 在页面加载时 有输入焦点？ <ul> <li>使用 自动获得焦点 <code>autofocus</code> 属性。</li> </ul> </li> <li>自动获得焦点的按钮的样式 是怎样的？ <ul> <li>一般会加一个边框，不同浏览器加的边框 颜色可能会有不同。</li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">autofocus</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>autofocus<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>点击这里<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <ul> <li> <p><a href="http://img.e-com-net.com/image/info8/1e2b284fdb2c4f68b6ff6d38918c395a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1e2b284fdb2c4f68b6ff6d38918c395a.jpg" alt="在这里插入图片描述" width="116" height="50"></a></p> </li> <li> <p>谷歌和360浏览器中：</p> <ul> <li><a href="http://img.e-com-net.com/image/info8/c5757cad314d42779b068857988a5551.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c5757cad314d42779b068857988a5551.jpg" alt="在这里插入图片描述" width="143" height="57"></a></li> </ul> </li> <li> <p><strong>按钮文本</strong>: 按钮上显示的文本 怎么设置 ?</p> <ul> <li>= <code><button></code>按钮的 标签内容。</li> </ul> </li> </ul> <hr> <h5>⑵ disabled: 禁用</h5> <ul> <li> <p>⑵ <strong><code><button></code>按钮标签的<code>disabled</code>禁用 属性</strong></p> <ul> <li>如何 阻止用户与按钮交互:让它不能 被按下或聚焦？ <ul> <li>使用 布尔属性，禁用属性 <code>disabled</code> 属性。</li> <li>如果 使用 js 修改禁用状态，在 火狐浏览器 firefox 出现问题 没有刷新对禁用的设置，参考 html - Bug With Firefox - Disabled Attribute of Input Not Resetting When Refreshing - Stack Overflow 。</li> </ul> </li> </ul> </li> <li> <p><strong>示例</strong>：一个被禁用的按钮</p> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Click here!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/099aaf99176741e88b483506508c7ebd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/099aaf99176741e88b483506508c7ebd.jpg" alt="在这里插入图片描述" width="107" height="45"></a></p> <ul> <li>输出:显示成 灰色的,无法点击</li> </ul> <hr> <h5>⑶ form: 绑定表单</h5> <ul> <li>⑶ <strong><code><button></code>按钮标签的<code>form</code>表单绑定 属性</strong> <ul> <li>如何 关联按钮 和 它所属的表单？ <ul> <li>使用 表单绑定 <code>form</code> 属性。</li> </ul> </li> <li><code>form</code>的属性值 有什么限制？ <ul> <li>必须是 ❶ 同一文档中的 ❷ 表单标签<code><form></code>的 <code>id</code>。</li> </ul> </li> <li>如果没有设置这个<code>form</code>属性，<code><button></code>属于谁？ <ul> <li>与它的祖先<code><form></code>元素相关联(如果有的话)。</li> </ul> </li> <li><code>form</code> 属性的好处 有哪些？ <ul> <li>① <strong>写标签 不挑位置</strong>：无论 <code>button</code> 标签在 文档中的任何位置，该属性都可以将<code><button></code>元素与<code><form></code>元素关联，而不仅仅是在<code><form></code>中。</li> <li>② <strong>覆盖祖先 form，改祖宗</strong>：还可以覆盖祖先<code><form></code>元素，就算 <code>button</code>标签 已经在 <code>form</code> 标签中，也可以给它重新找个 别人的祖宗 <code>form</code>，就跟去做义子一样，进别人家族谱。</li> </ul> </li> <li>如果引用多个表单，使用什么做分隔符？ <ul> <li>空格。</li> </ul> </li> <li>关联时，属性值的关系是怎样的? <ul> <li>button-<code>form</code>属性值=form-<code>id</code>属性值</li> </ul> </li> <li><strong>仅绑定一个</strong>: 目前,一个元素,仅支持 绑定一个表单</li> </ul> </li> <li>位于表单之外的 提交按钮：</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html5/demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nameform<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 姓：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> 名：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>下面的按钮位于 form 元素之外，但仍是表单的一部分。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">form</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nameform<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/af56ba5f661742d8ab54c5006c96f52e.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/af56ba5f661742d8ab54c5006c96f52e.png" alt="【表单标签（知识点超全版本）】_第43张图片" width="417" height="143" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/3fdf458c94074a8eb4a7c265c6317fe0.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/3fdf458c94074a8eb4a7c265c6317fe0.png" alt="【表单标签（知识点超全版本）】_第44张图片" width="446" height="114" style="border:1px solid black;"></a></p> <ul> <li>输出: <ul> <li>在表单外的 <code><button></code> 提交按钮,也能提交 表单内的数据</li> </ul> </li> </ul> <hr> <h5>⑷ formaction: 服务器页面 地址(覆盖 form 的 action)</h5> <ul> <li>⑷ <strong><code><button></code> 按钮 标签的<code>formaction</code>服务器页面 地址 属性</strong> <ul> <li>如何指定 处理（按钮提交的信息的） 地址URL？ <ul> <li>使用 服务器页面地址 <code>formaction</code> 属性。</li> </ul> </li> <li><code>formaction</code> 覆盖了哪个属性？ <ul> <li>覆盖按钮的 所属表单的 （处理数据的）服务器页面地址 <code>action</code> 属性。</li> <li>如果没有所属的表单，则不执行任何操作，为什么？ <ul> <li>因为没有所属的表单，数据就不会被提交，更无法让服务器来处理了。</li> </ul> </li> </ul> </li> <li><code>formaction</code> 和 <code>action</code> 的区别是什么？ <ul> <li>共同点： 都是指明了 （用来处理提交的数据的）服务器页面的地址。</li> <li>区别：❶ 属性名写法不同，❷ <code>formaction</code>的属性值 可以覆盖 <code>action</code>的属性值，反之不可。</li> </ul> </li> <li><strong>搭配的 按钮类型</strong>: 提交 <code>type="submit"</code> <ul> <li>为什么 button-<code>formaction</code>和 button-<code>type="submit"</code> 要搭配使用？ <ul> <li>因为这个属性 主要针对 数据提交的,所以要和提交按钮 搭配使用。</li> </ul> </li> </ul> </li> </ul> </li> <li><strong>示例</strong>： 如何让数据提交到 不同的服务器页面？ <ul> <li>带有两个提交按钮，每个提交按钮 使用不同的 <code>action</code>，就可以提交到 不同的服务器页面。 <ul> <li>如果 提交按钮 没有设置 <code>formaction</code>，数据默认提交到哪里？ <ul> <li>把数据提交到，提交按钮 所属表单 <code>form</code>标签的 <code>action</code>属性 中指定的服务器页面。</li> </ul> </li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html5/demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> First name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> Last name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">formaction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html5/demo_admin.asp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>以管理员身份提交<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/fc791087103f4c71a2363fe8b766635a.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/fc791087103f4c71a2363fe8b766635a.png" alt="【表单标签（知识点超全版本）】_第45张图片" width="259" height="126" style="border:1px solid black;"></a></p> <ul> <li>输出: <ul> <li>默认,表单数据提交到 form-<code>action</code>中的服务器页面中</li> <li>button-<code>formaction</code>让点击本按钮时的提交,可以提交到 按钮中 指定的其他服务器页面.</li> </ul> </li> </ul> <hr> <h5>⑸ type: 按钮类型 (submit | button | reset)</h5> <ul> <li> <p>⑸ <strong><code><button></code> 按钮 标签的 <code>type</code>类型 属性</strong></p> <ul> <li> <p>用于</p> <ul> <li><strong>按钮类型</strong>: 如何指定 按钮的类型 ?或者说 如何指定 按钮的默认行为？</li> <li>使用 button- <code>type</code> 类型 属性</li> </ul> </li> <li> <p>为什么始终要为<code><button></code> 按钮标签 规定 <code>type</code> 类型属性 ?</p> <ul> <li><strong>默认 按钮类型不同</strong>: 不同浏览器,默认的按钮类型 不同，不指明 会导致浏览器差异。 <ul> <li>IE 的默认按钮类型 是什么 ? <ul> <li><strong>按钮</strong> <code>"button"</code> (默认提交的值,是按钮的 标签内容)</li> </ul> </li> <li>其他浏览器中（包括 W3C 规范）的默认值是什么 ? <ul> <li><strong>提交</strong><code>"submit"</code> (默认提交的值, 是<code>value</code>属性值)</li> </ul> </li> </ul> </li> </ul> </li> <li> <p>button- <code>type</code> 类型 属性的语法</p> <ul> <li><code><button type="submit | button | reset"></code></li> </ul> </li> <li> <p><strong>按钮 类型值</strong>: <code><button></code> 按钮标签 的 <code>type</code> 类型属性 的属性值</p> <ul> <li>① <strong>提交</strong>: <code>submit</code> <ul> <li>该按钮是 提交 按钮（除了 IE，该值是其他浏览器的默认值）。</li> <li>按钮 将表单数据 提交到服务器。</li> <li>默认值：❶ 没设置 该属性，或属性值是❷ 空值或❸ 无效值，都默认是 提交<code>type="submit"</code>（IE中除外）。</li> </ul> </li> <li>② <strong>按钮</strong>: <code>button</code> <ul> <li>该按钮是 可点击 的按钮（IE的默认值）。</li> <li>无默认行为：<code>type=button</code>时，该按钮没有默认行为，在默认情况下 按下时 不执行任何操作。</li> <li>用处：它可以让客户端脚本 侦听元素的事件，这些事件 在事件发生时被触发。</li> </ul> </li> <li>③ <strong>重置</strong>: <code>reset</code> <ul> <li>该按钮是 重置按钮（清除表单数据）。</li> <li>该按钮将 ❶ 所有控件 ❷ 重置为初始值，如同 <code><input type="reset"></code>。</li> <li><strong>谨慎使用</strong>：这种行为往往会惹恼用户，如果不小心点到，就把费力输入的数据 全给整没了，确实让人生气，所以要谨慎使用，点击到的时候，最好添加能让用户反复确认的要求。</li> </ul> </li> </ul> </li> </ul> </li> <li> <p><strong>△ 三种 提交按钮</strong></p> <ul> <li>① <strong>提交 按钮</strong>: <code><button type="submit"></code></li> <li>② <strong>图片提交 输入标签</strong> : <code><input type="image"> </code></li> <li>③ <strong>提交 输入标签</strong>: <code> <input type="submit"></code></li> </ul> </li> <li> <p><strong>示例</strong>：设置两个不同类型的 <code>button</code> 元素，一个是 提交按钮，另一个是 重置按钮：</p> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html/form_action.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> First name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> Last name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Reset<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Reset<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/1c620e3103e94a00a84ebbd3f3980f0a.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/1c620e3103e94a00a84ebbd3f3980f0a.png" alt="在这里插入图片描述" width="273" height="83"></a></p> <ul> <li> <p><strong><code>value</code>属性值=标签内容</strong>: 为什么 button-<code>value</code>的值 = button 标签的内容</p> <ul> <li>默认情况下,不同的浏览器 会提交不同的按钮值,</li> <li>IE会提交 button 按钮标签的内容</li> <li>其他浏览器,会提交 button-<code>value</code> 属性的值</li> <li>所以设置成一样的 可以解决因为浏览器造成的 提交不同按钮值的问题</li> </ul> </li> <li> <p><strong>默认 按钮文本</strong>: 提交和重置按钮,按钮上显示的文本 默认是什么 ?</p> <ul> <li>谷歌，360，火狐中：空白。</li> <li><a href="http://img.e-com-net.com/image/info8/e9ef5973360e4a7781e0fb7984eed1e8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e9ef5973360e4a7781e0fb7984eed1e8.jpg" alt="在这里插入图片描述" width="98" height="46"></a></li> </ul> </li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <ul> <li><strong>更改 按钮的显示文本</strong>: 如何 更换按钮的显示文本? <ul> <li>改变 提交和重置按钮的标签内容(和 <code>value</code>属性值,为了兼容),按钮上显示 = 标签内容</li> <li><strong>同时更改</strong>: <code>value</code>属性值 ,要和标签内容,一起修改 (修改其中一个,另一个也要修改,为了兼容浏览器.)</li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html/form_action.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 名字: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> 请选择您喜爱的项目： <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subject<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML-bt<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subject<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>CSS<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>CSS-bt<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/8d5ed0308bbb4d07a0c415b62f7ca338.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8d5ed0308bbb4d07a0c415b62f7ca338.jpg" alt="在这里插入图片描述" width="331" height="57"></a></p> <ul> <li>360 和谷歌 浏览器中测试,提交的是 带值的提交按钮的<code>value</code>值属性的属性值,不是标签内容<br> <a href="http://img.e-com-net.com/image/info8/02dd01103eb645b8a3355f6a4423de20.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/02dd01103eb645b8a3355f6a4423de20.png" alt="在这里插入图片描述" width="274" height="84"></a></li> <li>IE 11.0 浏览器中测试,提交的也是 提交按钮的<code>value</code>值属性的属性值,可能是老版本的 IE提交的 按钮标签的内容<br> <a href="http://img.e-com-net.com/image/info8/6c7f258735b44f9da275c27b8aae261b.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/6c7f258735b44f9da275c27b8aae261b.png" alt="在这里插入图片描述" width="345" height="59"></a><br> <a href="http://img.e-com-net.com/image/info8/d726fa099c5842309062db6403fc5d97.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d726fa099c5842309062db6403fc5d97.jpg" alt="在这里插入图片描述" width="252" height="81"></a></li> </ul> <hr> <ul> <li>⑹ <strong><code><button></code> 按钮 标签的 <code>name </code>名称 属性</strong></li> <li>用于 <ul> <li><strong>名称</strong>: 如何为按钮 规定名称 ?</li> <li>使用 <code>name</code>名称 属性</li> </ul> </li> <li><strong>名称 用途</strong>: <code>name</code> 名称属性一般用在哪里 ? <ul> <li>① <strong>引用 元素</strong>: 在JavaScript 中 <strong>对元素进行引用</strong>。</li> <li>② <strong>引用 数据</strong>: 在表单提交之后，<strong>对表单数据进行引用</strong>。 <ul> <li>当按钮用于 提交表单时，按钮的名称<code>name</code> （与作为表单数据一部分的）按钮值 <code>value</code> 成对提交。name/value 值对。</li> </ul> </li> </ul> </li> <li><strong>名称的 不唯一</strong> <ul> <li>不同的 <code>button</code> 按钮元素可以使用 相同的名称吗 ? <ul> <li>可以</li> </ul> </li> </ul> </li> <li><strong>示例</strong>： 两个提交按钮 带有相同的名称，在单击它们时 提交不同的值：</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo_button_name.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 名字: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> Choose your favorite subject: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subject<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subject<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>CSS<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><img src="http://img.e-com-net.com/image/info8/611f75b4033047679e6706c93fc38b6e.png" alt="在这里插入图片描述" width="0" height="0"></p> <ul> <li> <p>不设置 <code>name</code> 属性 会提交值吗？</p> <ul> <li>不会。如下↓，不给 <code><input></code>输入元素 设置<code>name</code>名称属性,传送值的时候,不传送 该输入元素的值。</li> </ul> </li> <li> <p><a href="http://img.e-com-net.com/image/info8/4e05d0aafe134e8181d9d9d411ef7500.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/4e05d0aafe134e8181d9d9d411ef7500.png" alt="在这里插入图片描述" width="305" height="61"></a></p> </li> <li> <p><a href="http://img.e-com-net.com/image/info8/84d11769244e4d5fb912694bffddf0a2.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/84d11769244e4d5fb912694bffddf0a2.png" alt="在这里插入图片描述" width="261" height="84"></a><a href="http://img.e-com-net.com/image/info8/b617f07ae94c410692faf4c7b1ce2e9d.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/b617f07ae94c410692faf4c7b1ce2e9d.png" alt="在这里插入图片描述" width="254" height="93"></a></p> </li> <li> <p>给输入标签 设<code>name</code>名称属性,点击提交按钮,输入标签的输入值,会和提交按钮的值,一起传送<br> <a href="http://img.e-com-net.com/image/info8/a9011166559a49ed90fd182d70c72afc.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/a9011166559a49ed90fd182d70c72afc.png" alt="在这里插入图片描述" width="299" height="67"></a><br> <a href="http://img.e-com-net.com/image/info8/42058ff5ba2440fe9d9793ceceb397cb.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/42058ff5ba2440fe9d9793ceceb397cb.png" alt="在这里插入图片描述" width="256" height="86"></a></p> </li> </ul> <hr> <h3>1.7 ★ select 可含有多个选项的 下拉列表</h3> <ul> <li>用于 <ul> <li><strong>下拉列表</strong>: 如何创建 (单选或多选) 下拉列表？即 如何提供 一个有很多选项的菜单? <ul> <li>使用 下拉列表 标签 <code><select></code></li> </ul> </li> <li><strong>选项菜单</strong>: 提供一个 含有多个选项的菜单，点开，里面有很多选项。</li> </ul> </li> <li><strong>下拉列表的 选项</strong>: 如何设置 下拉列表中的 选项 ? <ul> <li>在 <code><select></code> 下拉列表 元素中,使用子标签 <code><option></code> 选项 标签。</li> </ul> </li> <li><strong>示例</strong></li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>多个选项<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请选择一个选项：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>options<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>多个选项<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!--option[value=选项$]{选项$}*5--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选项1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选项2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选项3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选项4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选项5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <ul> <li> <p>显示结果</p> <ul> <li><a href="http://img.e-com-net.com/image/info8/86bf494304c04db9ad97952c936b5fd2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/86bf494304c04db9ad97952c936b5fd2.jpg" alt="在这里插入图片描述" width="224" height="65"></a></li> <li><a href="http://img.e-com-net.com/image/info8/e623cf562ee54fb1a9d0abce896460d3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e623cf562ee54fb1a9d0abce896460d3.jpg" alt="【表单标签（知识点超全版本）】_第46张图片" width="176" height="131" style="border:1px solid black;"></a></li> </ul> </li> <li> <p>用户看到的 显示出来的选项 是哪个部分设置的？</p> <ul> <li> <p><code><option></code>标签的内容（如果 <code><option></code> 也设置了 <code>label</code>属性，下拉列表中，优先显示 <code>label</code>属性值。）。给用户看到的，是标签的内容（或<code>label</code>属性值）。不是<code>value</code>的属性值哦。</p> <ul> <li><a href="http://img.e-com-net.com/image/info8/ef5a8cc0d01a4563b14837b62df68afc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ef5a8cc0d01a4563b14837b62df68afc.jpg" alt="【表单标签（知识点超全版本）】_第47张图片" width="239" height="104" style="border:1px solid black;"></a></li> </ul> </li> <li> <p><code>value</code>的属性值 有什么用？</p> <ul> <li>一般用在提交数据时， 作为被提交的值，提交到服务器。</li> </ul> </li> </ul> </li> <li> <p>上方示例，代码如下 ↓</p> </li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请选择你喜欢的宠物：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>四腿类的宠物<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- label属性值和标签内容 同时存在，优先显示 label属性值--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>狗砸<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>狗狗<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token comment"><!-- label属性值和标签内容 同时不存在，只有value属性值，这一行为空白--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token comment"><!-- label属性值为空，这一行显示 标签的内容--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>猫咪<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <ul> <li>显示结果 <ul> <li><a href="http://img.e-com-net.com/image/info8/471578ad93ff4fc280bad548516e1023.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/471578ad93ff4fc280bad548516e1023.jpg" alt="【表单标签（知识点超全版本）】_第48张图片" width="239" height="104" style="border:1px solid black;"></a></li> </ul> </li> </ul> <hr> <ul> <li><strong>组合 下拉列表的选项</strong>: (选项组) <ul> <li>如何在下拉菜单中 创建单独的选项组？ <ul> <li>可以给 多个<code><option></code>元素 添加一个父级标签 <code><optgroup></code> 选项分组标签。</li> <li>如何设置 每个分组的名称？ <ul> <li>搭配 选项分组标签<code><optgroup></code> 的 贴标签属性 <code>label</code>。<code>label</code> 属性值 就是分组的名称。</li> </ul> </li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>多个选项<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请选择一个选项：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>options<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>多个选项<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!--option[value=选项$]{选项$}*5--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>第一组选项<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选项1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选项2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选项3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>第二组选项<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选项4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选项5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <ul> <li> <p>显示结果</p> <ul> <li>加粗的组名 和缩进的选项。</li> <li><a href="http://img.e-com-net.com/image/info8/fc93f51c0bcc481a94c8f469766ebab2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fc93f51c0bcc481a94c8f469766ebab2.jpg" alt="【表单标签（知识点超全版本）】_第49张图片" width="239" height="173" style="border:1px solid black;"></a></li> </ul> </li> <li> <p><strong><code><select></code>下拉列表 提交的值</strong>是什么？</p> <ul> <li>① <strong><code><option></code>的 <code>value</code>属性值</strong>: 选择 某个选项时，默认 提交给服务器的数据值是谁？ <ul> <li>该选项的 <code>value</code>属性值。</li> </ul> </li> <li>如果选项没有设置 值<code>value</code>属性，提交的 是什么值？</li> <li>② <strong><code><option></code>的 标签内容</strong>: 则值默认为 <code><option> </code>的 标签内容。</li> </ul> </li> </ul> <hr> <ul> <li><strong>预选值(默认值)</strong>: option-<code>selected</code>选中 属性 <ul> <li>如何设置 带有 预选值的下拉列表 ? <ul> <li> <p>预选值是什么意思 ?</p> <ul> <li>指 预先选中的项目。</li> <li><code><option></code>选项 标签中 , 使用 <code>selected="selected"</code>选中属性,让选项被选中。 <ul> <li>示例：<code><option value="选项3" selected="selected">选项3</option></code></li> <li><a href="http://img.e-com-net.com/image/info8/c4ee02bf8e664f33b1873d7d36eaae3f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c4ee02bf8e664f33b1873d7d36eaae3f.jpg" alt="【表单标签（知识点超全版本）】_第50张图片" width="233" height="189" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> <li> <p><code><select></code> 标签中，显示时 默认选中的是哪一个？</p> <ul> <li>第一项。</li> <li><a href="http://img.e-com-net.com/image/info8/95ed898288f7489486ee174b2503d1c0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/95ed898288f7489486ee174b2503d1c0.jpg" alt="【表单标签（知识点超全版本）】_第51张图片" width="107" height="170" style="border:1px solid black;"></a></li> </ul> </li> <li> <p><strong>属性 区分</strong>:</p> <ul> <li>请注意,不是<code>checked</code>属性哦,单选按钮,复选框,默认选择项 用的才是<code>checked</code>属性</li> <li><code>select</code>标签 的选中项 很特别,用的就是 <code>seleced</code>属性,和标签 很搭配的名字。 <ul> <li>如果 在 <code>select</code>标签 中使用 <code>checked</code> 属性，会怎样？</li> <li>出现错误提示。 <ul> <li><a href="http://img.e-com-net.com/image/info8/83508019adf84a7286ddb7b5b84e98b9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/83508019adf84a7286ddb7b5b84e98b9.jpg" alt="在这里插入图片描述" width="509" height="93"></a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> <hr> <ul> <li><strong>下拉列表的 样式化</strong>: <ul> <li> <p><strong>删除 默认外观</strong>: 如何删除 下拉列表（菜单选项） 默认的系统外观？</p> <ul> <li>可以使用 CSS 的 外观 <code>appearance</code>属性 。美 /əˈpɪrəns/。 <ul> <li><code>select{appearance: none;}</code></li> <li>谷歌中：显示的不再是 默认第一项的“选项一”内容，或设置的预选项“选项三”内容，直接 “<strong>选项</strong>”两个字。 <ul> <li><img src="http://img.e-com-net.com/image/info8/8f95f4ad58294b0a85885b149a824d5f.jpg" alt="在这里插入图片描述" width="0" height="0"></li> </ul> </li> </ul> </li> </ul> </li> <li> <p><strong>样式化 工具</strong>: <code><select></code>元素的内部结构复杂，难以控制。</p> </li> <li> <p>如果想获得 完全的控制 该怎样做？</p> <ul> <li>应该考虑使用 一个 良好的 表单 小部件样式化工具的库(如<code>jQuery UI</code>)，或者尝试使用 非语义元素、JavaScript 来滚动 下拉菜单 和 <strong>WAI-ARIA</strong> 以提供语义。</li> </ul> </li> </ul> </li> </ul> <hr> <ul> <li><strong>示例1</strong>: 一个简单的 下拉列表</li> <li><strong>嵌套关系</strong>：<code>select > option[value]</code> <ul> <li><code><select></code> 选中 标签 <ul> <li><code><option> value 标签文本</code>选项 标签</li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>volvo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Volvo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>saab<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selected<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Saab<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>opel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Opel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audi<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Audi<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/0f7976a8b3b745fb81fe107ffeedd4cd.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/0f7976a8b3b745fb81fe107ffeedd4cd.png" alt="在这里插入图片描述" width="97" height="47"></a><br> <a href="http://img.e-com-net.com/image/info8/8a8e57c54e1d45ff85b8e0576b1be8d4.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/8a8e57c54e1d45ff85b8e0576b1be8d4.gif" alt="在这里插入图片描述" width="130" height="100"></a></p> <ul> <li>输出: <ul> <li> <p><strong>下拉列表 显示内容</strong>: 下拉列表显示的内容,是用什么设置的 ?</p> <ul> <li> <p><code><option></code>的 标签内容（如果 <code><option></code> 也设置了 <code>label</code>属性，下拉列表中，优先显示 <code>label</code>属性值）。</p> </li> <li> <p><strong>空白项</strong>: 只设置<code>value</code>属性,不设置标签内容和<code>label</code>属性值,会显示会空白项。下图 ↓ 是把第一组的标签内容 都删除后的样子。</p> <ul> <li><a href="http://img.e-com-net.com/image/info8/fdb2139de6a545df9f59f75a7afce52c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fdb2139de6a545df9f59f75a7afce52c.jpg" alt="【表单标签（知识点超全版本）】_第52张图片" width="208" height="160" style="border:1px solid black;"></a></li> </ul> </li> <li> <p><strong><code>value</code>属性 和 标签内容</strong>: 所以,<code><option></code>一定要同时 <code>value</code>属性和 标签内容,一个为了传递值 给服务器,一个为了显示 给用户看。</p> </li> </ul> </li> <li> <p><strong>默认显示数目</strong>: 载入后,默认显示几项 ?</p> <ul> <li>默认 只显示 一项。一般默认是选项一的 标签内容。 <ul> <li><a href="http://img.e-com-net.com/image/info8/3d3f72f0033749b4a45d8e648e017022.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3d3f72f0033749b4a45d8e648e017022.jpg" alt="在这里插入图片描述" width="220" height="59"></a></li> </ul> </li> </ul> </li> <li> <p><strong>默认 选择项</strong>:</p> <ul> <li>① <strong>预选值</strong>: 优先显示的是 设置了<code>selected</code>选中属性的选项。</li> <li>② <strong>第一个选项</strong>: 没有设置 <code>selected</code>默认选中 选项的话,默认显示 什么内容 ? <ul> <li>第一个选项的 标签内容（如果 <code><option></code> 也设置了 <code>label</code>属性，下拉列表中，优先显示 <code>label</code>属性值）。<br> <a href="http://img.e-com-net.com/image/info8/e992c344896445168b7d007b2e96225b.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/e992c344896445168b7d007b2e96225b.png" alt="在这里插入图片描述" width="108" height="37"></a></li> </ul> </li> </ul> </li> </ul> </li> </ul> <hr> <ul> <li><strong>示例2</strong>: 一个带分组的 下拉列表，能多选，且设置了显示列数。</li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>请选择一个或多个宠物: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multiple<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>四腿类的宠物<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>狗狗<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>猫咪<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hamster<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>仓鼠<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>飞行类的宠物<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>parrot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>鹦鹉<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>macaw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>金刚鹦鹉<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>albatross<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>信天翁<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/3625ebff67784c3fb8f55f8e18045984.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3625ebff67784c3fb8f55f8e18045984.jpg" alt="【表单标签（知识点超全版本）】_第53张图片" width="373" height="102" style="border:1px solid black;"></a></p> <ul> <li><strong>下拉列表 选项分组</strong>: 使用<code><optgroup></code>选项分组 标签</li> <li><strong>选项分组的 组名</strong>: 使用<code><optgroup></code>选项分组 标签的<code>label</code>属性</li> <li>输出 <ul> <li> <p><strong>多选</strong>: 如何设置 可选择 多个选项？</p> <ul> <li>使用 多选 <code>multiple</code> 属性。 美 /ˈmʌltɪpl/。</li> <li>用户操作时 如何实现多选？ <ul> <li>用户用鼠标时，可以按住<code>Ctrl、Command</code>或<code>Shift</code>键(取决于 操作系统)，然后单击 多个选项来 选择或取消选择。</li> <li>windows 系统，按 ctrl，再用鼠标单击。 <ul> <li><a href="http://img.e-com-net.com/image/info8/32b54077e90641f7a098120988b20028.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/32b54077e90641f7a098120988b20028.jpg" alt="【表单标签（知识点超全版本）】_第54张图片" width="150" height="103" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> </ul> </li> <li> <p><strong>可见行数</strong>: 如何设置 界面可见的行数？</p> <ul> <li>使用 可见行数 <code>size</code>属性，一次可 显示4行;可以滚动查看 所有选项。</li> <li>如下图 ↓，前面的是 默认的展开样式，后面的是 设置了可见行数为 4 后的样式，出现了滚动条。 <ul> <li><a href="http://img.e-com-net.com/image/info8/b19572b56ffa46a9beb8639b47c4750e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b19572b56ffa46a9beb8639b47c4750e.jpg" alt="【表单标签（知识点超全版本）】_第55张图片" width="198" height="251" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> <li> <p><strong>如何禁用 单个选项？</strong></p> <ul> <li>在该<code><option></code> 标签中，使用 禁用<code>disabled</code> 属性。 <ul> <li><code><option value="hamster" disabled="disabled">仓鼠</option></code></li> <li>“仓鼠”选项包含 禁用<code>disabled</code>属性，因此 无法被选中，默认显示为灰色字体。</li> <li><a href="http://img.e-com-net.com/image/info8/f59e66c02260479b8d93ce1f0b675bf5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f59e66c02260479b8d93ce1f0b675bf5.jpg" alt="【表单标签（知识点超全版本）】_第56张图片" width="141" height="109" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> </ul> </li> </ul> <hr> <h4>1.7.1 select 下拉列表的 属性</h4> <table> <thead> <tr> <th align="left">属性名</th> <th align="left">属性值</th> <th align="left">用于</th> </tr> </thead> <tbody> <tr> <td align="left">① autofocus</td> <td align="left">=autofocus</td> <td align="left">规定在页面加载后 文本区域 <strong>自动获得 输入焦点</strong>。(文档中 只有一个表单元素 可以具有<code>autofocus</code>属性,不能同事聚焦两个属性，因为不能同时在两个地方输入值。)</td> </tr> <tr> <td align="left">② disabled</td> <td align="left">= disabled</td> <td align="left">规定<strong>禁用</strong>该下拉列表。如果未指定 此属性，则控件从 包含的元素(例如<code>fieldset</code>)继承 其设置;(比如,父元素禁用了,子元素也会被禁用)。<a href="http://img.e-com-net.com/image/info8/64221fb8003948cc818850511db9c1e1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/64221fb8003948cc818850511db9c1e1.jpg" alt="【表单标签（知识点超全版本）】_第57张图片" width="149" height="110" style="border:1px solid black;"></a></td> </tr> <tr> <td align="left">③ form</td> <td align="left">=form_id</td> <td align="left">规定<strong>所属</strong>的一个或多个<strong>表单</strong>。</td> </tr> <tr> <td align="left">④ multiple</td> <td align="left">=multiple</td> <td align="left"><strong>多值</strong>. 规定可选择 <strong>多个</strong>选项。</td> </tr> <tr> <td align="left">⑤ name</td> <td align="left">=name</td> <td align="left">规定下拉列表的<strong>名称</strong>。</td> </tr> <tr> <td align="left">⑥ required</td> <td align="left">=required</td> <td align="left">规定文本区域是<strong>必填</strong>的。</td> </tr> <tr> <td align="left">⑦ size</td> <td align="left">=number</td> <td align="left">规定下拉列表中 <strong>可见的 选项数目</strong>。又称 可见行数。</td> </tr> </tbody> </table> <hr> <h5>⑴ autofocus 属性: 自动获得焦点</h5> <ul> <li><strong><code><select></code> 标签的 <code>autofocus</code>自动获得焦点 属性</strong> <ul> <li>如何指定表单控件 在页面加载时 具有输入焦点（input focus）？ <ul> <li>使用 select-<code>autofocus</code>自动获得焦点 属性。该属性是 <strong>布尔属性</strong>（Boolean attribute）。</li> </ul> </li> </ul> </li> <li>自动获得焦点的 下拉列表</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">autofocus</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>autofocus<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>volvo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Volvo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>saab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Saab<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>opel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Opel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audi<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Audi<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <ul> <li>获得输入焦点，下拉列表的边框 一般会有变化。如下 ↓ <ul> <li><a href="http://img.e-com-net.com/image/info8/e74d30503cc04bd5a471d1ca693ae375.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/e74d30503cc04bd5a471d1ca693ae375.png" alt="在这里插入图片描述" width="105" height="39"></a></li> <li><a href="http://img.e-com-net.com/image/info8/051e20e2391a42bc9ba9986a7e7738ec.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/051e20e2391a42bc9ba9986a7e7738ec.jpg" alt="【表单标签（知识点超全版本）】_第58张图片" width="142" height="104" style="border:1px solid black;"></a></li> </ul> </li> </ul> <hr> <h5>⑵ disabled 属性: 禁用</h5> <ul> <li><strong><code><select></code> 标签的 <code>disabled</code>禁用 属性</strong> <ul> <li>如何让用户 不能与控件交互？ <ul> <li>使用布尔属性 禁用<code>disabled</code> 属性。</li> </ul> </li> <li>一个被禁用的下拉列表 <ul> <li><code><select disabled="disabled"></code><br> <a href="http://img.e-com-net.com/image/info8/c27b3e99f9c94807b72fbdccf375bda5.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/c27b3e99f9c94807b72fbdccf375bda5.png" alt="在这里插入图片描述" width="119" height="46"></a></li> </ul> </li> </ul> </li> <li>被禁用的下拉列表 还能选中选项吗？ <ul> <li>无法选中。</li> </ul> </li> </ul> <hr> <h5>⑶ form 属性: 所属表单</h5> <ul> <li>⑶ <strong><code><select></code> 标签的 <code>form</code>绑定 所属表单 属性</strong> <ul> <li>如何将 <code><select></code>标签 和 所属的 <code><form></code> 表单标签 相关联？即，如何指明 <code>select</code> 标签 属于哪个<code><form></code>？ <ul> <li>搭配 所属表单 <code>form</code> 属性。</li> </ul> </li> <li><strong><code>form</code>的属性值</strong>: 该属性的值 必须是 同一文档中的某个 <code><form></code>表单 元素的 <code>id</code> 属性值。 <ul> <li>select-<code>form="form-id"</code></li> <li>如果没有设置这个属性，<code><select></code>与谁相关联？ <ul> <li>与它的祖先<code><form></code>元素相关联(如果有 设置 祖先<code><form></code>的话)。</li> </ul> </li> </ul> </li> </ul> </li> <li><strong>示例</strong>： 一个 位于表单之外的 下拉列表,但是 仍然属于表单</li> <li><strong>嵌套关系</strong>：form>input，select>option <ul> <li><code><form> action id</code> <ul> <li><code><input> type name</code></li> </ul> </li> <li><code><select> name form</code> <ul> <li><code><option>value</code></li> </ul> </li> <li><strong>关联关系</strong>:<code>select-form="form-id"</code></li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/demo/demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carform<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 名字：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carlist<span class="token punctuation">"</span></span> <span class="token attr-name">form</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carform<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>volvo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Volvo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>saab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Saab<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>opel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Opel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audi<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Audi<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/527f1441ee5c432799de14f6bf6b2bbb.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/527f1441ee5c432799de14f6bf6b2bbb.png" alt="【表单标签（知识点超全版本）】_第59张图片" width="402" height="119" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/f53d2d81e4ae41dea28f0ac36502fcee.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/f53d2d81e4ae41dea28f0ac36502fcee.png" alt="在这里插入图片描述" width="460" height="100"></a></p> <ul> <li>输出: <ul> <li><strong>提交 表单之外的 选项值</strong>: 按钮是表单内的,下拉列表是位于 表单之外的 <ul> <li>下拉列表绑定表单后,点击提交按钮,位于表单外的 下拉列表的选中值,也会提交给服务器</li> </ul> </li> <li><strong>传递值</strong>: 要传递值,必须给元素 指定<code>name</code>名称值。 <ul> <li>(下拉列表是给 <code>select</code>下拉列表 指定<code>name]</code>,而不是内部的<code>option</code>选项)</li> <li><strong>值对</strong>: <code>select-name="option-value"</code></li> </ul> </li> </ul> </li> </ul> <hr> <h5>⑷ multiple 属性: 多选</h5> <ul> <li><strong><code><select></code> 标签的 <code>multiple</code> 多选 属性</strong> <ul> <li> <p>用于</p> <ul> <li><strong>多个 下拉选项值</strong>: 如何规定 可 <strong>选择多个选项</strong> ? <ul> <li>使用 <code>multiple</code>多选 属性</li> </ul> </li> <li><strong>多选</strong>: 在下拉列表中 可以进行多选吗 ? <ul> <li>可以,设置<code>multiple</code>多选 属性。默认是 只能选中一个选项。</li> </ul> </li> <li>设置 多选 <code>multiple</code> 属性后，下拉列表会如何显示？ <ul> <li>① <strong>默认可见行数变4行</strong>：默认显示的可见行数，变为 4 行（注意，此处没有设置 <code>size</code> 属性值）</li> <li>② <strong>滚动条</strong>：会不会显示 滚动条，取决于什么？ <ul> <li>能不能显示出 所有的信息。</li> <li><a href="http://img.e-com-net.com/image/info8/765933b01e0c49b6ac865e4f8ef93e22.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/765933b01e0c49b6ac865e4f8ef93e22.jpg" alt="【表单标签（知识点超全版本）】_第60张图片" width="263" height="115" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> </ul> </li> <li> <p><strong>下拉列表的 多选操作</strong>: 在不同操作系统中，如何选择多个选项 ?</p> <ul> <li> <p>对于 windows：</p> <ul> <li>按住 <code>Ctrl</code> 按钮 来选择多个选项</li> </ul> </li> <li> <p>对于 Mac：</p> <ul> <li>按住 <code>command</code> 按钮 来选择多个选项</li> </ul> </li> <li> <p>由于上述差异的存在，所以，能多选时，需要 告知用户可以 使用多项选择，最好把搭配使用的功能键也告知。但多选时，对用户更友好的方式 是使用<strong>复选框</strong>。</p> <ul> <li>选中两项。↓ <ul> <li><a href="http://img.e-com-net.com/image/info8/a6efe7f27e8f434fb0ceace95c9bc318.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/a6efe7f27e8f434fb0ceace95c9bc318.png" alt="在这里插入图片描述" width="126" height="59"></a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> <hr> <h5>⑸ size 属性: 可见行数</h5> <ul> <li> <p><strong><code><select></code> 标签的 <code>size</code> 可见行数 属性</strong></p> <ul> <li>用于 <ul> <li><strong>可见行数</strong>: 如何规定 下拉列表中 一次<strong>可见的行数</strong> ?</li> <li>使用 可见行数<code>size</code> 属性</li> </ul> </li> <li><strong>可见行数 和滚动条</strong>的关系 <ul> <li> <p>可见行数 大于 1，且小于列表中选项的 总行数，意思就是 显示不完所有的信息，浏览器会显示出 滚动条。</p> <ul> <li> <p>等于1，显示不完所有的信息，也不会出现滚动条。位置太小。</p> <ul> <li><a href="http://img.e-com-net.com/image/info8/afbf7e7741eb4155a2852bfa4fd738c7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/afbf7e7741eb4155a2852bfa4fd738c7.jpg" alt="在这里插入图片描述" width="171" height="68"></a></li> </ul> </li> <li> <p>滚动条表示: 可以查看 更多选项。</p> <ul> <li><a href="http://img.e-com-net.com/image/info8/260b1eea2c714b3aa4bc95b7efa5e1d5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/260b1eea2c714b3aa4bc95b7efa5e1d5.jpg" alt="【表单标签（知识点超全版本）】_第61张图片" width="176" height="119" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> <li> <p><code>size="4"</code>，大于等于 列表的总行数，能全部显示，不会出现滚动条。</p> <ul> <li><a href="http://img.e-com-net.com/image/info8/eae0db5292df4c14ad99a90a3a073c32.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eae0db5292df4c14ad99a90a3a073c32.jpg" alt="【表单标签（知识点超全版本）】_第62张图片" width="152" height="114" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> </ul> </li> <li> <p><strong>示例</strong>：把下拉列表的 可见行数,设置为3个</p> <ul> <li>select-<code>size="3"</code></li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">multiple</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multiple<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>volvo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Volvo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>saab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Saab<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>opel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Opel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audi<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Audi<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <p><img src="http://img.e-com-net.com/image/info8/8c926e0de03147e6b0a55926492582bb.png" alt="在这里插入图片描述" width="0" height="0"></p> <ul> <li><strong>可见行数</strong>: 默认可见行数是几个？ 一个。可以通过<code><select></code>下拉列表 标签的<code>size</code>可见行数 属性来设置 可见选项的数目。</li> </ul> <hr> <h3>1.8 ★ optgroup 对选项 进行分组 （label 必需属性）</h3> <ul> <li>用于 <ul> <li> <p>如何 对选项 进行分组 ?</p> <ul> <li>使用 <code><optgroup></code>选项分组 标签 <ul> <li><a href="http://img.e-com-net.com/image/info8/2bf2da83a212457ea6dd2bd57ce39456.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2bf2da83a212457ea6dd2bd57ce39456.jpg" alt="【表单标签（知识点超全版本）】_第63张图片" width="277" height="189" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> <li> <p><strong>下拉列表的 选项分组</strong>: 在下拉列表 <code><select></code>元素中 创建选项分组。</p> </li> </ul> </li> <li><code><optgroup></code>选项分组标签 的属性 有哪些 ?</li> </ul> <table> <thead> <tr> <th align="left">属性名</th> <th align="left">属性值</th> <th align="left">用于</th> </tr> </thead> <tbody> <tr> <td align="left">① label</td> <td align="left">=text</td> <td align="left"><strong>组名+必需属性</strong>.为选项组 设置 <strong>分组的名称</strong>。</td> </tr> <tr> <td align="left">② disabled</td> <td align="left">=disabled</td> <td align="left">可选属性.规定<strong>禁用</strong>该选项组。第二组被禁用。<a href="http://img.e-com-net.com/image/info8/06f5c78e162a42afb7f2acd08f556c93.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/06f5c78e162a42afb7f2acd08f556c93.jpg" alt="【表单标签（知识点超全版本）】_第64张图片" width="244" height="188" style="border:1px solid black;"></a></td> </tr> </tbody> </table> <h4>⑴ label 属性: 分组的名称</h4> <ul> <li><strong><code><optgroup></code>选项分组 标签的<code>label </code> 组名名称 属性</strong> <ul> <li><code><optgroup></code>选项分组 标签 必需的属性 有哪些 ? <ul> <li><strong>组名</strong>: optgroup-<code>label </code> 组名名称 属性</li> <li>属性值 <ul> <li>text</li> </ul> </li> <li>如何设置分组后,小组的组名? <ul> <li>optgroup-<code>label="text"</code></li> </ul> </li> </ul> </li> </ul> </li> </ul> <hr> <h4>⑵ disabled 属性: 禁用</h4> <ul> <li> <p><strong><code><optgroup></code>选项分组 标签 <code>disabled </code> 禁用属性</strong></p> <ul> <li><code><optgroup></code>选项分组 标签 可选的属性 有哪些 ? <ul> <li><code>disabled </code> 禁用属性</li> <li>属性值 <ul> <li>disabled</li> </ul> </li> <li>如何禁用一个 选项组 ? <ul> <li>optgroup-<code>disabled="disabled"</code> <ul> <li><a href="http://img.e-com-net.com/image/info8/ae3d6e2f4ab5437887be503b084e9733.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ae3d6e2f4ab5437887be503b084e9733.jpg" alt="【表单标签（知识点超全版本）】_第65张图片" width="244" height="188" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li> <p><strong>必需 属性</strong></p> <ul> <li><code><optgroup></code>选项分组,必须搭配 optgroup-<code>label</code>组名标注 属性</li> <li><strong>必须有 组名</strong>: 分组 必须有组名,不设置组名,组名会显示成 空白,给人造成困惑。 <ul> <li><a href="http://img.e-com-net.com/image/info8/0a07bdc215e74438b0a3b85cafe37995.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0a07bdc215e74438b0a3b85cafe37995.jpg" alt="【表单标签（知识点超全版本）】_第66张图片" width="244" height="172" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> <li> <p><strong>示例</strong>：通过 <code><optgroup></code> 选项组 标签把相关的选项 分成两个小组：</p> </li> <li> <p>▲ <strong>嵌套关系</strong></p> <ul> <li><code><select></code> 下拉列表选择 标签 <ul> <li><code><optgroup> label</code>选项分组 标签 <ul> <li><code><option> value</code> 选项标签</li> </ul> </li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Swedish Cars<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>volvo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Volvo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>saab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Saab<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>German Cars<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mercedes<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mercedes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audi<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Audi<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/7224785018d24ff2a7c562ad65844f17.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/7224785018d24ff2a7c562ad65844f17.gif" alt="【表单标签（知识点超全版本）】_第67张图片" width="185" height="180" style="border:1px solid black;"></a></p> <ul> <li>输出: <ul> <li>默认显示: 第一个分组的 第一个选项,点击下拉键后,展示所有的分组。</li> <li><code>label</code>设置的组名 能选中吗？ <ul> <li>不可以选中,只能选中 选项。</li> </ul> </li> </ul> </li> <li>把第二分组禁用,不可选中,不可以点击 <ul> <li><code><optgroup label="German Cars" disabled="disabled"></code><br> <a href="http://img.e-com-net.com/image/info8/c7f4ab44692b40beb2975a6463f0cbad.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/c7f4ab44692b40beb2975a6463f0cbad.png" alt="【表单标签（知识点超全版本）】_第68张图片" width="138" height="174" style="border:1px solid black;"></a></li> </ul> </li> <li>输出: <ul> <li><strong>禁用</strong>: 被禁用的分组,显示灰色,不能点击和选中。</li> </ul> </li> </ul> <hr> <h3>1.9 ★ option （下拉列表，数据列表中的） 一个选项</h3> <ul> <li>用于 <ul> <li>如何定义 下拉列表中的 一个选项 ? <ul> <li>使用 <code><option></code>选项 标签</li> </ul> </li> </ul> </li> <li><strong>使用范围</strong> <ul> <li><code><option></code> 标签 搭配哪些标签一起使用？ <ul> <li><strong>下拉列表+选项分组+数据列表</strong>: 用于 定义包含在<code><select></code>、<code><optgroup></code>或<code><datalist></code>元素中的项。作为这三个元素的选项。即子标签。 <ul> <li> <p>① <strong>下拉列表</strong><code><select></code>的 选项: select>option</p> <ul> <li><a href="http://img.e-com-net.com/image/info8/a6a81ae017674f4a9204321ed9e7ecbd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a6a81ae017674f4a9204321ed9e7ecbd.jpg" alt="【表单标签（知识点超全版本）】_第69张图片" width="240" height="167" style="border:1px solid black;"></a></li> </ul> </li> <li> <p>② <strong>选项分组</strong><code><optgroup></code>的 选项: select>optgroup>option。（optgroup不使用在 <code>datalist</code>标签中，仅用于 <code>select</code>标签）</p> <ul> <li><a href="http://img.e-com-net.com/image/info8/6d13558c97c74d4b8f390db4b037895b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6d13558c97c74d4b8f390db4b037895b.jpg" alt="【表单标签（知识点超全版本）】_第70张图片" width="230" height="176" style="border:1px solid black;"></a></li> </ul> </li> <li> <p>③ <strong>数据列表</strong><code><datalist></code>的 选项。</p> <ul> <li>如何看到数据列表中的选项？ <ul> <li>搭配<code><input></code>标签，相关联后，点击 文本框可看到选项值。</li> <li>关联方法：input-<code>list</code> = datalist-<code>id</code>。</li> </ul> </li> <li><code>optgroup</code> 可以在 <code>datalist</code>标签中 使用吗？ <ul> <li>不可以。仅用于 <code>select</code>标签。</li> <li><a href="http://img.e-com-net.com/image/info8/2fbe6cf89fdd4742a8d6cae88d644cc2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2fbe6cf89fdd4742a8d6cae88d644cc2.jpg" alt="【表单标签（知识点超全版本）】_第71张图片" width="517" height="133" style="border:1px solid black;"></a></li> <li><a href="http://img.e-com-net.com/image/info8/0f27d938e30f4c209682dd3ed1bab940.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0f27d938e30f4c209682dd3ed1bab940.jpg" alt="【表单标签（知识点超全版本）】_第72张图片" width="354" height="404" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li>上方示例图的代码</li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>多个选项<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请选择一个选项：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>options<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>多个选项<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!--option[value=选项$]{选项$}*5--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>第一组选项<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选项1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选项2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选项3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>第二组选项<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选项4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选项5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets-choice<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请选择一个喜欢的宠物：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets-choice<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all-pets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all-pets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>狗狗<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>猫咪<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hamster<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>仓鼠<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>parrot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>鹦鹉<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>macaw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>金刚鹦鹉<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>albatross<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>信天翁<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> </code></pre> <ul> <li> <p><strong>正确关闭</strong>: <code><option></code> 选项标签,在 HTML 与 XHTML 之间的差异</p> <ul> <li>在 HTML 中，<code><option></code> 没有 结束标签。</li> <li>在 XHTML 中，<code><option></code> 必须被 正确关闭。</li> </ul> </li> <li> <p><strong>传递值(提交的值)</strong>: 如何指定 <code><option></code> 选项标签 被提交到服务器的内容 ?</p> <ul> <li>使用 option-<code>value</code> 值属性</li> </ul> </li> <li> <p><code><option></code>选项 标签的属性 有哪些 ?</p> </li> </ul> <table> <thead> <tr> <th align="left">属性名</th> <th align="left">属性值</th> <th align="left">用于</th> </tr> </thead> <tbody> <tr> <td align="left">① disabled</td> <td align="left">= disabled</td> <td align="left">规定此选项应在首次加载时被<strong>禁用</strong>。</td> </tr> <tr> <td align="left">② label</td> <td align="left">=text</td> <td align="left">指明选项含义的 标注。如果 没设置<code>label</code>属性，它的值就是 <code><option></code>标签的内容。如果两者同时存在，优先显示 <code>label</code> 属性值。</td> </tr> <tr> <td align="left">③ selected</td> <td align="left">=selected</td> <td align="left">规定选项（在首次显示在列表中时）表现为<strong>选中</strong>状态。如果<code><option></code>元素是未设置<code> multiple</code>属性的<code><select></code>元素的后代，则此<code><select></code>元素中 只有一个<code><option></code>可能具有 此属性。</td> </tr> <tr> <td align="left">④ value</td> <td align="left">= text</td> <td align="left">定义 <strong>送往服务器</strong>的选项<strong>值</strong>。</td> </tr> </tbody> </table> <hr> <ul> <li>⑴ <strong><code><option></code> 标签的 <code>disabled</code>禁用属性</strong> <ul> <li>禁用 指定选项 。</li> <li>被禁用的选项 不可用，也不可点击。</li> <li><strong>继承性</strong>: 如果未设置此属性，则如果元素的一个祖先 是已禁用的<code><optgroup></code>元素，则仍然可以禁用该元素。可从祖先继承 禁用,祖先被禁用,本元素也会被 禁用.</li> </ul> </li> <li>禁用 下拉列表中 指定的一个选项</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Volvo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Saab<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mercedes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Audi<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/1276db51938e4c218da993b9052f5d60.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/1276db51938e4c218da993b9052f5d60.png" alt="【表单标签（知识点超全版本）】_第73张图片" width="157" height="123" style="border:1px solid black;"></a></p> <ul> <li>输出: <ul> <li>被禁用的选项 显示: 为灰色,不能 点击和选中.</li> </ul> </li> </ul> <hr> <ul> <li> <p>⑵ <strong><code><option></code> 标签的 <code>label</code> 标注 属性</strong></p> <ul> <li> <p>用于</p> <ul> <li>如何设置 指明 选项含义的标注？</li> <li><strong>替代内容: 标签内容</strong>: 指明 选项含义的标注。如果没有定义 标注<code>label</code>属性，那么它的值就是 <strong>标签的内容</strong>。</li> </ul> </li> <li> <p>显示</p> <ul> <li> <p>如果同时规定了 <code>label</code> 属性值和 <code><option></code>标签的内容，优先显示哪个？</p> <ul> <li>优先显示 <code>label</code> 属性值。第三项和第四项 设置了 <code>label</code> 属性值。 <ul> <li><a href="http://img.e-com-net.com/image/info8/291cc7f78da74be78e0976a4179b961d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/291cc7f78da74be78e0976a4179b961d.jpg" alt="【表单标签（知识点超全版本）】_第74张图片" width="259" height="136" style="border:1px solid black;"></a></li> <li><a href="http://img.e-com-net.com/image/info8/bafb039adbd94b0d80c908c4b3c16f6f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bafb039adbd94b0d80c908c4b3c16f6f.jpg" alt="【表单标签（知识点超全版本）】_第75张图片" width="445" height="448" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> <li> <p>如果 没有设置 <code>label</code> 属性值或属性值为空（<code>label=""</code>），选项显示内容的 是什么 ?</p> <ul> <li>① 没有设置 <code>label</code> 属性值：<code>select</code> 和 <code>datalist</code> 都会优先显示<code><option></code> 选项 标签的内容。 <ul> <li><a href="http://img.e-com-net.com/image/info8/c57a97c2965e4110a54bd90ec5ca9268.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c57a97c2965e4110a54bd90ec5ca9268.jpg" alt="【表单标签（知识点超全版本）】_第76张图片" width="252" height="124" style="border:1px solid black;"></a></li> </ul> </li> <li>② 属性值为空（<code>label=""</code>）时，<code>select</code> 下拉列表中会显示 标签内容。<code>datalist</code> 中的标注，会为空。</li> <li>修改的都是第二项，标签内容 和第一项的相同。</li> <li><a href="http://img.e-com-net.com/image/info8/66c5a86a03d94a3a933d70958b58f6cb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/66c5a86a03d94a3a933d70958b58f6cb.jpg" alt="【表单标签（知识点超全版本）】_第77张图片" width="244" height="117" style="border:1px solid black;"></a></li> <li><a href="http://img.e-com-net.com/image/info8/c536da54545a43e9908cd3bac0a8a502.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c536da54545a43e9908cd3bac0a8a502.jpg" alt="【表单标签（知识点超全版本）】_第78张图片" width="374" height="244" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> </ul> </li> <li> <p>上图代码，如下↓</p> </li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请选择你喜欢的宠物：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>四腿类的宠物<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>狗狗<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>狗砸<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>狗狗<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>猫咪<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>猫猫<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>猫咪<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets-choice<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请选择一个喜欢的宠物：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets-choice<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all-pets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all-pets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>狗狗<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>狗砸<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>狗狗<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>猫咪<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>猫猫<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>猫咪<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hamster<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>仓鼠<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>parrot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>鹦鹉<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>macaw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>金刚鹦鹉<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>albatross<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>信天翁<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> </code></pre> <ul> <li> <p><code><option></code> 选项 标签的 <code>label</code> 标注 属性的浏览器支持</p> <ul> <li>只有 IE 7以上 支持 <code>label</code> 属性。</li> </ul> </li> <li> <p>在 <code>option</code> 选项 元素中使用 <code>label</code>标注 属性：</p> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Volvo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Volvo (Latin for "I roll")<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Saab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Saab (Swedish Aeroplane AB)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Mercedes<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mercedes (Mercedes-Benz)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Audi<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Audi (Auto Union Deutschland Ingolstadt)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <ul> <li> <p>输出:</p> <ul> <li>火狐，360和谷歌 浏览器,下拉列表中 都优先显示的是 标注<code>label</code>属性的值。 <ul> <li><a href="http://img.e-com-net.com/image/info8/bf189654bee04e7bb2525fe3ebc35864.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bf189654bee04e7bb2525fe3ebc35864.jpg" alt="【表单标签（知识点超全版本）】_第79张图片" width="126" height="110" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> <li> <p>输出:</p> <ul> <li>慎用 option 选项标签的 <code>label</code>短选项 属性,因为有浏览器兼容问题</li> <li><strong>选项 显示的内容</strong>: <ul> <li>① <code><option></code>标签内容,优先使用</li> <li>② <code>label</code>属性内容( 尽量不要使用,选项的这个属性,有浏览器兼容问题)</li> </ul> </li> </ul> </li> </ul> <hr> <ul> <li> <p>⑶ <strong><code><option></code> 选项 标签的 <code>value</code> 值属性</strong></p> <ul> <li>用于 <ul> <li><strong>提交值</strong>: 如何规定 在表单被提交时 被发送到服务器的值 ? <ul> <li>① <strong><code>value</code> 的属性值.</strong> <ul> <li>表示 被选中的项 与表单一起 提交的值。</li> </ul> </li> <li>② <strong>标签内容</strong>. 如果省略未设置 <code>value</code>属性，则该值 取自<code><option></code>元素的 标签内容。</li> </ul> </li> </ul> </li> <li>浏览器 显示在下拉列表中 的内容是什么 ? <ul> <li>= 标签内容 = <code><option></code> 与 <code><option/></code> 标签之间的 文本内容,或 该标签的<code>label</code>属性值，不是 <code>value</code>的值.</li> </ul> </li> <li>注释：</li> <li>如果没有指定 <code>value</code> 值属性，选项的值 将设置为什么 ? <ul> <li><code><option></code> 标签的内容</li> </ul> </li> </ul> </li> <li> <p>▲总结:</p> <ul> <li>发送到服务器的值 = <code>value</code> 属性值(或者标签内容,当<code>value</code>未设置时)</li> <li>浏览器 显示在下拉列表中 的内容 = <code><option></code> 标签内容 (或者<code>label</code>属性内容,当设置<code>label</code>属性时,部分浏览器显示的是此属性的内容)</li> <li>没有<code>value</code> 属性,选项的值 = <code><option></code> 标签的内容。</li> </ul> </li> <li> <p>选项标签<code><option></code>的<code>value</code>值 在下拉列表<code>select</code>和数据列表<code>datalist</code>中有什么区别？</p> <ul> <li>① 在下拉列表<code>select</code>中，option-<code>value</code>属性值 都不会被显示。</li> <li>② 在数据列表<code>datalist</code>中，option-<code>value</code>属性值 有时会被显示出来。 <ul> <li>注意：<code><datalist></code>标签中的<code><option></code>标签，<strong>只设置 <code>value</code>属性值</strong>，而且<code>value</code>属性可用于传递值。<code>label</code>属性和标签内容，都不设置，因为<code>value</code>属性和它俩一起使用，在浏览器显示 会出现差异。 <ul> <li>只设置 <code>value</code>属性值，各个浏览器都只会显示<code>value</code>属性值，达成一致。</li> </ul> </li> <li>火狐浏览器中，有标签内容和<code>label</code>属性时，不显示 <code>value</code>属性值。 <ul> <li><a href="http://img.e-com-net.com/image/info8/6c040511b3a4402888a19417bb54a4d2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6c040511b3a4402888a19417bb54a4d2.jpg" alt="【表单标签（知识点超全版本）】_第80张图片" width="330" height="146" style="border:1px solid black;"></a></li> </ul> </li> <li>谷歌浏览器中，显示 <code>value</code>属性值，和标签内容或<code>label</code>属性值一起显示。 <ul> <li><a href="http://img.e-com-net.com/image/info8/b15dd2318d8b42a9adbb6e76e108db79.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b15dd2318d8b42a9adbb6e76e108db79.jpg" alt="【表单标签（知识点超全版本）】_第81张图片" width="315" height="338" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> </ul> </li> <li> <p>上方示例图的代码，如下↓</p> </li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets-choice<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请选择一个喜欢的宠物：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets-choice<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all-pets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all-pets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!--<option value="dog">狗狗</option>--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>狗狗<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>狗砸<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>狗狗<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>猫咪<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>猫猫<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>猫咪<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hamster<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>仓鼠<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> </code></pre> <ul> <li><strong>示例</strong>：带有发送到服务器的值 的下拉列表：</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cars<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>volvo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Volvo XC90<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>saab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Saab 95<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mercedes<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mercedes SLK<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audi<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Audi TT<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/40c4f8156c6f4b2ca4fa45a7a60fc68b.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/40c4f8156c6f4b2ca4fa45a7a60fc68b.png" alt="在这里插入图片描述" width="212" height="44"></a><br> <a href="http://img.e-com-net.com/image/info8/b2ebe3714df247db9cd7492b9b959486.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/b2ebe3714df247db9cd7492b9b959486.png" alt="在这里插入图片描述" width="250" height="95"></a></p> <ul> <li>输出: <ul> <li>服务器接收的值,是选中项的<code>value</code>值属性的值</li> </ul> </li> </ul> <hr> <h3>1.10 ★ label 为 输入input 元素 定义 标注说明(for 属性 关联控件)</h3> <ul> <li>用于 <ul> <li>如何为 某些控件定义 标注说明 ? <ul> <li>使用 <code><label></code>标注 标签</li> </ul> </li> </ul> </li> <li>可以与<code><label></code> 标签相关联的标签 有哪些？ <ul> <li>7个标签。按钮 <code><button></code>,输入标签 <code><input></code> (except for <code>type="hidden"</code>，类型为隐藏值的不需要标注), <code><meter></code>, <code><output></code>, <code><progress></code>, 下拉列表 <code><select></code> and 多行文本 <code><textarea></code>.</li> <li><strong>共同点</strong>：这些标签一般 <strong>都需要 标注说明</strong>。</li> </ul> </li> </ul> <hr> <ul> <li><code><label></code>与<code><input></code>元素 <strong>相关联的 优点</strong>: <ul> <li>① <strong>利于 获得焦点</strong>: 点击 <code><label></code>标注标签的内容,浏览器会有什么反应？ <ul> <li>就会自动将 焦点转到 和标签相关的表单控件上。能输入的地方，会获得输入光标，可以立刻输入文字。 <ul> <li> <p><a href="http://img.e-com-net.com/image/info8/d5c699a0b8654a00bd19d8659fb5be25.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/d5c699a0b8654a00bd19d8659fb5be25.gif" alt="在这里插入图片描述" width="264" height="46"></a></p> </li> <li> <p><strong>增加的命中区域</strong>： 因为<code>label</code>标签的内容 比较容易被点击到，所以，可以为任何试图激活输入的人 提供了一个优势，包括那些 使用触摸屏设备的人。</p> </li> </ul> </li> </ul> </li> <li>② <strong>利于 理解</strong>: 屏幕阅读器 将 <strong>读出<code><label></code>标签</strong>，使辅助技术用户 更容易理解 应该输入什么数据。</li> <li>关键词：焦点，理解。</li> </ul> </li> </ul> <hr> <ul> <li><strong>关联 表单元素</strong>: 如何把<code><label></code>标注标签 关联到表单元素 ? <ul> <li>① <strong>显式 关联</strong>: <code>for</code>属性 <ul> <li><code><label></code>标注 标签的 <code>for</code>关联 属性 , 与 相关元素的 <code>id</code> 属性值 相同。</li> <li><code>label-for="input-id""</code></li> </ul> </li> <li>② <strong>隐式 关联</strong>: 直接 把标签 嵌套在 <code>label</code>标签中. <ul> <li>将<code><input></code>元素直接 嵌套在<code><label></code>中，这种情况下 不需要<code>for</code>和<code>id</code>属性，因为关联是隐式的。</li> <li>关键词：显式，隐式，for，嵌套。</li> </ul> </li> </ul> </li> <li>多个<code><label></code> 可以关联同一个 表单控件吗？ <ul> <li>可以。</li> <li><a href="http://img.e-com-net.com/image/info8/284eaf5c728e4aa1b505a76386d29467.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/284eaf5c728e4aa1b505a76386d29467.jpg" alt="在这里插入图片描述" width="420" height="42"></a></li> </ul> </li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请输入您的用户名:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>忘记您的用户名?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> </code></pre> <ul> <li> <p><strong>浏览器支持</strong></p> <ul> <li><a href="http://img.e-com-net.com/image/info8/f7626fdb8a8141019591abea662be1e0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f7626fdb8a8141019591abea662be1e0.jpg" alt="【表单标签（知识点超全版本）】_第82张图片" width="650" height="297" style="border:1px solid black;"></a></li> </ul> </li> <li> <p><strong>示例1</strong>: 点击文本,选中 单选按钮 ( 不是 直接选择单选按钮).</p> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 显式 关联 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>male<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Male<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>male<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>female<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Female<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>female<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token comment"><!-- 隐式 关联 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Male <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Female <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交表单<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/7f05b282c8f24b34bf626c4e5cc0b6d8.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/7f05b282c8f24b34bf626c4e5cc0b6d8.gif" alt="在这里插入图片描述" width="851" height="57"></a></p> <hr> <h4>⑴ for 属性: 绑定 关联标签 (搭配 被关联标签的 id )</h4> <ul> <li><strong><code><label></code> 标签的 <code>for</code> 关联属性</strong> <ul> <li>如何让 <code>label</code>标注标签的内容 与 表单元素绑定 ? <ul> <li><strong>关联</strong>: 使用 <code>for</code> 关联属性 <ul> <li>① 隐式 关联 <ul> <li>将表单元素,放在 <code><label></code> 标签内部,作为标签的内容 <ul> <li>不需要<code> for</code> 属性，它的关联控件也不需要 <code>id </code>属性</li> </ul> </li> <li><code><input></code> 标签 放在 <code><label></code> 标签中,作为<code><label></code> 标签的内容</li> </ul> </li> <li>② 显式 关联 <ul> <li><code><label></code> - <code>for</code>属性的属性值 = 关联控件 的<code>id</code>属性值。</li> <li>关键词： <code>for</code>属性，<code>id</code>属性。</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><strong>关联控件的 数目 和匹配原则</strong>: <ul> <li><strong>只关联一个控件</strong>. 一个<code><label></code> 只能关联到 一个控件 1:1,( 但 一个输入<code><input></code> 可以 与多个<code><label></code>相关联,1:n) 。 <ul> <li>即 <code><label></code>标签可以有多个，但被关联的控件，只能有一个。</li> </ul> </li> <li><strong>匹配第一个 控件</strong>: 如果有多个控件 <code>id</code>属性值相同，匹配哪个控件？ <ul> <li>一般 <code>id</code>属性值应该是唯一。如果不唯一，<code>id</code>与<code>for</code>属性值 匹配的第一个元素 是这个<code>label</code>元素的 带标签控件(如果它是一个可标注的 元素)。</li> </ul> </li> <li><strong>哪些控件 是不会被匹配的？</strong> <ul> <li><strong>不可标注</strong>: 如果控件不是可标注的，那么<code>for</code>属性就没有作用。</li> <li><strong>不是第一个匹配的</strong>: 如果还有其他元素 先匹配了<code>id</code>值，那么不是第一个,在文档的后面元素，将不考虑它们。</li> </ul> </li> </ul> </li> <li><strong>关联 单击事件</strong>: 当单击<code><label></code>时，关联的标签 也会出发 相应的单击事件。一般会获得输入焦点。</li> <li><strong><code><label></code>的使用 和访问性</strong> <ul> <li><strong>干扰激活</strong>: 不要 将交互式元素(如锚点<code><a></code>或按钮<code><button></code>) 放在标签中。这样做 使用户 很难激活 与标签相关的表单输入。 <ul> <li>这就意味着 交互式控件，如 <code><button></code> 不能使用隐式关联，只能用 label-<code>for</code>属性关联。</li> <li>为什么 交互式控件一般 也不需要 <code><label></code>来标注说明？ <ul> <li>具有<code>type="button"</code>声明和有效值<code>value</code>属性的<code><input></code>元素，不需要与之关联的标签。这样做实际上可能会 干扰辅助技术 解析按钮输入的方式。这同样适用于<code><button></code>元素。</li> </ul> </li> </ul> </li> <li><strong>干扰 辅助技术</strong>: 不要 将标题元素<code><h1>,<h2>...</code> 放置在<code><label></code>中, 会干扰许多 辅助技术，因为标题通常用作 导航辅助。</li> <li><strong>总结</strong>：优先 使用 label-<code>for</code>属性 进行显式关联，把其他标签放在 <code><label></code>标签中可能会出现各种问题，造成访问性问题。 <ul> <li>为什么 同为交互式的标签之间，一般互不嵌套？ <ul> <li>因为各自都有默认行为，响应的时候 容易出问题，两个操作，该执行哪个？如<code><label></code>标签能使关联控件获得输入焦点，某种意义来说，也是一种交互，有行为的。</li> </ul> </li> <li><strong>表单 标题</strong>: 如果表单 或表单的某个部分 需要标题，如何设置？ <ul> <li>可以放置在<code><fieldset></code>中的<code><legend></code>元素中。</li> </ul> </li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>请点击文本标记之一，就可以触发相关控件：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>显式的联系<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span>：label_for=input_id<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>SSN<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>安全代码:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>SocSecNum<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>SSN<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>隐式的联系<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span>：input 元素 放在 label标签内部<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>出生日期: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DofB<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/8521de53347d41188b7b160e9fc7cbb0.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/8521de53347d41188b7b160e9fc7cbb0.gif" alt="【表单标签（知识点超全版本）】_第83张图片" width="371" height="141" style="border:1px solid black;"></a></p> <ul> <li>输出: <ul> <li>两种方式下,点击关联文本,都会让 关联标签 获得输入焦点。</li> </ul> </li> </ul> <hr> <h3>1.11 ★ fieldset 将 表单的 相关联元素 分组 （legend 表单分组说明）</h3> <ul> <li>用于 <ul> <li>如何将 表单的相关联的元素 分组 ?(表单元素分组)</li> <li>组合 相关元素 <ul> <li>使用 <code><fieldset></code>表单元素分组 标签</li> <li>相关元素 一般是什么？ <ul> <li>一般是 <code><label></code>和它关联的控件，如果有多对，可以作为一个分组。</li> <li>一般只要是相关联的，可以归于一类的信息，也可以分一组。</li> </ul> </li> <li><strong>表单元素 分组</strong>:在表单中 对多个控件 和标签(<code><label></code>)进行分组。 <ul> <li><a href="http://img.e-com-net.com/image/info8/cc56626d698e4023bf4deb54aa8ab0a5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cc56626d698e4023bf4deb54aa8ab0a5.jpg" alt="【表单标签（知识点超全版本）】_第84张图片" width="209" height="119" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>请选择您最喜欢的宠物：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> <span class="token comment"><!--(label[for]+input[type=radio id])*5--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>猫咪<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>狗狗<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hamster<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>仓鼠<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hamster<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>parrot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>鹦鹉<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>parrot<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> </code></pre> <ul> <li> <p><strong>分组 显示外观</strong>: <code><fieldset></code>表单元素分组 标签的显示</p> <ul> <li> <p>当一组表单元素 放到 <code><fieldset></code>表单元素分组 标签内时，一般有特殊的边界、3D 效果，或者甚至可创建 一个子表单 来处理这些元素。</p> <ul> <li><a href="http://img.e-com-net.com/image/info8/a7b74bd2c3984a8a9c95517c0e841a25.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a7b74bd2c3984a8a9c95517c0e841a25.jpg" alt="【表单标签（知识点超全版本）】_第85张图片" width="200" height="117" style="border:1px solid black;"></a></li> </ul> </li> <li> <p><strong>凹槽边框 和内边距</strong>: 默认情况下，在一些浏览器中 内容周围有 <code>2px</code>的凹槽边框 和少量的默认内边距。<br> <strong>元素的 默认大小</strong>: 为 <code>min-inline-size: min-content</code>。</p> </li> </ul> </li> <li> <p><strong>表单分组 标题(说明)</strong>: 如何为 <code>fieldset</code> 表单元素分组 组合的那些表单元素 定义一个标题 ?</p> <ul> <li>使用 <code><legend></code>表单分组标题(说明) 标签</li> <li>legend ,美 /ˈledʒənd/ 说明,作为<code><fieldset></code>的子元素</li> <li><a href="http://img.e-com-net.com/image/info8/38b798aebf464f649fa10e0f07cf88c4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/38b798aebf464f649fa10e0f07cf88c4.jpg" alt="【表单标签（知识点超全版本）】_第86张图片" width="193" height="117" style="border:1px solid black;"></a></li> </ul> </li> <li> <p><strong>新属性</strong>:HTML 4.01 与 HTML 5 之间的差异</p> <ul> <li>HTML5 拥有如下属性：<code>disabled、form、name</code>，HTML 4.01 中 不支持这些属性</li> </ul> </li> <li> <p><strong>示例1</strong>: 给表单中的相关元素 进行分组：</p> </li> <li> <p><strong>嵌套关系</strong></p> <ul> <li><code><form></code>表单 标签 <ul> <li><code><fieldset> </code>表单分组 标签 <ul> <li><code><legend> </code>表单分组标题</li> <li><code><input> type</code> 输入标签</li> </ul> </li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>健康信息<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> 身高：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> 体重：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/cb8155ed16984ab8b95cfbfcc439ab84.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/cb8155ed16984ab8b95cfbfcc439ab84.png" alt="在这里插入图片描述" width="630" height="75"></a></p> <ul> <li> <p><code><fieldset></code>表单元素分组 标签的属性 有哪些 ?</p> </li> <li> <p><strong>表单分组 标签: 新属性</strong>,HTML 4.01 与 HTML 5 之间的差异</p> <ul> <li>HTML5 拥有如下属性：<code>disabled、form、name</code>，HTML 4.01 中不支持这些属性。</li> </ul> </li> </ul> <table> <thead> <tr> <th align="left">属性名</th> <th align="left">属性值</th> <th align="left">用于</th> </tr> </thead> <tbody> <tr> <td align="left">① disabled</td> <td align="left">= disabled</td> <td align="left">规定应该<strong>禁用</strong> fieldset。</td> </tr> <tr> <td align="left">② form</td> <td align="left">=form_id</td> <td align="left">规定 fieldset <strong>所属</strong>的一个或多个<strong>表单</strong>。</td> </tr> <tr> <td align="left">③ name</td> <td align="left">=value</td> <td align="left">规定 fieldset 的<strong>名称</strong>。</td> </tr> </tbody> </table> <ul> <li><strong>示例2</strong>: 一个禁用的 表单元素分组</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span> <span class="token attr-name">disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>个人信息:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> 名字: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> 邮箱: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> 出生日期: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/45cfa11aa0a54835b9a159455d201e2d.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/45cfa11aa0a54835b9a159455d201e2d.png" alt="【表单标签（知识点超全版本）】_第87张图片" width="635" height="135" style="border:1px solid black;"></a></p> <ul> <li>输出: <ul> <li><strong>可选中的 文本</strong>: 禁用的表单元素分组,只有 分组的标题文本 可以选中</li> <li><strong>不可选中的 文本</strong>: 分组内的元素和文本,都无法选中和点击 (部分浏览器中,禁用的元素文本 也可以被选中)</li> </ul> </li> <li><strong>禁用<code>disabled</code> 属性</strong> <ul> <li><strong>不可编辑 可被提交</strong>: 如果设置了 这个布尔属性，那么<code><fieldset></code>的后代 的所有表单控件 都将被禁用，这意味着它们不可编辑，但是与表单控件上的<code>disabled</code>属性相比，它们将与<code><form></code>一起提交。</li> <li><strong>不禁用 表单分组的标题(说明)</strong>：<code><legend></code>元素中的表单元素 不会被禁用。 <ul> <li><code><legend></code>标签的内容 可被选中。</li> <li><a href="http://img.e-com-net.com/image/info8/8c5f17da2f8045d0a940e430031de06a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8c5f17da2f8045d0a940e430031de06a.jpg" alt="【表单标签（知识点超全版本）】_第88张图片" width="251" height="111" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> </ul> <hr> <ul> <li><strong>示例3</strong>: 一个位于表单外的 表单元素分组,绑定在表单上</li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/example/html5/demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbyform<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 你最喜欢的小吃是什么? <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>snack<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>下面的 fieldset 位于 form 元素之外，但仍然是表单的一部分。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span> <span class="token attr-name">form</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobbyform<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>个人信息:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> 名字: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> 邮箱: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> 出生日期: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>birthdate<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/f0afbb0d1bc34cc4a7773d4628fdb001.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f0afbb0d1bc34cc4a7773d4628fdb001.jpg" alt="【表单标签（知识点超全版本）】_第89张图片" width="641" height="263" style="border:1px solid black;"></a></p> <ul> <li>测试 <ul> <li>理论上,点击表单内的提交按钮,应该也会提交表单元素分组内的 输入内容 <ul> <li>在 360和谷歌,IE 浏览器中测试,并没有提交 表单元素分组 中的输入内容(因为暂不支持 fieldset-<code>form</code>属性 吗 ?不是。)</li> </ul> </li> <li><strong>fieldset-<code>form</code>属性 会自动地被所有的子标签继承吗？</strong> 即，<code><fieldset></code> 绑定所属表单后，它包含的子标签 <code><input></code> 元素 会不会自动绑定表单了？ <ul> <li>不会。所以，只设置了 fieldset-<code>form</code>属性 ，并不能让分组中的 其他标签也一起绑定到 某个所属的表单，子标签的所属表单 需要<strong>具体指定</strong>。</li> </ul> </li> <li><strong>如何让 <code><fieldset></code> 中的 <code><input></code> 元素与表单关联？</strong> <ul> <li>要直接在<code><input></code>元素上使用<code>form</code>属性。</li> <li>如：<code><input type="text" name="name" form="hobbyform"/></code>，这个时候 输入的名字才会被提交。</li> <li><a href="http://img.e-com-net.com/image/info8/8e633dec39f54a96ab6d8870b65432a0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8e633dec39f54a96ab6d8870b65432a0.jpg" alt="【表单标签（知识点超全版本）】_第90张图片" width="429" height="122" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> </ul> <hr> <ul> <li><strong>示例4</strong>: 一个简单的综合案例-学生档案信息</li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>学生档案<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stuname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>姓<span class="token entity named-entity"> </span><span class="token entity named-entity"> </span> <span class="token entity named-entity"> </span><span class="token entity named-entity"> </span> <span class="token entity named-entity"> </span>名:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stuname<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>手<span class="token entity named-entity"> </span> 机 <span class="token entity named-entity"> </span>号:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>邮 <span class="token entity named-entity"> </span><span class="token entity named-entity"> </span><span class="token entity named-entity"> </span><span class="token entity named-entity"> </span><span class="token entity named-entity"> </span> 箱:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>collegename<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>所属学院:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>collegename<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>college<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>college<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>金融学院<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>金融学院<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>计算机学院<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>计算机学院<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>体育学院<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>体育学院<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>设计学院<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>设计学院<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>birthdata<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>出生日期:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>birthdata<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grade<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>成 <span class="token entity named-entity"> </span><span class="token entity named-entity"> </span><span class="token entity named-entity"> </span><span class="token entity named-entity"> </span> <span class="token entity named-entity"> </span>绩:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grade<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交表格<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>清空填写数据<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/0bcfd9023f3b401cabd3b69f323c20a9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0bcfd9023f3b401cabd3b69f323c20a9.jpg" alt="【表单标签（知识点超全版本）】_第91张图片" width="650" height="268" style="border:1px solid black;"></a></p> <hr> <h3>1.12 ★ datalist 定义 一组 数据列表 (搭配 option[value] 标签)</h3> <ul> <li> <p>用于</p> <ul> <li>如何定义 一组数据列表 ，让其他控件有 一组可选的选项集？ <ul> <li>使用 <code><datalist></code>数据列表 标签</li> <li><strong>一组 可用的值</strong>: 元素包含一组<code><option></code>元素，这些选项标签在其他控件 表示 可用的值，就是一组选项。 <ul> <li><a href="http://img.e-com-net.com/image/info8/c4c6785298504003a62847d6b6778648.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c4c6785298504003a62847d6b6778648.jpg" alt="【表单标签（知识点超全版本）】_第92张图片" width="271" height="223" style="border:1px solid black;"></a></li> </ul> </li> </ul> </li> </ul> </li> <li> <p>使用</p> <ul> <li><strong>可能的值</strong>: 如何为 <code>input </code>输入标签 预设一组选项（可能的值 ）? <ul> <li>使用 <code><datalist></code>数据列表 标签</li> </ul> </li> </ul> </li> <li> <p>显示</p> <ul> <li> <p><code>datalist</code> 数据列表 和子元素<code><option></code> 选项标签的内容 会显示吗 ?</p> </li> <li> <p>不同浏览器中 不一样,有浏览器差异。</p> <ul> <li> <p>一起显示: 谷歌浏览器会 把<code>value</code>属性值和 <code>option</code>标签内容或<code>label</code>属性值,一起显示给用户。</p> <ul> <li><img src="http://img.e-com-net.com/image/info8/8d10bcc9886b429eabb2fa786d190e08.jpg" alt="在这里插入图片描述" width="0" height="0"></li> </ul> </li> <li> <p>只显示 <code>option</code>标签内容：两个都有时，Firefox 只显示<code>option</code>标签内容。没有标签内容和<code>label</code>属性值时，会显示<code>value</code>属性值。</p> <ul> <li> <p><a href="http://img.e-com-net.com/image/info8/fd10e4aabb0a42afab9cbf3bc9e01386.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fd10e4aabb0a42afab9cbf3bc9e01386.jpg" alt="【表单标签（知识点超全版本）】_第93张图片" width="332" height="139" style="border:1px solid black;"></a></p> </li> <li> <p><a href="http://img.e-com-net.com/image/info8/938fe3ab295b4d2bb387e0811080fb1c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/938fe3ab295b4d2bb387e0811080fb1c.jpg" alt="【表单标签（知识点超全版本）】_第94张图片" width="336" height="142" style="border:1px solid black;"></a></p> </li> </ul> </li> </ul> </li> <li> <p><strong>不要指定 数据列表的 选项<code><option></code>标签内容和 option-<code>label</code>属性</strong>: 只设置 <code>value</code>属性值。</p> </li> </ul> </li> </ul> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets-choice<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请选择一个喜欢的宠物：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets-choice<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all-pets<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all-pets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>狗狗<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>狗砸<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>狗狗<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>猫咪<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>猫猫<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>猫咪<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hamster<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>仓鼠<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> <span class="token comment"><!--没有 label属性，也没有标签内容时，只会显示value的属性值--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets-choice2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请选择一个喜欢的宠物：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets-choice2<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all-pets2<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all-pets2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hamster<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> <span class="token comment"><!--没有标签内容，但value属性和label属性同时存在时，火狐只显示label属性值，谷歌两个都显示，浏览器仍然有差异--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets-choice3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请选择一个喜欢的宠物：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets-choice3<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all-pets3<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all-pets3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>狗砸<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>狗狗<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>猫猫<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>猫咪<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>鼠砸<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hamster<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>仓鼠<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> </code></pre> <ul> <li> <p>没有 <code>label</code>属性，也没有标签内容时，会显示什么？</p> <ul> <li>只会显示<code>value</code>的属性值。</li> <li><a href="http://img.e-com-net.com/image/info8/dd462328086f45cfb58b2456c89b8b38.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/dd462328086f45cfb58b2456c89b8b38.jpg" alt="【表单标签（知识点超全版本）】_第95张图片" width="319" height="165" style="border:1px solid black;"></a></li> </ul> </li> <li> <p><code><option></code> 没有标签内容，但<code>value</code>属性和<code>label</code>属性同时存在时，火狐只显示<code>label</code>属性值，谷歌两个都显示，浏览器仍然有差异。</p> </li> <li> <p>谷歌</p> <ul> <li><a href="http://img.e-com-net.com/image/info8/7ce0a79b99024c70adaa551bacbeaf2f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7ce0a79b99024c70adaa551bacbeaf2f.jpg" alt="【表单标签（知识点超全版本）】_第96张图片" width="309" height="202" style="border:1px solid black;"></a></li> </ul> </li> <li> <p>火狐</p> <ul> <li><a href="http://img.e-com-net.com/image/info8/bc2948dec23d44c28ab65687c56990c2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bc2948dec23d44c28ab65687c56990c2.jpg" alt="在这里插入图片描述" width="335" height="98"></a></li> </ul> </li> <li> <p><code><datalist></code>中的<code><option></code>的显示问题，目前有3种情况，</p> <ul> <li>① <code><option></code> 没有标签内容，但<code>value</code>属性和<code>label</code>属性同时存在时 <ul> <li>火狐只显示<code>label</code>属性值，谷歌两个都显示，浏览器仍然有差异。</li> </ul> </li> <li>② 没有 <code>label</code>属性，但<code><option></code> 有标签的内容和<code>value</code>的属性值 <ul> <li>火狐只显示标签内容，谷歌会一起显示，浏览器有差异。</li> </ul> </li> <li>③ 没有 <code>label</code>属性，也没有标签内容时 <ul> <li>都只会显示<code>value</code>的属性值。</li> </ul> </li> </ul> </li> <li> <p><strong>所以，解决浏览器兼容问题的方法是</strong>：</p> <ul> <li><code><datalist></code>标签中的<code><option></code>标签，<strong>只设置 <code>value</code>属性值</strong>，而且<code>value</code>属性可用于传递值。<code>label</code>属性和标签内容，都不设置。</li> <li>注意：数据列表 <code><datalist></code> 没有绑定控件时，用户能看见吗？ <ul> <li>看不见。绑定后，点击所绑控件，才会显示。</li> </ul> </li> </ul> </li> </ul> <hr> <h4>♣ 绑定 数据列表 id 属性(搭配 input 标签的 list 属性)</h4> <ul> <li> <p><strong>绑定 数据列表</strong>: 如何把 <code><input></code>输入标签 和 数据列表<code>datalist</code> 绑定在一起 ?</p> <ul> <li><code><input type="text" list="cars" /></code> = <code><datalist id="cars"></code> <ul> <li>input-<code>list</code>属性值 = datalist-<code>id </code>属性值</li> <li><code><input></code>想绑定数据列表，要派出哪个员工负责？ <ul> <li>所属列表<code>list</code>属性。</li> </ul> </li> <li><code>list</code>属性找 数据列表<code><datalist></code> 的哪个员工？ <ul> <li><code>id</code>属性。</li> </ul> </li> <li>如何达成一致？ <ul> <li>两家公司的员工 签同一个合同，即 属性值相同。<code>list</code>属性值=<code>id</code>属性值。</li> </ul> </li> </ul> </li> </ul> </li> <li> <p><strong>示例1</strong>: 下面是一个<code><input></code>输入元素，<code><datalist></code> 数据列表中 描述 这个文本框 可能的值：</p> <ul> <li>没有绑定这个<code><input></code>输入元素的话,数据列表<code><datalist></code> 中的选项会显示吗？ <ul> <li>不会显示的,绑定了,才会显示.</li> </ul> </li> </ul> </li> <li> <p>为了避免浏览器兼容问题：<code><datalist></code>中的<code><option></code>的标签内容应该 全部删除。</p> <ul> <li>谷歌中，<code>value</code>属性值和标签内容 两个都显示。</li> <li>火狐中，只显示标签内容。 <ul> <li><a href="http://img.e-com-net.com/image/info8/4fc2ae6fa5094b12a6c2c09d9b6df162.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4fc2ae6fa5094b12a6c2c09d9b6df162.jpg" alt="在这里插入图片描述" width="149" height="88"></a></li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cars<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选择一种车<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cars<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>BMW<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>宝马<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Ford<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>福特<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Volvo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>沃尔沃<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/d653bc9cfbf2416ebe73e42fed91b02b.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/d653bc9cfbf2416ebe73e42fed91b02b.gif" alt="【表单标签（知识点超全版本）】_第97张图片" width="371" height="141" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/3f81d47c2acf4140b2eafabda71bddee.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/3f81d47c2acf4140b2eafabda71bddee.gif" alt="【表单标签（知识点超全版本）】_第98张图片" width="371" height="141" style="border:1px solid black;"></a></p> <ul> <li>测试 <ul> <li><strong>位置</strong>:数据列表 会像下拉列表一样 点击后,显示在输入框的下方</li> <li><strong>颜色样式</strong>: <code>datalist </code>数据列表中 <code>option</code> 选项,粗体显示 option-<code>value</code>的值,<code>option</code> 选项标签的内容,显示在后面,灰色 字体比较细</li> <li><strong>自动完成 提示</strong>: 在文本框输入,会出现数据列表中 近似值的提示,比如,输入 f,提示 Ford</li> </ul> </li> </ul> <hr> <ul> <li><strong>总结:<code><select></code>下拉列表 和<code><datalist></code>数据列表的区别 有哪些 ?</strong> <ul> <li>① <strong>选项 显示</strong> <ul> <li><strong>默认 显示</strong>: 下拉列表<code>select</code>中的 标签文本,会默认 显示出来</li> <li><strong>绑定 才显示</strong>: 数据列表的选项,默认不显示的,只有 <code><input></code>输入标签 绑定了数据列表,才会在被绑定的元素上显示,作为预选值.</li> </ul> </li> <li>② <strong>选项</strong> <ul> <li>下拉列表和数据列表选项,都是用 <code><option> </code>选项 标签</li> <li><code>select>option,datalist>option</code></li> </ul> </li> </ul> </li> <li><strong><code><select>,<datalist></code> 中的 选项<code><option></code>的区别</strong>: <code>value</code>属性 和标签内容 <ul> <li>① <strong>显示给用户的是 标签内容</strong>: <code><select></code>中的 <code><option></code>,一般 <code>value</code>属性和 标签内容,都会设置,显示给用户的是 标签内容.</li> <li>② <strong>显示给用户的是 <code>value</code>属性值</strong>: <code><datalist></code>中的<code><option></code>,一般只设置<code>value</code>属性,不设置标签内容, 显示给用户的就是<code>value</code>的属性值（也不能设置<code>label</code>属性）,标签内容和<code>label</code>属性 一般都不设置，防止出现 浏览器显示的兼容问题。</li> </ul> </li> </ul> <hr> <h3>1.13 ★ output 定义 输出结果的 容器</h3> <ul> <li> <p>用于</p> <ul> <li>如何定义 不同类型的输出 ?比如 脚本的输出 <ul> <li>使用 <code><output></code> 输出 标签</li> <li><strong>结果的 容器 (计算 结果+ 用户操作 结果)</strong>: 是一个容器元素，站点或应用程序 可以将 计算结果 或用户操作的结果 注入其中。</li> </ul> </li> </ul> </li> <li> <p><strong>浏览器支持</strong></p> <ul> <li><a href="http://img.e-com-net.com/image/info8/683a36d1e0104923939aded932cbbd78.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/683a36d1e0104923939aded932cbbd78.jpg" alt="【表单标签（知识点超全版本）】_第99张图片" width="650" height="223" style="border:1px solid black;"></a></li> </ul> </li> <li> <p><strong>form> output 输出标签的属性 有哪些?</strong></p> </li> </ul> <table> <thead> <tr> <th align="left">属性名</th> <th align="left">属性值</th> <th align="left">用于</th> </tr> </thead> <tbody> <tr> <td align="left">for</td> <td align="left">= element_id，作为输入值的标签 的 <code>id</code>，多个<code>id</code> 用空格分隔。</td> <td align="left">定义输出域 <strong>相关</strong>的一个或多个<strong>元素</strong>。</td> </tr> <tr> <td align="left">form</td> <td align="left">=form_id</td> <td align="left">定义输入字段 <strong>所属</strong>的一个或多个<strong>表单</strong>。</td> </tr> <tr> <td align="left">name</td> <td align="left">= name</td> <td align="left">定义对象的唯一<strong>名称</strong>。（表单提交时 使用）</td> </tr> </tbody> </table> <hr> <h4>⑴ for 属性: 绑定 输出关联的 标签 (搭配 标签 id)</h4> <ul> <li> <p><strong><code><output></code>输出 标签的 <code>for</code> 关联属性</strong></p> <ul> <li>属性值 <ul> <li>output-<code>for="element_id "</code></li> <li><strong>id 列表</strong>: 多个 <code>id</code> 用什么分隔？ <ul> <li>空格。</li> <li><strong>提供 输入值</strong>: 表示 这些<code>id</code>的元素 为计算 提供了输入值(或影响了 计算)。</li> </ul> </li> </ul> </li> </ul> </li> <li> <p>执行计算后 在哪里输出结果？</p> <ul> <li>在 <code><output></code> 输出元素中显示结果。</li> </ul> </li> <li> <p>输出结果<code><output></code>标签，默认什么样式？</p> <ul> <li>无任何特殊样式，有结果，也显示为一段普通的文本。</li> <li><img src="http://img.e-com-net.com/image/info8/965ddd7b278e4d0da6091de793167456.jpg" alt="在这里插入图片描述" width="0" height="0"></li> </ul> </li> <li> <p><strong>嵌套关系</strong></p> <ul> <li><code><form> oninput</code> <ul> <li><code><input> type id value</code></li> <li><code><output> name for</code></li> </ul> </li> <li><strong>嵌套关系</strong> <ul> <li><code>output-for="input-id input-id"</code></li> </ul> </li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">oninput</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>x.value=parseInt(a.value)+parseInt(b.value)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 0<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>100 +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> =<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>x<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>输出结果的位置<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>output</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/b29c9cb71c174984a640d8c353b06573.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/b29c9cb71c174984a640d8c353b06573.gif" alt="【表单标签（知识点超全版本）】_第100张图片" width="585" height="125" style="border:1px solid black;"></a></p> <ul> <li>测试 <ul> <li>IE中 不支持 <code>output </code>输出标签,结果不会显示在 输出标签中</li> <li>支持的浏览器,结果会在 <code>output</code> 输出 标签中显示结果,替代原本的 标签内容</li> </ul> </li> <li><strong>知识拓展</strong></li> <li><strong><code>oninput</code> 事件</strong>: 在用户 输入时(值改变时)触发。<code>oninput="一个表达式等式"</code> <ul> <li><strong>触发: 值改变时</strong>: 该事件在 <code><input></code> 或<code> <textarea></code>元素的值 发生 改变时触发。</li> <li><strong>触发 区别</strong>: 该事件类似于 <code>onchange </code>事件。不同之处在于<code> oninput</code> 事件在元素 <strong>值发生变化时</strong> 立即触发， <code>onchange</code> 在元素 <strong>失去焦点时</strong>触发。</li> </ul> </li> </ul> <hr> <ul> <li>⑵ <strong><code><output></code>输出 标签的 <code>form</code>表单绑定 属性</strong> <ul> <li>位于表单之外的 <code>output</code> 输出标签(绑定表单后,不在表单内部,也会显示 输出结果)</li> </ul> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/demo/demo_form.asp<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numform<span class="token punctuation">"</span></span> <span class="token attr-name">oninput</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>x.value=parseInt(a.value)+parseInt(b.value)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 0<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>100 +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>下面的一个 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</span><span class="token punctuation">></span></span> 元素位于表单之外的，但仍然属于表单的一部分：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</span> <span class="token attr-name">form</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numform<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>x<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a b<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span>red</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>输出结果的位置<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>output</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/0afee5533e304fddb4861b3f0745278f.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/0afee5533e304fddb4861b3f0745278f.gif" alt="【表单标签（知识点超全版本）】_第101张图片" width="492" height="224" style="border:1px solid black;"></a></p> <ul> <li><code><output></code>值、名称和内容会在表单提交期间 提交吗？ <ul> <li>不会。</li> </ul> </li> </ul> <hr> <ul> <li><strong>更新</strong> <ul> <li>2022.05.20 此次删除了一些过时的内容，更新了更多的示例和图片，并对重点 都进行了着重强调。方便大家理解和记忆。</li> </ul> </li> <li><strong>捐助</strong>: 喜欢这篇文章吗? 创作不易,捐助此文,向团团 表示鼓励和支持吧~❤<br> <img src="http://img.e-com-net.com/image/info8/7258375ff32e47c6a423ce77c55b2e52.jpg" alt="在这里插入图片描述" width="0" height="0"></li> <li><strong>捐助二维码:</strong><br> <img src="http://img.e-com-net.com/image/info8/2a19267cc342447f823fd07f340c1bcc.png" alt="在这里插入图片描述" width="0" height="0"></li> </ul> <hr> <ul> <li><strong>参考文档</strong> <ul> <li>W3School 教程</li> <li>MDN HTML 教程</li> <li>MIME 百度百科介绍</li> <li>MIME 参考手册</li> </ul> </li> </ul> <hr> <ul> <li><strong>友情链接</strong> <ul> <li>① 【HTML 标签的 参考列表 (按字母排列)】</li> <li>② 【HTML 标签的 参考列表 (按 功能分类 排列)】</li> </ul> </li> </ul> <hr> <ul> <li><strong>感谢</strong>：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~</li> <li><strong>欢迎指正</strong>: 如果发现 有需要 更正的细节问题,欢迎小可爱们指正,谢谢大家 ~╮(￣▽￣)╭</li> </ul> <hr> <ul> <li><strong>转载 请注明出处 ,Thanks♪(･ω･)ﾉ</strong> <ul> <li>作者：Hey_Coder</li> <li>来源：CSDN</li> <li>原文：https://blog.csdn.net/VickyTsai/article/details/89679669</li> <li>版权声明：本文为博主原创文章，转载请附上博文链接！</li> </ul> </li> </ul> <p><img src="http://img.e-com-net.com/image/info8/b7570cd976e8440fa310887790438973.jpg" alt="在这里插入图片描述" width="0" height="0"></p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1720600325833961472"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(【HTML】,html标签,表单标签,html标签详解,表单标签详解,input标签)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> <span class="text-muted">某公司摸鱼前端</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835505606245576704.htm" title="Python中os.environ基本介绍及使用方法" target="_blank">Python中os.environ基本介绍及使用方法</a> <span class="text-muted">鹤冲天Pro</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835490218845761536.htm" title="Python爬虫解析工具之xpath使用详解" target="_blank">Python爬虫解析工具之xpath使用详解</a> <span class="text-muted">eqa11</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中，数据提取是一个至关重要的环节。xpath作为一门</div> </li> <li><a href="/article/1835484293607026688.htm" title="【Git】常见命令(仅笔记)" target="_blank">【Git】常见命令(仅笔记)</a> <span class="text-muted">好想有猫猫</span> <a class="tag" taget="_blank" href="/search/Git/1.htm">Git</a><a class="tag" taget="_blank" href="/search/Linux%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">Linux学习笔记</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/elasticsearch/1.htm">elasticsearch</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>文章目录创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用`.gitigore`文件让git不追踪一些文件标签创建/初始化本地仓库gitinit添加本地仓库配置项gitconfig-l#以列表形式显示配置项gitconfiguser.name"ljh"#配置user.namegitconfiguser.email"123123@qq.c</div> </li> <li><a href="/article/1835469860977602560.htm" title="十大可以挣钱的软件(盘点当前赚钱快还靠谱的7个赚钱软件)" target="_blank">十大可以挣钱的软件(盘点当前赚钱快还靠谱的7个赚钱软件)</a> <span class="text-muted">高省APP大九</span> <div>挣钱软件可以用“泛滥”来形容了，网上各式各样的打着“赚钱”标签的挣钱软件着实让人眼花缭乱，不知道的还以为随便找个软件玩玩就能发家致富，体验过的人却看得清清楚楚明明白白，挣钱软件哪有看到的那么“繁荣”，很多不过是标榜着赚钱来忽悠老百姓的“假”软件罢了！很多网友都在抱怨想找个真正能赚钱的软件太难了，有人花费了大量的时间和精力也没找到个称心如意的挣钱软件，不过现在你是幸运的，本篇千秋将为大家盘点当前赚钱</div> </li> <li><a href="/article/1835457443690278912.htm" title="[Python] 数据结构 详解及代码" target="_blank">[Python] 数据结构 详解及代码</a> <span class="text-muted">AIAdvocate</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E8%A1%A8/1.htm">链表</a> <div>今日内容大纲介绍数据结构介绍列表链表1.数据结构和算法简介程序大白话翻译,程序=数据结构+算法数据结构指的是存储,组织数据的方式.算法指的是为了解决实际业务问题而思考思路和方法,就叫:算法.2.算法的5大特性介绍算法具有独立性算法是解决问题的思路和方式,最重要的是思维,而不是语言,其(算法)可以通过多种语言进行演绎.5大特性有输入,需要传入1或者多个参数有输出,需要返回1个或者多个结果有穷性,执行</div> </li> <li><a href="/article/1835450511172661248.htm" title="高中抓住这两招，帮你实现从学渣到学霸的逆袭" target="_blank">高中抓住这两招，帮你实现从学渣到学霸的逆袭</a> <span class="text-muted">以读攻独</span> <div>富兰克林曾说：“宝贝放错了地方便是废物。”一句话戳中了“位置”的重要性。大多数人，最初对位置的明显感受，似乎就来源于上高中时的座位：成绩好的，坐前排，那里安静，学习氛围浓，受关注度高；成绩差的坐后面，嘈杂，充斥着汗味、食品味、香水味，也经常被点名。所以，位置不仅代表了分数，也给你打上了“学渣”或“学霸”的标签。在《逆袭》这本书中，就真实地讲述一个参加了2014年高考的高中生，用三年的奋斗史，从班级</div> </li> <li><a href="/article/1835448851775975424.htm" title="今日分享：有的孩子家长常常在对于小朋友老是说谎，还特别爱推卸责任，很头痛，不知道该怎么办！" target="_blank">今日分享：有的孩子家长常常在对于小朋友老是说谎，还特别爱推卸责任，很头痛，不知道该怎么办！</a> <span class="text-muted">雨燕Cassie</span> <div>其实六岁以前都不叫撒谎，只能叫做逃避和害怕，因为他们都是没有撒谎的这个概念，家长所谓的撒谎只能说是因为做错了事情，怕受到责罚而找一个「台阶」给自己一下而已，所以家长不能给孩子一个贴上撒谎的这个标签，如果说孩子出现家长所说的撒谎，我们应该做的是：1.允许孩子将事情的原委进行一个表达，给孩子说明的机会，不提示孩子说谎，不急著批评孩子。2.不使用问句，不恐吓和严刑逼供，耐心的以故事或者以分析的形式和孩子</div> </li> <li><a href="/article/1835444076007223296.htm" title="JAVA·一个简单的登录窗口" target="_blank">JAVA·一个简单的登录窗口</a> <span class="text-muted">MortalTom</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计</div> </li> <li><a href="/article/1835440589164867584.htm" title="项目：事半功倍的法宝" target="_blank">项目：事半功倍的法宝</a> <span class="text-muted">小小效能</span> <div>行动的三大流程：记录、排程和执行，也讲了易效能的4D原则以及T-step标签法。这些流程和方法能够解决我们眼前的一地鸡毛，让我们有更多时间和精力去关注更为长远的事情，完成工作、生活和人生中重要的项目。项目管理能够让我们围绕结果去做事情，达成事半功倍的效果，也就是做更少的事情，但达成更好的效果。如果我们能够不断地达成一个又一个的项目，那么我们的人生无疑会像滚雪球一样，在长坡道上面不断积累。一、项目的</div> </li> <li><a href="/article/1835436390200995840.htm" title="Table列表复现框实现【勾选-搜索-再勾选】" target="_blank">Table列表复现框实现【勾选-搜索-再勾选】</a> <span class="text-muted">～四时春～</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>Table列表复现框实现【勾选-搜索-再勾选】概要整体架构流程代码实现技术细节注意参考文献概要最近在开发时遇到一个问题，在进行表单渲染时，正常选中没有问题，单如果需要搜索选中时，一个是已选中的不会回填，二是在搜索的结果中进行选中，没有实现，经过排查，查找资料后实现。例如：整体架构流程具体的实现效果如下：代码实现{{scope.row.userName}}已选区{{userItem.userName</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> <span class="text-muted">有一只柴犬</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> <span class="text-muted">夜空_2cd3</span> <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835427813189054464.htm" title="解决Obsidian写笔记中的＜img＞标签无法显示图片的问题" target="_blank">解决Obsidian写笔记中的＜img＞标签无法显示图片的问题</a> <span class="text-muted">全能全知者</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>Obsidian中写md笔记如果使用标签会显示不出图案，后来才知道因为Obsidian的问题导致只能用绝对路径定位。所以我本人写了一个py插件，将md笔记里的img标签批量替换成Obsidian能够读取的形式。安装FixObsImgDpy:pipinstallFixObsImgDpy安装完成后在需要修复的md文件的父目录下运行命令:FixObsImgDpy就会自动修复父目录以下的全部md文件 仓库</div> </li> <li><a href="/article/1835421888088731648.htm" title="MyBatis 详解" target="_blank">MyBatis 详解</a> <span class="text-muted">阿贾克斯的黎明</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>目录目录一、MyBatis是什么二、为什么使用MyBatis（一）灵活性高（二）性能优化（三）易于维护三、怎么用MyBatis（一）添加依赖（二）配置MyBatis（三）创建实体类和接口（四）使用MyBatis一、MyBatis是什么MyBatis是一个优秀的持久层框架，它支持自定义SQL、存储过程以及高级映射。MyBatis免除了几乎所有的JDBC代码以及设置参数和获取结果集的工作。它可以通过简</div> </li> <li><a href="/article/1835412180422455296.htm" title="[实践应用] 深度学习之模型性能评估指标" target="_blank">[实践应用] 深度学习之模型性能评估指标</a> <span class="text-muted">YuanDaima2048</span> <a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7%E4%BD%BF%E7%94%A8/1.htm">工具使用</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%8D%9F%E5%A4%B1%E5%87%BD%E6%95%B0/1.htm">损失函数</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E8%AF%84%E4%BC%B0/1.htm">性能评估</a><a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a> <div>文章总览：YuanDaiMa2048博客文章总览深度学习之模型性能评估指标分类任务回归任务排序任务聚类任务生成任务其他介绍在机器学习和深度学习领域，评估模型性能是一项至关重要的任务。不同的学习任务需要不同的性能指标来衡量模型的有效性。以下是对一些常见任务及其相应的性能评估指标的详细解释和总结。分类任务分类任务是指模型需要将输入数据分配到预定义的类别或标签中。以下是分类任务中常用的性能指标：准确率(</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> <span class="text-muted">和自己一起成长</span> <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835401975269781504.htm" title="vue render 函数详解 (配参数详解)" target="_blank">vue render 函数详解 (配参数详解)</a> <span class="text-muted">你的眼睛會笑</span> <a class="tag" taget="_blank" href="/search/vue2/1.htm">vue2</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> <span class="text-muted">清风怎不知意</span> <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835394786899619840.htm" title="Dockerfile（1） - FROM 指令详解" target="_blank">Dockerfile（1） - FROM 指令详解</a> <span class="text-muted">小菠萝测试笔记</span> <a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>FROM指明当前的镜像基于哪个镜像构建dockerfile必须以FROM开头，除了ARG命令可以在FROM前面FROM[--platform=][AS]FROM[--platform=][:][AS]FROM[--platform=][@][AS]小栗子FROMalpine:latest一个dockerfile可以有多个FROM可以有多个FROM来创建多个镜像，或区分构建阶段，将一个构建阶段作为另</div> </li> <li><a href="/article/1835394725914439680.htm" title="3.1 损失函数和优化：损失函数" target="_blank">3.1 损失函数和优化：损失函数</a> <span class="text-muted">做只小考拉</span> <div>用一个函数把W当做输入，然后看一下得分，定量地估计W的好坏，这个函数被称为“损失函数”。损失函数用于度量W的好坏。有了损失函数的概念后，就可以定量的衡量W到底是好还是坏，要找到一种有效的方法来从W的可行域里，找到W取何值时情况最不坏，，这个过程将会是一个优化过程。损失函数L_i定义：通过函数f给出预测的分数和真实的目标（或者说是标签y），可以定量的描述训练样本预测的好不好，最终的损失函数是在整个数</div> </li> <li><a href="/article/1835390752381825024.htm" title="详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因" target="_blank">详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因</a> <span class="text-muted">hw_happy</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> <span class="text-muted">陈在天box</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div> </li> <li><a href="/article/1835387977480630272.htm" title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a> <span class="text-muted">Cavalier_01</span> <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</div> </li> <li><a href="/article/1835382685745377280.htm" title="html+css网页设计 旅游网站首页1个页面" target="_blank">html+css网页设计 旅游网站首页1个页面</a> <span class="text-muted">html+css+js网页设计</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div> </li> <li><a href="/article/127.htm" title="用MiddleGenIDE工具生成hibernate的POJO（根据数据表生成POJO类）" target="_blank">用MiddleGenIDE工具生成hibernate的POJO（根据数据表生成POJO类）</a> <span class="text-muted">AdyZhang</span> <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/MiddleGenIDE/1.htm">MiddleGenIDE</a> <div>推荐:MiddlegenIDE插件,   是一个Eclipse   插件.     用它可以直接连接到数据库,   根据表按照一定的HIBERNATE规则作出BEAN和对应的XML ，用完后你可以手动删除它加载的JAR包和XML文件!     今天开始试着使用</div> </li> <li><a href="/article/254.htm" title=".9.png" target="_blank">.9.png</a> <span class="text-muted">Cb123456</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>  “点九”是andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png 　　智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。 　　我们都知道android平台有多种不同的分辨率，很多控件的切图文件在被放大拉伸后，边</div> </li> <li><a href="/article/381.htm" title="算法的效率" target="_blank">算法的效率</a> <span class="text-muted">天子之骄</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E6%95%88%E7%8E%87/1.htm">算法效率</a><a class="tag" taget="_blank" href="/search/%E5%A4%8D%E6%9D%82%E5%BA%A6/1.htm">复杂度</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%9D%8F%E6%83%85%E5%86%B5%E8%BF%90%E8%A1%8C%E6%97%B6%E9%97%B4/1.htm">最坏情况运行时间</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7O%E9%98%B6/1.htm">大O阶</a><a class="tag" taget="_blank" href="/search/%E5%B9%B3%E5%9D%87%E6%83%85%E5%86%B5%E8%BF%90%E8%A1%8C%E6%97%B6%E9%97%B4/1.htm">平均情况运行时间</a> <div>算法的效率 效率是速度和空间消耗的度量。集中考虑程序的速度，也称运行时间或执行时间，用复杂度的阶(O)这一标准来衡量。空间的消耗或需求也可以用大O表示，而且它总是小于或等于时间需求。   以下是我的学习笔记：   1.求值与霍纳法则，即为秦九韶公式。   2.测定运行时间的最可靠方法是计数对运行时间有贡献的基本操作的执行次数。运行时间与这个计数成正比。 </div> </li> <li><a href="/article/508.htm" title="java数据结构" target="_blank">java数据结构</a> <span class="text-muted">何必如此</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>Java 数据结构 Java工具包提供了强大的数据结构。在Java中的数据结构主要包括以下几种接口和类： 枚举（Enumeration） 位集合（BitSet） 向量（Vector） 栈（Stack） 字典（Dictionary） 哈希表（Hashtable） 属性（Properties） 以上这些类是传统遗留的，在Java2中引入了一种新的框架-集合框架(Collect</div> </li> <li><a href="/article/635.htm" title="MybatisHelloWorld" target="_blank">MybatisHelloWorld</a> <span class="text-muted">3213213333332132</span> <div> //测试入口TestMyBatis package com.base.helloworld.test; import java.io.IOException; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession; import org.apache.ibat</div> </li> <li><a href="/article/762.htm" title="Java|urlrewrite|URL重写|多个参数" target="_blank">Java|urlrewrite|URL重写|多个参数</a> <span class="text-muted">7454103</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div> 个人工作经验！ 如有不当之处，敬请指点 1.0  web -info 目录下建立     urlrewrite.xml  文件 类似如下： <?xml version="1.0" encoding="UTF-8" ?>   <!DOCTYPE u</div> </li> <li><a href="/article/889.htm" title="达梦数据库+ibatis" target="_blank">达梦数据库+ibatis</a> <span class="text-muted">darkranger</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a> <div>--插入数据方面 如果您需要数据库自增... 那么在插入的时候不需要指定自增列. 如果想自己指定ID列的值, 那么要设置 set identity_insert  数据库名.模式名.表名; ----然后插入数据; example: create table zhabei.test( id bigint identity(1,1) primary key, nam</div> </li> <li><a href="/article/1016.htm" title="XML 解析 四种方式" target="_blank">XML 解析 四种方式</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>XML现在已经成为一种通用的数据交换格式,平台的无关性使得很多场合都需要用到XML。本文将详细介绍用Java解析XML的四种方法。 XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便。对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这里面包括的内容有DOM(Document Object </div> </li> <li><a href="/article/1143.htm" title="spring中配置文件占位符的使用" target="_blank">spring中配置文件占位符的使用</a> <span class="text-muted">avords</span> <div>1.类 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.o</div> </li> <li><a href="/article/1270.htm" title="前端工程化-公共模块的依赖和常用的工作流" target="_blank">前端工程化-公共模块的依赖和常用的工作流</a> <span class="text-muted">bee1314</span> <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a> <div>题记： 一个人的项目，还有工程化的问题嘛？   我们在推进模块化和组件化的过程中，肯定会不断的沉淀出我们项目的模块和组件。对于这些沉淀出的模块和组件怎么管理？另外怎么依赖也是个问题？ 你真的想这样嘛？   var BreadCrumb = require(‘../../../../uikit/breadcrumb’); //真心ugly。   </div> </li> <li><a href="/article/1397.htm" title="上司说「看你每天准时下班就知道你工作量不饱和」，该如何回应？" target="_blank">上司说「看你每天准时下班就知道你工作量不饱和」，该如何回应？</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86/1.htm">项目管理</a><a class="tag" taget="_blank" href="/search/%E6%B2%9F%E9%80%9A/1.htm">沟通</a><a class="tag" taget="_blank" href="/search/IT%E8%81%8C%E4%B8%9A%E8%A7%84%E5%88%92/1.htm">IT职业规划</a> <div>问题：上司说「看你每天准时下班就知道你工作量不饱和」，如何回应         正常下班时间6点，只要是6点半前下班的，上司都认为没有加班。   Eno-Bea回答，注重感受，不一定是别人的         虽然我不知道你具体从事什么工作与职业，但是我大概猜测，你是从事一项不太容易出现阶段性成果的工作</div> </li> <li><a href="/article/1524.htm" title="TortoiseSVN，过滤文件" target="_blank">TortoiseSVN，过滤文件</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a> <div>环境： TortoiseSVN 1.8 配置： 在文件夹空白处右键 选择  TortoiseSVN -> Settings 在 Global ignote pattern 中添加要过滤的文件： 多类型用英文空格分开 *name ： 过滤所有名称为 name 的文件或文件夹 *.name ： 过滤所有后缀为 name 的文件或文件夹 --------</div> </li> <li><a href="/article/1651.htm" title="【Flume二】HDFS sink细说" target="_blank">【Flume二】HDFS sink细说</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Flume/1.htm">Flume</a> <div>1. Flume配置   a1.sources=r1 a1.channels=c1 a1.sinks=k1 ###Flume负责启动44444端口 a1.sources.r1.type=avro a1.sources.r1.bind=0.0.0.0 a1.sources.r1.port=44444 a1.sources.r1.chan</div> </li> <li><a href="/article/1778.htm" title="The Eight Myths of Erlang Performance" target="_blank">The Eight Myths of Erlang Performance</a> <span class="text-muted">bookjovi</span> <a class="tag" taget="_blank" href="/search/erlang/1.htm">erlang</a> <div>erlang有一篇guide很有意思： http://www.erlang.org/doc/efficiency_guide 里面有个The Eight Myths of Erlang Performance： http://www.erlang.org/doc/efficiency_guide/myths.html   Myth: Funs are sl</div> </li> <li><a href="/article/1905.htm" title="java多线程网络传输文件(非同步)-2008-08-17" target="_blank">java多线程网络传输文件(非同步)-2008-08-17</a> <span class="text-muted">ljy325</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a> <div>利用 Socket 套接字进行面向连接通信的编程。客户端读取本地文件并发送；服务器接收文件并保存到本地文件系统中。 使用说明:请将TransferClient, TransferServer, TempFile三个类编译，他们的类包是FileServer. 客户端: 修改TransferClient: serPort, serIP, filePath, blockNum,的值来符合您机器的系</div> </li> <li><a href="/article/2032.htm" title="读《研磨设计模式》-代码笔记-模板方法模式" target="_blank">读《研磨设计模式》-代码笔记-模板方法模式</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet;</div> </li> <li><a href="/article/2159.htm" title="配置心得" target="_blank">配置心得</a> <span class="text-muted">chenyu19891124</span> <a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE/1.htm">配置</a> <div>时间就这样不知不觉的走过了一个春夏秋冬，转眼间来公司已经一年了，感觉时间过的很快，时间老人总是这样不停走，从来没停歇过。 作为一名新手的配置管理员，刚开始真的是对配置管理是一点不懂，就只听说咱们公司配置主要是负责升级，而具体该怎么做却一点都不了解。经过老员工的一点点讲解，慢慢的对配置有了初步了解，对自己所在的岗位也慢慢的了解。 做了一年的配置管理给自总结下： 1.改变 从一个以前对配置毫无</div> </li> <li><a href="/article/2286.htm" title="对“带条件选择的并行汇聚路由问题”的再思考" target="_blank">对“带条件选择的并行汇聚路由问题”的再思考</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a><a class="tag" taget="_blank" href="/search/%E9%A2%86%E5%9F%9F%E6%A8%A1%E5%9E%8B/1.htm">领域模型</a> <div>2008年上半年，我在设计并开发基于”JWFD流程系统“的商业化改进型引擎的时候，由于采用了新的嵌入式公式模块而导致出现“带条件选择的并行汇聚路由问题”(请参考2009-02-27博文)，当时对这个问题的解决办法是采用基于拓扑结构的处理思想，对汇聚点的实际前驱分支节点通过算法预测出来，然后进行处理，简单的说就是找到造成这个汇聚模型的分支起点，对这个起始分支节点实际走的路径数进行计算，然后把这个实际</div> </li> <li><a href="/article/2413.htm" title="Oracle 10g 的clusterware 32位 下载地址" target="_blank">Oracle 10g 的clusterware 32位 下载地址</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>Oracle 10g 的clusterware 32位 下载地址 http://pan.baidu.com/share/link?shareid=531580&uk=421021908 http://pan.baidu.com/share/link?shareid=137223&uk=321552738 http://pan.baidu.com/share/l</div> </li> <li><a href="/article/2540.htm" title="非常好的介绍：Linux定时执行工具cron" target="_blank">非常好的介绍：Linux定时执行工具cron</a> <span class="text-muted">dongwei_6688</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Linux经过十多年的发展，很多用户都很了解Linux了，这里介绍一下Linux下cron的理解，和大家讨论讨论。cron是一个Linux 定时执行工具，可以在无需人工干预的情况下运行作业，本文档不讲cron实现原理，主要讲一下Linux定时执行工具cron的具体使用及简单介绍。 新增调度任务推荐使用crontab -e命令添加自定义的任务（编辑的是/var/spool/cron下对应用户的cr</div> </li> <li><a href="/article/2667.htm" title="Yii assets目录生成及修改" target="_blank">Yii assets目录生成及修改</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>assets的作用是方便模块化，插件化的，一般来说出于安全原因不允许通过url访问protected下面的文件，但是我们又希望将module单独出来，所以需要使用发布，即将一个目录下的文件复制一份到assets下面方便通过url访问。 assets设置对应的方法位置 \framework\web\CAssetManager.php   assets配置方法 在m</div> </li> <li><a href="/article/2794.htm" title="mac工作软件推荐" target="_blank">mac工作软件推荐</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mac/1.htm">mac</a> <div>mac上的Terminal + bash ＋ screen组合现在已经非常好用了，但是还是经不起iterm＋zsh＋tmux的冲击。在同事的强烈推荐下，趁着升级mac系统的机会，顺便也切换到iterm＋zsh＋tmux的环境下了。 我为什么要要iterm2 切换过来也是脑袋一热的冲动，我也调查过一些资料，看了下iterm的一些优点： * 兼容性好，远程服务器 vi 什么的低版本能很好兼</div> </li> <li><a href="/article/2921.htm" title="Memcached(三)、封装Memcached和Ehcache" target="_blank">Memcached(三)、封装Memcached和Ehcache</a> <span class="text-muted">frank1234</span> <a class="tag" taget="_blank" href="/search/memcached/1.htm">memcached</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/spring+ioc/1.htm">spring ioc</a> <div>本文对Ehcache和Memcached进行了简单的封装，这样对于客户端程序无需了解ehcache和memcached的差异，仅需要配置缓存的Provider类就可以在二者之间进行切换，Provider实现类通过Spring IoC注入。 cache.xml <?xml version="1.0" encoding="UTF-8"?> </div> </li> <li><a href="/article/3048.htm" title="Remove Duplicates from Sorted List II" target="_blank">Remove Duplicates from Sorted List II</a> <span class="text-muted">hcx2013</span> <a class="tag" taget="_blank" href="/search/remove/1.htm">remove</a> <div>Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numbers from the original list. For example,Given 1->2->3->3->4->4->5,</div> </li> <li><a href="/article/3175.htm" title="Spring4新特性——注解、脚本、任务、MVC等其他特性改进" target="_blank">Spring4新特性——注解、脚本、任务、MVC等其他特性改进</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/spring4/1.htm">spring4</a> <div>Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新</div> </li> <li><a href="/article/3302.htm" title="MySQL安装文档" target="_blank">MySQL安装文档</a> <span class="text-muted">liyong0802</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>  工作中用到的MySQL可能安装在两种操作系统中，即Windows系统和Linux系统。以Linux系统中情况居多。   安装在Windows系统时与其它Windows应用程序相同按照安装向导一直下一步就即，这里就不具体介绍，本文档只介绍Linux系统下MySQL的安装步骤。   Linux系统下安装MySQL分为三种：RPM包安装、二进制包安装和源码包安装。二</div> </li> <li><a href="/article/3429.htm" title="使用VS2010构建HotSpot工程" target="_blank">使用VS2010构建HotSpot工程</a> <span class="text-muted">p2p2500</span> <a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a><a class="tag" taget="_blank" href="/search/OpenJDK/1.htm">OpenJDK</a><a class="tag" taget="_blank" href="/search/VS2010/1.htm">VS2010</a> <div>1. 下载OpenJDK7的源码：      http://download.java.net/openjdk/jdk7      http://download.java.net/openjdk/      2. 环境配置     ▶</div> </li> <li><a href="/article/3556.htm" title="Oracle实用功能之分组后列合并" target="_blank">Oracle实用功能之分组后列合并</a> <span class="text-muted">seandeng888</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E7%BB%84/1.htm">分组</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E7%94%A8%E5%8A%9F%E8%83%BD/1.htm">实用功能</a><a class="tag" taget="_blank" href="/search/%E5%90%88%E5%B9%B6/1.htm">合并</a> <div>1       实例解析 由于业务需求需要对表中的数据进行分组后进行合并的处理，鉴于Oracle10g没有现成的函数实现该功能，且该功能如若用JAVA代码实现会比较复杂，因此，特将SQL语言的实现方式分享出来，希望对大家有所帮助。如下： 表test 数据如下： ID,SUBJECTCODE,DIMCODE,VALUE 1&nbs</div> </li> <li><a href="/article/3683.htm" title="Java定时任务注解方式实现" target="_blank">Java定时任务注解方式实现</a> <span class="text-muted">tuoni</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/jni/1.htm">jni</a> <div>Spring 注解的定时任务，有如下两种方式： 第一种： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"  xmlns:xsi="http</div> </li> <li><a href="/article/3810.htm" title="11大Java开源中文分词器的使用方法和分词效果对比" target="_blank">11大Java开源中文分词器的使用方法和分词效果对比</a> <span class="text-muted">yangshangchuan</span> <a class="tag" taget="_blank" href="/search/word%E5%88%86%E8%AF%8D%E5%99%A8/1.htm">word分词器</a><a class="tag" taget="_blank" href="/search/ansj%E5%88%86%E8%AF%8D%E5%99%A8/1.htm">ansj分词器</a><a class="tag" taget="_blank" href="/search/Stanford%E5%88%86%E8%AF%8D%E5%99%A8/1.htm">Stanford分词器</a><a class="tag" taget="_blank" href="/search/FudanNLP%E5%88%86%E8%AF%8D%E5%99%A8/1.htm">FudanNLP分词器</a><a class="tag" taget="_blank" href="/search/HanLP%E5%88%86%E8%AF%8D%E5%99%A8/1.htm">HanLP分词器</a> <div>本文的目标有两个： 1、学会使用11大Java开源中文分词器 2、对比分析11大Java开源中文分词器的分词效果 本文给出了11大Java开源中文分词的使用方法以及分词结果对比代码，至于效果哪个好，那要用的人结合自己的应用场景自己来判断。 11大Java开源中文分词器，不同的分词器有不同的用法，定义的接口也不一样，我们先定义一个统一的接口： /** * 获取文本的所有分词结果, 对比</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>