zoukankan      html  css  js  c++  java
  • 【前端】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结合,也能放图片在里面。

     

    根据以上场景来看,buttoninput是最适合做按钮的,在各种情况下都完美胜任。

    而且从语义化的角度考虑,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详解

  • 相关阅读:
    又见博弈
    两道来自CF的题
    温习及回顾
    笔试面试总结
    Python Cha4
    初学ObjectiveC
    设计模式汇总(三)
    转贴XML的写法建议
    让从Objec中继承的类也拥有鼠标事件
    关于异常处理的一些看法
  • 原文地址:https://www.cnblogs.com/shamoyuu/p/6405914.html
Copyright © 2011-2022 走看看