您的位置: 首页 > 技术文档 > 网页制作 > 重新认识 button 标签
JavaScript 中的作用域 回到列表 需要掌握的八个CSS布局技巧
 重新认识 button 标签

作者:mienflying 时间: 2007-07-26 文档类型:翻译 来自:蓝色理想

第 1 页 重新认识 button 标签 [1]
第 2 页 重新认识 button 标签 [2]

翻译原文:
http://diger.cn/article.asp?id=359

英文原文:
http://particletree.com/features/rediscovering-the-button-element/

对每一个程序设计者来说,为用户创建一个统一的界面是一个不变的追求。网站中建立一致性是特别困难的,根据浏览器和操作系统的严重不同,几而且乎什么能做和不能做是任意的,所以视觉表现也很不一样。在任何地方比你处理表单元素时和建立标准的外观的战斗中最大的失败变得更加显然的就是最有名的提交按钮。

照现在这个样子,用Type="submit"输入即丑陋(Firefox),还有点神病(Internet Explorer)或者十分玩固(Safari)。用的最多的办法是使用图片输入和我们自己创建这个该死的东西。这是很不幸的,因为每次我们需要一个新的按钮时就要被迫于打开Photoshop的单调乏味。我们需要的是一些更好的东西——一些对设计者更加灵活和有意义的东西。幸运的是解决方案已经有了而且它只需要一点爱,我的朋友们,请允许我介绍我的小朋友给你吧:<button>元素。

Inputs VS Buttons

这里是你的标准提交按钮标记:

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

它在三兄弟里看起来是这样的:

嗯,这里是提交时通过创建一个按钮元素时的标记:

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

它看起来是这样的:

这些按钮就像上面我们的副本一样工作和表现是一样的。另外,为了提交表单,你可以使他们无效,添加一个accesskey或者指定一个tabindex。除了视觉冷淡以外Safari好像拥有它们(并没有使得我们能够利用我们的优势来面对绿色的界面),<button>标签最酷的地方在于你可以把有用的HTML标签放进它们,比如图片:

就像这样:

非常好。(好了,他们有点丑陋,但是我说过他们需要一点爱。)事实上,根据W3C,这些特殊的视觉差异正是为什么<button>元素被创建的原因。

引用:
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

因此,我们正在寻找一种设计方案同时在这里我们的朋友写着一本伟大的互联网手册中有一部分标记好像正好在这个问题上可以帮助我们。这是很方便的,然而不幸的是大部分设计师和开发者甚至不知道这样一个标签存在。现在,在我用按钮标签取代image input之前,我确定这个标签和CSS必须满足一些条件:

条件:

引用:
1、它们要看起来像按钮。
2、它们在不同的浏览器里看起来要一样。
3、我用在按钮上的样式需要同样用在我可能会用的链接上。
4、标签应该是灵活的,易用于许多不同的情况。
5、我将能够有效地使用图标和色彩来传递将会发生的交互类型的信息。

带着这些适当的挑战,我在解决了夸浏览器的挑战后钻进了CSS之中,得出了下面的结果:

结果:

没有什么了不起的,简单,但有效。现在,我喜欢用这种方式处理按钮是因为我可以使用FAMFAMFAM的1000个图标库来举例说明大量可笑的想法和动作而不用每一次我需要新东西的时候非得用Photoshop来做一些东西。如果我们快速看一下这些标签,你会注意到最后那两个按钮实际上就像:

<div class="buttons">
    <button type="submit" class="positive">
        <img src="/images/icons/tick.png" alt=""/>
        Save
    </button>
    <a href="/password/reset/">
        <img src="/images/icons/textfield_key.png" alt=""/>
        Change Password
    </a>
    <a href="#" class="negative">
        <img src="/images/icons/cross.png" alt=""/>
        Cancel
    </a>
</div>

这个有用的原因是网页程序中的许多动作是依靠激发的,因而通过一个链接简单的发送一个用户到一个特殊的URL将引发它们需要做的动作。使用样式可以为两个元素(链接和按钮)工作,无论是用于AJAX或者标准提交都能给我们保持交互方法的一致和适当的灵活性。

只是一个短暂旁白,你可能想知道为什么在那些图片中我让ALT标签空白呢。可能会觉得惊奇于alt属性在每个图片都是必须的,事实上不是这样的。空的alt属性是完全有效的和有利于屏幕前的人知道哪些信息是有效忽略,当你的用户努力寻找下一个目标时节省他们的宝贵时间。由于这些图标确实是多余的,我宁愿不去浪费用户睐接收我使用的图片而不是接着呈现出来。他们将只会收到“Submit”而不是“Checkmark Submit”,那确实会让事情变的有点乱。

出处:蓝色理想
责任编辑:moby

上一页 下一页 重新认识 button 标签 [2]

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
(X)HTML Strict 下的嵌套规则
Ajax标签导航效果
用html为flash页面添加音乐
Flex2 学习笔记 Ⅲ
语义化你的HTML标签和属性
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:1/21个记录/页 转到 页 共2个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2