被遗忘掉的button标签_HTML/Xhtml_网页制作-html教程-PHP中文网

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:45 PM

动作可以我们按钮标签

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

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

还不错哦。实际上，根据W3C的定义，

Change Password

Cancel

这样做的目的是因为在网页应用程序中很多动作都是事件（REST）驱动的，因此通过一个特定的URL发送用户请求可以把这些动作初始化。使用在两种元素上都可以应用的样式，使我们在维持Ajax和标准提交按钮引起的交互时的样式统一手段更加灵活。
现在你可能会问，为什么我要把图像元素的alt属性留成空白呢？alt是img元素的必要属性，它用于解释图像的内容，而这里却没有图像的相关说明，这的确有点费解。不过，与“缺少”属性不同，属性值“为空”是完全符合标准的，他告诉浏览器这些图像代表了一些完全可以忽略的信息，这也使浏览者不用因为提示信息的遮挡而找不到下一个按钮。由于此处的图标完全是多余的，因此我们宁愿不去浪费用户的时间去查看这个完全是为了实现界面风格统一而使用的图标。
CSS样式表
用于控制这些按钮样式的CSS大部分内容都很直观，不同浏览器中的稍许差别，就会导致我们下面的代码中要分别为他们应用不同的padding值，还好，这一切都是完全可以实现的。
/* BUTTONS */
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
还有一个问题就是，Internet Explorer在呈现长按钮时存在一些bug。有关这方面的信息你可以在Jehiah.cz上找到，不过在上面的CSS代码中我们通过声明width和overflow的值会在一定程度上避免问题的出现。
为按钮添加一点色彩
在Wufoo中，我们为中性动作（这里，作者把change password一类的动作叫作中性动作，把“确定”、“提交”一类的动作叫作正向动作，而把“放弃”、“取消”一类的动作叫作负向动作）的hover值设为蓝色，而把正向动作和负向动作分别设为绿色和红色。下面的样式代码中就是我们用不同的颜色区分“添加”、“保存”一类的正向动作和“取消”、“删除”一类的负向动作的。感觉还不错，当然你也可以选择你喜欢的他颜色来使用。
/* STANDARD */
button:hover, .buttons a:hover{
background-color:#dff4ff;
border:1px solid #c2e1ef;
color:#336699;
}
.buttons a:active{
background-color:#6299c5;
border:1px solid #6299c5;
color:#fff;
}
/* POSITIVE */
button.positive, .buttons a.positive{
color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
background-color:#E6EFC2;
border:1px solid #C6D880;
color:#529214;
}
.buttons a.positive:active{
background-color:#529214;
border:1px solid #529214;
color:#fff;
}
/* NEGATIVE */
.buttons a.negative, button.negative{
color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
background:#fbe3e4;
border:1px solid #fbc2c4;
color:#d12f19;
}
.buttons a.negative:active{
background-color:#d12f19;
border:1px solid #d12f19;
color:#fff;
}
总结
最后要说的是，这仅仅是我们应对Wufoo中需求而设计的解决方案，不过在我们的努力下它表现还不错。但是这并不是唯一方法，你可以找到更多有趣的办法把按钮变成圆角甚至更加丰富多彩。由于
定义和用法
定义一个按钮。在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
可选择的属性
属性值描述DTD
disabled disabled 禁用此按钮。 STF
namebutton_name 规定此按钮的唯一名称。 STF
type* button
* reset定义按钮的类型。 STF
* submit
value some_value 规定按钮的初始值。此值可被脚本修改。 STF
标准属性：
id, class, title, style, dir, lang, xml:lang, accesskey, tabindex
事件属性：
onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

See all articles