概述

button 用于顯示一個(gè)可點(diǎn)擊的按鈕，可用在表單或文檔的其它地方。

button元素是內(nèi)聯(lián)雙標(biāo)簽，不同瀏覽器下button樣式不同，可以通過CSS修改。

<button>按鈕</button>

標(biāo)簽屬性

autofocus

指定頁面加載時(shí)聚焦此按鈕，多個(gè)按鈕指定autofocus，僅僅只會聚焦首個(gè)按鈕。

<button autofocus>按鈕</button>

disabled

禁用，用戶不能與button交互。

<button disabled>按鈕</button>

form

HTML5新增屬性，用于指定關(guān)聯(lián)的form元素的id。一般button按鈕需要位于form元素內(nèi)部才能關(guān)聯(lián)form，而指定form屬性則可以在文檔任意位置關(guān)聯(lián)form。

<form id="form" action="" method="post">
  <input type="text">
</form>
<button type="reset" form='form'>按鈕</button>

formaction

覆蓋button關(guān)聯(lián)的form表單的action屬性。

如下表單的提交地址將被覆蓋為http://www.jd.com。

<form method="get" action="http://www.baidu.com">
  <input type="text">
  <button type="submit" formaction="http://www.jd.com">按鈕</button>
</form>

不同按鈕設(shè)置不同formaction屬性，可將同一表單的數(shù)據(jù)提交到不同的URL地址。

<form method="get" id="form">
  <input type="text">
</form>
<button type="submit" formaction="http://www.baidu.com" form="form">百度</button>
<button type="submit" formaction="http://www.qq.com" form="form">qq</button>

formenctype

若表單method屬性為post，且button是submit類型時(shí)，用于指定表單的數(shù)據(jù)編碼方式。

注意button上的formenctype也會覆蓋form表單的enctype屬性。

<form method="post" action="http://www.baidu.com">
  <input type="text">
  <button type="submit" formenctype="multipart/form-data">按鈕</button>
</form>

實(shí)際上enctype影響的是請求頭的Content-Type。

enctype 屬性值包括三種類型。

• application/x-www-form-urlencoded：默認(rèn)編碼方式
• multipart/form-data：表單含有文件上傳控件需指定
• text/plain：用于調(diào)試

如下為含有兩個(gè)輸入框的表單，通過在button上設(shè)置不同formenctype屬性值來區(qū)分差異，其中name控件固定輸入hello，desc控件固定輸入button formenctype。

<form method="post" action="http://www.baidu.com">
  <input type="text" name="value">
  <input type="text" name="desc">
  <button type="submit" formenctype="">按鈕</button>
</form>

application/x-www-form-urlencoded是默認(rèn)的編碼方式，適用于各種類型的表單。其中特殊字符（空格）已經(jīng)被替換為+，數(shù)據(jù)項(xiàng)的名稱和值以=分開，數(shù)據(jù)項(xiàng)之間以&分開。

multipart/form-data在表單含有type="file"控件時(shí)指定，此類型更加適合傳輸二進(jìn)制數(shù)據(jù)。

text/plain中每個(gè)數(shù)據(jù)項(xiàng)獨(dú)占一行，不會編碼特殊字符。注意各種瀏覽器的實(shí)現(xiàn)方式各不相同，一般不建議使用。

formmethod

覆蓋button關(guān)聯(lián)的form表單的method屬性，可選值包括get、post。

如下表單的請求方式將為get 。

<form method="post" action="http://www.baidu.com">
  <input type="text">
  <button type="submit" formmethod="get">按鈕</button>
</form>

formnovalidate

指定button關(guān)聯(lián)的form表單，在表單提交時(shí)不用驗(yàn)證數(shù)據(jù)。

如下指定表單項(xiàng)只能輸入email郵箱格式。

<form method="post" action="http://www.baidu.com">
  <input type="email" name="email">
  <button type="submit">按鈕</button>
</form>

點(diǎn)擊按鈕提交表單數(shù)據(jù)時(shí)，將驗(yàn)證數(shù)據(jù)是否為郵箱格式。

添加formnovalidate屬性將關(guān)閉表單的驗(yàn)證。

<button type="submit" formnovalidate>按鈕</button>

formtarget

若關(guān)聯(lián)form的button其type屬性為值為submit，formtarget表示提交的表單在何處響應(yīng)。

formtarget屬性值如下，其中具體差異 參考。

• _self：在當(dāng)前頁面響應(yīng)
• _blank：在新窗口響應(yīng)
• _parent：在當(dāng)前頁面的父框架頁面中響應(yīng)
• _top：在當(dāng)前頁面的頂層框架頁面中響應(yīng)

<form method="post" action="http://www.baidu.com">
  <input type="text">
  <button type="submit" formtarget="_blank">按鈕</button>
</form>

name

指定按鈕的name屬性，被單擊時(shí)自身name與value屬性值將被提交。

<form method="post" action="http://www.baidu.com">
  <input type="text" name="value">
  <button type="submit" name="button" value="value">按鈕</button>
</form>

輸入框錄入值，單擊按鈕。

其中button的name與value屬性值均被提交。

value

指定按鈕的初始值，將作為name屬性的鍵值提交。

type

指定button的類型，其中可選值如下。

• submit：此按鈕將表單數(shù)據(jù)提交至服務(wù)器。注意指定type為空或者錯(cuò)誤值時(shí)也是submit類型
• reset：重置表單控件為初始值
• button：指定為普通按鈕
• menu：打開一個(gè)由menu元素定義的菜單，此屬性尚未在任何瀏覽器實(shí)現(xiàn)

<button type="menu" menu="menu">Dropdown</button>
<menu id="menu">
  <menuitem>hello</menuitem>
  <menuitem>world</menuitem>
</menu>

兼容性

button.value

如下獲取butoon上的value屬性。

<button id="btn" value="hello button">按鈕</button>
<script>
  var btn = document.getElementById('btn')
  console.log(btn.value)
</script>

IE8以下瀏覽器，其獲取的值等價(jià)于button的innerText。

IE8及以上瀏覽器、Chrome、Firefox、Opera等，其獲取的值為button的 value屬性值。

兼容方式也很簡單，即在獲取 button元素的 value屬性值時(shí)統(tǒng)一使用 getAttribute。

btn.getAttribute('value')

form post 請求參數(shù)

關(guān)聯(lián)form表單的type屬性值為submit的按鈕，在點(diǎn)擊提交表單數(shù)據(jù)時(shí)也會存在兼容性問題。

由于IE瀏覽器的控制臺F12開啟后，點(diǎn)擊button提交表單，無論將form的target屬性設(shè)置為_self還是_blank，控制臺均會被關(guān)閉，因此post請求參數(shù)也無法查看。

客戶端無法查看參數(shù)，換個(gè)思路從服務(wù)端中去打印請求參數(shù)。

<form action="http://127.0.0.1:3000" method="post">
  <input type="text" name="input">
  <button name="reset" value="button">重置</button>
  <button type="submit" name="name" value="button">按鈕</button>
</form>

IE8及以上瀏覽器、Chrome、Firefox等。

IE8以下瀏覽器，可以看出在提交表單時(shí)，會將表單內(nèi)所有按鈕都提交上去，并且提交的值并不是按鈕的value值，而是等價(jià)于按鈕innerText的值。

到此這篇關(guān)于HTML5 中的Button 標(biāo)簽的文章就介紹到這了,更多相關(guān)HTML5 Button 標(biāo)簽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論