文献种类：专题技术文献；

                <button>标签以及post和get方法

开发工具与关键技术：VS/HTML
作者：吴泽锋
撰写时间：2019年5月28日

2、<button></button>标签：定义一个按钮；重要：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。IE 将提交 <button>与 <button /> 之间的文本，而其他浏览器将提交 value 属性的内容；即IE 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。请始终为按钮规定 type 属性。<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。这是该元素与使用 input 元素创建的按钮之间的不同之处。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。唯一禁止使用的元素：图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的按钮值。请使用 input 元素在 HTML 表单中创建按钮。属性                值                         描述autofocus          autofocus                 规定当页面加载时按钮应当自动地获得焦点。disabled            disabled                 规定应该禁用该按钮。被禁用的按钮即不可用，也不可点击；可以设置 disabled 属性，直到满足某些条件（比如选择一个复选框），才恢复用户对该按钮的使用。然后，可以使用 JavaScript 来清除 disabled 属性，以使文本区变为可用状态。例：一个被禁止的按钮：<button type ="button" disabled ="disabled">Prohibit Click!</button>form              form_name                 规定按钮属于一个或多个表单。form 属性的值必须是按钮所属表单的 id。如需引用一个以上的表单，请使用空格分隔的列表。例：位于表单之外的提交按钮：<form action ="/" method ="post" id ="nameform">姓：<input type ="text" name ="lname" /><br />名：<input type ="text" name ="fname" /><br /></form><p>下面的按钮位于 form 元素之外，但仍是表单的一部分。</p><button type ="submit" form ="nameform" value ="Submit">提交</button>formaction           url         覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用。语法：<form formaction ="URL2">例：带有两个提交按钮的表单（带有不同的 action）：<form action =" URL 1" method="get">First name: <input type ="text" name ="fname" /><br />Last name: <input type ="text" name ="lname" /><br /><button type ="submit">提交</button><br /><button type ="submit" formaction =" URL 2">以…身份提交</button></form>action属性：必需： action 属性规定当提交表单时，向何处发送表单数据。语法：<form action="URL1">formenctype         属性值      覆盖 form 元素的 enctype 属性。该属性与 type ="submit" 配合使用。语法：<button formenctype ="value">enctype 属性：规定在发送到服务器之前应该如何对表单数据进行编码。语法：<form enctype="value">默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。属性值：值                                      描述application/x-www-form-urlencoded    在发送前对所有字符进行编码（默认）。multipart/form-data                不对字符编码。当使用有文件上传控件的表单时，该值是必需的；text/plain                         将空格转换为 "+" 符号，但不编码特殊字符。formmethod         get / post     覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用。语法：<button formmethod="get|post">属性值： 值             描述get            向 URL 追加表单数据（form-data）：URL?name=value&name=valuepost           以  HTTP post 事务的形式发送表单数据（form-data）method 属性：规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。语法：<form method =" get|post ">可以通过以下方式发送 form-data ：以 URL 变量 (使用 method="get") 的形式来发送 ；以 HTTP post (使用 method="post")的形式来发送 ；例：表单数据将通过 method 属性附加到 URL 上；<form action="URL" method="get">一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method（方法）属性中指明表单处理服务器要用方法来处理数据，使 post 还是 get。post 还是 get？1、如果希望获得最佳表单传输性能，可以采用 get方法发送只有少数简短字段的小表单。2、一些服务器操作系统在处理可以立即传递给应用程序的命令行参数时，会限制其数目和长度，在这种情况下，对那些有许多字段或是很长的文本域的表单来说，就应该采用 post方法来发送。 3、如果你在编写服务器端的表单处理应用程序方面经验不足，应该选择 get方法。如果采用 post方法，就要在读取和解码方法做些额外的工作，也许这并不很难，但是也许你不太愿意去处理这些问题。 4、如果安全性是个问题，那么我们建议选用 post方法。get方法将表单参数直接放在应用程序的 URL中，这样网络窥探者可以很轻松地捕获它们，还可以从服务器的日志文件中进行摘录。如果参数中包含了信用卡帐号这样的敏感信息，就会在不知不觉中危及用户的安全。而 post应用程序就没有安全方面的漏洞，在将参数作为单独的事务传输给服务器进行处理时，至少还可以采用加密的方法。 5、如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用 get方法，因为该方法允许把表单这样的参数包括进来作为 URL的一部分。而另一方面，使用 post样式的应用程序却希望在 URL后还能有一个来自浏览器额外的传输过程，其中传输的内容不能作为传统 <a> 标签的内容。 明确传递参数：前面的一些建议也可以作为选择此种方式的一定解释。假设你有一个很简单的表单，其中只包含 x 和 y 这两个参数。在对这些元素的值进行编码时，它们的形式如下所示：x=99&y=66如果表单采用了 method =get，那么用来引用服务器端应用程序的 URL 将如下所示：http://www.baidu.com/example/program?x=28&y=66在任何时候我们都可以创建一个传统的 <a> 标签，用它在调用带有所需参数值的表单，其形式如下所示：<a href ="http://www. baidu.com/example/program?x=28&y=66"></a>formnovalidate formnovalidate 覆盖 form 元素的 novalidate 属性。该属性与 type="submit" 配合使用。语法：<button formnovalidate ="formnovalidate">若使用该属性，则提交表单时按钮不会执行验证过程。例：带有两个提交按钮的表单（进行验证或不进行验证）：<form action="URL" method="get">E-mail: <input type="email" name ="userid" /><br /> <button type="submit">提交</button><button type="submit" formnovalidate ="formnovalidate">进行没有验证的提交</button></form>novalidate 属性：规定当提交表单时不对其进行验证。如果使用该属性，则表单不会验证表单的输入。语法：<form novalidate ="novalidate">注释：novalidate 属性适用于：<form>，以及以下类型的 <input> 标签：text、 search、 url、telephone, email、 password、 date pickers、 range 以及 color。例：不对输入进行验证的表单：<form action="URL" novalidate ="novalidate">E-mail: <input type ="email" name="email" /> <input type ="submit" /></form>formtarget      _blank、_self、_parent、   覆盖 form 元素的 target 属性。_top、framename、        注释：该属性与 type="submit" 配合使用。语法：<button formtarget ="value">target 属性：规定在何处打开 action URL。兼容性注释：在 HTML 4.01 中，不赞成使用 form 元素的 target 属性；在 XHTML 1.0 Strict DTD 中，不支持该属性。语法：<form target ="value">属性值target / formtarget值            描述_blank       在新窗口中打开。/在新窗口/选项卡中将表单提交到文档。_self         默认。在相同的框架中打开。/在同一框架中将表单提交到文档。（默认）_parent      在父框架集中打开。/在父框架中将表单提交到文档。_top         在整个窗口中打开。/在整个窗口中将表单提交到文档。framename   在指定的框架中打开。/在指定的框架中将表单提交到文档。name             button_name            规定按钮的名称。语法; <button name="value">name 属性用于在 JavaScript 中对元素进行引用，或者在表单提交之后，对表单数据进行引用。提示：不同的 button 元素可以共享相同的名称。这就允许您标记带有相同名称的若干按钮，以便在表单中使用时能够提交不同的值。例：两个按钮带有相同的名称，在单击它们时提交不同的值：<form action="URL" method="get">请选择你喜欢的方法：<button name="subject" type="submit" value="CSS">CSS</button><button name="subject" type="submit" value="JS">JS</button></form>type           button、reset、submit、    规定按钮的类型。语法：<button type="value">提示：请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。属性值：值              描述submit              该按钮是提交按钮（除了 IE，该值是其他浏览器的默认值）。button              该按钮是可点击的按钮（IE 的默认值）。reset               该按钮是重置按钮（清除表单数据）。value           text                     规定按钮的初始值。可由脚本进行修改。语法：<button value="value"> 规定要发送的值。借鉴于W3CSchool文档；