【前端】HTML中最適合作按鈕的元素

轉載請註明出處：http://www.cnblogs.com/shamoyuu/p/6405914.html

 

可選的能夠作按鈕的元素有以下幾個

a、input、button、div(span等)

 

場景一：須要禁用此按鈕

　　在此場景下能夠排除a和div(span等)標籤，由於想禁用和解禁它們真的很是困難。

 

場景二：須要在form裏自定義執行事件

　　在form元素內，button默認是submit。

　　可是button也有type屬性，默認值是submit，還有其餘兩個值是button和reset。若是設置成button，就是普通的按鈕，不會在form裏提交表單。

 

場景三：須要特殊的按鈕內容，例如圖片等

　　button支持圖片和文字，可是在IE9及如下，$("button").val()和$("button").attr('value')都是返回標籤之間的內容，而其餘瀏覽器返回標籤value屬性的值。

　　input雖然只能設置一個value做爲按鈕文字，可是能夠和label結合，也能放圖片在裏面。

 

根據以上場景來看，button和input是最適合作按鈕的，在各類狀況下都完美勝任。

並且從語義化的角度考慮，button也最適合作按鈕。

綜上所述，請使用button作按鈕，可是須要標籤的內容和value屬性的值儘可能保持一致。

 

 

---

 

注：不少人不用button作按鈕是由於它自帶默認樣式，並且每一個瀏覽器可能都不同，懶得初始化因此用a標籤這樣的來作按鈕。

能夠用過下面的css來初始化button的樣式

button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    border-radius: 0;
    background: transparent;
}

 點擊查看-webkit-appearance詳解