【前端】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详解