概述

button 用于顯示一個可點擊的按鈕，可用在表單或文檔的其它地方。

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

<button>按鈕</button>

標簽屬性

autofocus

指定頁面加載時聚焦此按鈕，多個按鈕指定autofocus，僅僅只會聚焦首個按鈕。

<button autofocus>按鈕</button>

disabled

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

<button disabled>按鈕</button>

form

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

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

formaction

覆蓋button關聯(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>

不同按鈕設置不同formaction屬性，可將同一表單的數據提交到不同的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類型時，用于指定表單的數據編碼方式。

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

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

實際上enctype影響的是請求頭的Content-Type。

enctype 屬性值包括三種類型。

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

如下為含有兩個輸入框的表單，通過在button上設置不同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是默認的編碼方式，適用于各種類型的表單。其中特殊字符（空格）已經被替換為+，數據項的名稱和值以=分開，數據項之間以&分開。

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

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

formmethod

覆蓋button關聯(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關聯(lián)的form表單，在表單提交時不用驗證數據。

如下指定表單項只能輸入email郵箱格式。

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

點擊按鈕提交表單數據時，將驗證數據是否為郵箱格式。

添加formnovalidate屬性將關閉表單的驗證。

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

formtarget

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

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

• _self：在當前頁面響應
• _blank：在新窗口響應
• _parent：在當前頁面的父框架頁面中響應
• _top：在當前頁面的頂層框架頁面中響應

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

name

指定按鈕的name屬性，被單擊時自身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：此按鈕將表單數據提交至服務器。注意指定type為空或者錯誤值時也是submit類型
• reset：重置表單控件為初始值
• button：指定為普通按鈕
• menu：打開一個由menu元素定義的菜單，此屬性尚未在任何瀏覽器實現(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以下瀏覽器，其獲取的值等價于button的innerText。

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

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

btn.getAttribute('value')

form post 請求參數

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

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

客戶端無法查看參數，換個思路從服務端中去打印請求參數。

<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以下瀏覽器，可以看出在提交表單時，會將表單內所有按鈕都提交上去，并且提交的值并不是按鈕的value值，而是等價于按鈕innerText的值。

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