button標籤屬性詳解

button標籤是HTML中經常用到的標籤之一，用於在網頁中添加按鈕元素。本文將從多個方面對button標籤屬性做詳細闡述，介紹button標籤可用屬性及其作用，供讀者參考。

一、type屬性

button標籤的type屬性指定了按鈕的類型，有以下三種類型：

按鈕1
提交
重置

1、type=”button”: 這是默認類型，表示按鈕僅僅是一個簡單的按鈕。它不會執行任何提交或者操作，一般用於JavaScript事件綁定。

2、type=”submit”: 當按鈕位於form表單中時，點擊按鈕將提交表單。如果沒有form標籤，則忽略此屬性。

3、type=”reset”: 點擊按鈕時，將重置form表單，恢復為默認狀態。

二、name和value屬性

name和value屬性是button標籤的兩個重要屬性，用於表單的傳值和數據提交。

    提交
    保存

在上述代碼中，我們給兩個按鈕添加了相同的name屬性，不同的value屬性。在提交表單時，伺服器將會接收到name為action的數據，通過判定value的不同實現不同的功能。

三、disabled屬性

disabled屬性用於指定按鈕是否被禁用。當按鈕被禁用時，其不可使用，無法響應任何用戶事件。

已禁用
未禁用

在上述代碼中，第一個按鈕被禁用，第二個按鈕沒有被禁用。如果你點擊第一個按鈕，它將展現灰色（根據不同瀏覽器，表現可能有細微差別）。

四、autofocus屬性

autofocus屬性用於指定按鈕是否自動獲取焦點。在頁面載入完成後，所有被指定為autofocus的元素會自動獲得焦點。

獲取焦點

五、form屬性

form屬性指定按鈕所屬的表單，通常用於跨表單提交數據。

    
    按鈕1


    
    按鈕2

在上述代碼中，按鈕1指定了form屬性，並指向了form2表單。當點擊按鈕1時，將會提交form2表單，而不是form1表單。

六、formaction、formmethod和formtarget屬性

formaction、formmethod和formtarget屬性是button標籤專門用於解決表單提交的問題。

    
    GET方式提交
    POST方式提交

在上述代碼中，我們給其中的按鈕設置了formmethod、formaction和formtarget屬性，用來實現表單提交的不同方式和跳轉到不同的頁面。

1、formaction屬性：定義了表單提交時使用的URL，可覆蓋form標籤中的action屬性。

2、formmethod屬性：定義了表單提交的方式，可覆蓋form標籤中的提交方式（get或post）。

3、formtarget屬性：定義了表單提交後，在哪裡打開提交的響應，可覆蓋form標籤中的target屬性。

七、其他屬性

除了以上介紹的屬性外，button標籤還有一些額外的屬性，如：accesskey、class、id等，這些屬性的作用與其他HTML標籤屬性相同。

快捷鍵
自定義樣式和ID

在上述代碼中，我們給按鈕添加了accesskey、class和id屬性，用於為按鈕綁定快捷鍵、自定義CSS樣式和JavaScript事件綁定，並觸發相應的操作。

結語

本文結束。通過對button標籤的屬性介紹，讀者能清楚了解button標籤的使用方式，並能根據需要配置相應的屬性，實現各種需求。