button 是平时使用最广泛的一个 html 元素了,只要有点击交互的地方都推荐使用这个。但是,仍然有大部分网站使用的还是div,比如某博,所到之处几乎都是 div
既然是按钮,为什么不直接使用button呢?这里介绍一下使用 button 的 5 个理由
button支持禁用。这也是表单元素的通性,直接设置disabled属性可以达到禁用的效果
<button disabled>按钮</button>
而且,这种禁用不仅可以禁用鼠标点击,也会禁用键盘访问,是真正意义上的禁用
如果需要改变禁用用的样式,需要通过:disabled伪类,而不是disabled属性
button:disabled{
}
/*不推荐*/
button.disabled{
}
因为有时候 button 被禁用,不一定来源于自身,有可能是因为父级元素,比如fieldset
<fieldset disabled>
<button>按钮</button>
<button>按钮</button>
</fieldset>
可以看到,当fieldset被禁用时,所包含的表单元素全部都被禁用,这些表单元素本身是没有disabled属性的,所以要禁用一个按钮,一定要通过:disabled伪类
另外在 div 中,一般通过 pointer-events: none;来实现,不过这种只能禁用掉鼠标行为
div.disabled{
pointer-events: none;
}
当然对于 div来说,这个方式已经足够,因为 div 本身也不会被聚焦到
button的默认盒子属性是 border-box,进一步扩展开来,几乎所有表单元素的盒子属性都是 border-box。
所以,在给按钮设置具体尺寸的时候就不需要再设置这个了
button{
padding: 5px 10px;
width: 100%;
box-sizing: border-box; /* 不需要 */
}
然后,button中默认是垂直水平居中的。
介于几乎所有的按钮都是居中的设计,所以,你无需设置任何居中属性就能达到水平垂直居中的效果
button{
width: 100px;
height: 100px;
text-align: center; /* 不需要 */
line-height: 50px; /* 不需要 */
}
button支持键盘访问。当使用 tab键进行焦点切换时,会有明显的焦点提示(outline)。而且在聚焦状态,通过键盘 enter 或者 space键可以触发按钮的点击事件
所以,为了保持键盘访问的可见性,最好不要这么做
button{
outline: 0; /* 最好不要这么做 */
}
默认情况下,这个 outline只会在键盘聚焦时出现,而鼠标点击聚焦不会出现,如果需要改变聚焦的颜色,可以仅仅改变 outline-color,这样不会影响浏览器默认的出现时机
button{
outline-color: salmon;
}
最好不要改变整个outline,这样会导致不管是键盘聚焦还是鼠标点击聚焦都会出现 outline(一般设计都不喜欢鼠标点击有outline)
/* 最好不要这么做 */
button:focus{
outline: 1px solid salmon;
}
如果想完全控制键盘聚焦的样式,可以使用这个伪类:focus-visible,兼容性略差
button:focus-visible{
outline: 5px solid salmon;
}
button具备一些表单特性。合理使用这些特性,不需要 js 也能实现很多交互,比如这样一个表单
<form>
<label>用户: </label><input name="user" required><br>
<label>密码: </label><input name="password" type="password" required><br>
<button type="submit">登录</button>
<button type="reset">重置</button>
</form>
其中,type="submit"天然支持表单提交,也就是触发 form 的 submit 事件,而且也支持回车登录,这样体验就非常好了,输完用户名密码,可以直接敲击回车登录。
type="reset"可以执行表单的重置,注意这里是重置,而不是清空,可能理解成还原会更好。如果不使用 button,你可能需要更多的javascript来实现类似的功能,而且还有可能出现不为人知的 bug
button默认支持屏幕阅读访问。比如使用macOS自带的旁白,在读到一个按钮时,可以很清楚的明白这是一个按钮还有内部的文本
如果是一个 div,如果想达到这样的效果,可能需要
有时候还有更极端的情况,直接使用背景图作为按钮,没有文字,还需要以下操作
<div tabindex="0" role="button" aria-label="登录2">登录</div>
这样屏幕阅读基本就能正常访问了
以下是我个人的一些猜想
以上从样式和功能上介绍了原生 button元素的几个特性,同时还猜想了一些没有使用button的原因,下面总结一下:
虽然有这么多好用的特性,但是实际开发中还是有很多原因没有使用。不过不管以前如何如何,从现在开始,只要碰到"按钮",第一优先选择button就可以了,不用做过多修饰,就能在不知不觉中提升用户体验。
来自:https://segmentfault.com/a/1190000041069149
button-普通按钮,submit-提交按钮。submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上。
很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签,一个checkbox,并在提交表单后获取checkbox值,以查看用户是否已经选中或取消选中该checkbox。
css控制Button 按钮的点击时候出现蓝色边框的问题,添加css属性,这样在点击安按钮的时候就不会有蓝色边框了。那么谷歌浏览器中button按钮的边框如何去除呢?
但是有时候却不起作用,这个时候我们可以使用::after 伪类选择器,因为button的边框样式是通过::after方式实现的,如果在button上定义边框就会出现两条边框线,所以我们可以使用::after的方式去覆盖默认值。
input file的样式不能直接用css来美化,我们可以曲线救国,把input file的透明度降低为0,相当于把这个控件隐藏了,实际上只是透明度为0,还是存在的,然后把div套上去,让div充当file的按钮。
这种技术使得一切完全复合语义,不会增加任何疯狂的标记,并且用纯CSS就可以完成。当然,你需要注意浏览器兼容性情况,但是你可以使用条件样式来兼容旧版浏览器,使用上面提到的例子,并不会产生什么不足之处。
设置属性 disabled 可以限制交互,单击按钮时添加disabled=“disabled”属性,再为按钮添加定时器,一定时间后删除定时器和disabled属性
按钮是UI/UX最关键的组件之一,在不同设备及平台上得到了广泛的应用。它们具有影响用户行为和体验的能力。假如按钮设计不合理,会令用户产生误解及障碍。按钮设计的目的是引导用户完成我们在交互系统中
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!