HTML <button> 标签

<button> 标签定义一个按钮。
所有主流浏览器都支持 <button> 标签。

在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。

重要:请始终为按钮规定 type 属性。IE 的默认类型是 "button", 而其他浏览器中(包括 W3C 规范)的默认值是 "submit" 。
重要:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。IE 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。
唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

HTML 4.01 与 HTML 5 之间的差异
HTML 5 中的新属性:autofocus, form, formaction, formenctype, formmethod, formnovalidate 以及 formtarget。

####  autofocus  规定当页面加载时按钮应当自动地获得焦点。 H5
<button type="button" autofocus="autofocus">点击这里</button>


#### disabled 属性规定禁用按钮。被禁用的按钮既不可用,也不可点击。 H4
<button type="button" disabled="disabled">Click Me!</button>


#### form 规定按钮属于一个或多个表单。  H5
位于表单之外的提交按钮:
<button type="submit" form="nameform" value="Submit">提交</button>


form 属性规定按钮属于一个或多个表单。
form 属性的值必须是按钮所属表单的 id
如需引用一个以上的表单,请使用空格分隔的列表。


例:
<form action="#" method="get" id="nameform">
  姓:<input type="text" name="lname" /><br />
  名:<input type="text" name="fname" /><br />
</form>
<p>下面的按钮位于 form 元素之外,但仍是表单的一部分。</p>
<button type="submit" form="nameform" value="Submit">提交</button>


#### formaction  覆盖 form 元素的 action 属性。 H5
注释:该属性与 type="submit" 配合使用。
例:
<form action="/example/old.php" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<button type="submit">提交</button><br />
<button type="submit" formaction="/example/new.php">以管理员身份提交</button>
</form>


#### formenctype  覆盖 form 元素的 enctype 属性。 H5
注释:该属性与 type="submit" 配合使用。
<button formenctype="value">
例:
<form action="demo_post_enctype.asp" method="post">
<div>First name: <input type="text" name="fname" /></div>


<button type="submit" >提交</button>
<button type="submit" formenctype="multipart/form-data"> 以 Multipart/form-data 类型提交</button>

</form>


#### formmethod 覆盖 form 元素的 method 属性。 H5
注释:该属性与 type="submit" 配合使用。
<button formmethod="get | post">

例子:
<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" />
  <div><button type="submit" >提交</button>
<button type="submit" formmethod="post" formaction="demo_post.asp">使用 POST 来提交</button>
</div>
</form>


### formnovalidate 覆盖 form 元素的 novalidate 属性。 H5
注释:该属性与 type="submit" 配合使用。
如果使用该属性,则提交表单时按钮不会执行验证过程。


例:
带有两个提交按钮的表单(进行验证或不进行验证)
<form action="demo_form.asp" method="get">
E-mail: <input type="email" name="userid" />
<div>
<button type="submit" >提交</button>
<button type="submit" formnovalidate="formnovalidate">进行没有验证的提交</button>
</div>
</form>


### formtarget 覆盖 form 元素的 target 属性。 H5
注释:该属性与 type="submit" 配合使用。

例子:
<form action="/example/html5/demo_form.asp" method="get">
First name: <input type="text" name="fname" />

<button type="submit" >提交</button>
<button type="submit" formtarget="_blank">提交到新窗口</button>
</form>

// _self 在同一框架中将表单提交到文档。(默认)
// _blank     在新窗口/选项卡中将表单提交到文档。
// _parent     在父框架中将表单提交到文档。
// _top     在整个窗口中将表单提交到文档。
// framename     在指定的框架中将表单提交到文档。
注释:HTML5 不支持框架和框架集。现在,parent, top 和 framename 值大多用于 iframe。


### name 规定按钮的名称。 H4
不同的 button 元素可以共享相同的名称。这就允许您标记带有相同名称的若干按钮,以便在表单中使用时能够提交不同的值。

<form action="#" method="get">
  <button name="subject" type="submit" value="HTML">HTML</button>  // HTML
  <button name="subject" type="submit" value="CSS">CSS</button> // Choose your favorite subject: CSS
</form>


### type 规定按钮的类型。 H4

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

强调:请始终为按钮规定 type 属性。IE 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

submit     该按钮是提交按钮(除了 Internet Explorer,该值是其他浏览器的默认值)。
button     该按钮是可点击的按钮(Internet Explorer 的默认值)。
reset     该按钮是重置按钮(清除表单数据)。


### value   规定按钮的初始值。可由脚本进行修改。  H4

<form action="#" method="get">
  <button name="subject" type="submit" value="HTML">HTML</button>
  <button name="subject" type="submit" value="CSS">CSS</button>
</form>

重要:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。IE 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。
请在 HTML 表单中使用 input 元素来创建按钮。

原文地址:https://www.cnblogs.com/bigdesign/p/4398552.html