被遗忘掉的button标签

2020-04-16 21:51:38易采站长站整理

注:这篇文章已经有人翻译过重新认识button 标签,但是感觉其中有很多地方值得推敲,不太好理解。因此本人结合个人学习体会重新翻译而成此文。
英文原文:http://particletree.com/features/rediscovering-the-button-element/
对于每个程序设计者来说,为用户提供一个风格统一的界面是一项不变的要求。但是在网页上实现这种风格统一却显得格外困难,因为不同操作系统、不同浏览器对网页内容的表现方式存在着差异,而且这种差异几乎毫无规律性。在处理表单元素过程中这个问题显得格外突出,其中,让很多人束手无策的就是“Submit”按钮表现标准统一化的问题。
比如说,属性为type="submit"的input标签在不同的浏览器中要么显得非常丑陋(在Firefox中),要么就是存在这样那样的缺陷(在Internet Explorer),甚至表现得十分死板(在Safari中)。应对这个问题的解决办法通常是通过设置input的属性为image然后自己动手设计一个按钮图片出来。但我们却因此而不得不在每次需要使用按钮时增加大量额外烦人的工作。因此,我们需要一个更好的解决办法,一个对设计者来说更具灵活性、更有意义的方法。幸运的是,这种方法实际中已经存在,需要的是我们再做一点点工作。朋友们,现在请允许向大家介绍我们这位可爱的小盆友<button>同学!
Input VS Button
下面是你正在使用的提交按钮标签:

<input type="submit" value="Submit" />

他们在不同的浏览器中的表现样式分别如下:

而我们使用<button>创建如上按钮时代码:

<button type="submit">Submit</button>

他们表现样式如下:

这些按钮和我们上面创建的按钮在运行和表现行为中没有任何区别。除了用他们来提交表单为,你还可以设置他们为不可用,添加快捷键或者设定一个tabindex等。还好,除了表现样式不同外,Safari都支持这些功能(和input的按钮相比,Safari中button按钮缺少表面的液态效果)。<button>标签最酷的功能就是我们可以在其内部放置一些有用的HTML元素,比如可以使用下面的代码加入图片:

<button type="submit"><img src="" alt="" /> Submit</button>

他们在浏览器的外观如下:

还不错哦。实际上,根据W3C的定义,<button>元素就是为了解决这些表现上的差异才应运而生的。