被遗忘掉的button标签_HTML/Xhtml_网页制作

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

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

而我们使用创建如上按钮时代码：
Submit
他们表现样式如下：

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

还不错哦。实际上，根据W3C的定义，元素就是为了解决这些表现上的差异才应运而生的。
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.
The Button Element - W3C
因此我们要为此寻找一个设计方案，好在拥有海量资料的互联网可以为我们提供一些有用的帮助来解决这个问题。这的确很方便，但是不幸的是很设计者和网站开发者甚至都不知道这个元素的存在。在我决定用button元素替换掉Wufoo（本文作者的一款网络产品，dudo注）前，我得肯定这个标签和CSS能满足以下的需求：
需求条件：
1、他们必须具有按钮的外观
2、在不同浏览器中有相同的表现样式
3、button中所应用的样式同样可以在超级链接上使用（因为Wufoo中的交互总是使用表单提交的方式和链接触发Ajax的方式中的某一个实现的，他们可能经常会紧挨在一起，因此我需要他们具有相同的表现样式）
4、在不同的情况下标签能够表现灵活，易于修改
5、对于信息传递过程中发生的事件能够用图标和颜色有效地区分
面对上面的问题，我首先写出一些CSS来，然后再解决跨浏览器的问题。接下来我们就会看到：
最终结果

这并没有什么大惊小怪的，他很简单，但是却非常的有效。我之所以喜欢用这种方式和处理按钮是因为我不必为创建10000个图标而去启动Photoshop一一创建。如果我们仔细观察一下代码，你就会发现后面两个按钮其实是两个链接。

Save



Change Password



Cancel