论坛首页 → 技术讨论区 → 网页设计专栏 → [译]css form design
发表新的主题 发起新的投票 发起新的交易 回复话题
 标题:[译]css form design
  admin
  等级:社区游民
  权限:管理员
  积分:114
  金钱:114
  声望:60
  经验:60
  发帖数:60
  注册时间:2004-4-10
 收藏 编辑 删除   楼主 

原文地址：click here

PS：原文实在是太长太长了，无奈精力有限，只能把核心给翻译了一下

使用 Label
forms_connection.png
Label能够建立form元素与文字说明的桥梁

  1. <label for="firstName">First name</label>
  2. <input id="firstName" name="firstName" type="text" />

这样点击First name文字后，就能自动激活input

Label可以用在以下一些内容

  • checkboxes
  • radio buttons
  • textareas
  • text fields
  • select boxes

submit 按钮 和submit 图象 不需要使用Label，因为它们有自己的value和alt

排序相关元素

使用fieldset可以聚合一系列相关的类别，然后通过legend加以说明

  1. <form action="example.php">
  2. <fieldset>
  3. <legend>Postal Address</legend> 
  4. <label for="street">Street address</label>
  5. <input id="street" name="street" type="text" />
  6. <label for=" suburb">Suburb</label>
  7. <input id="suburb" name="suburb" type="text" />
  8. <label for="state">State</label>
  9. <input id="state" name="state" type="text" />
  10. <label for="postcode">Postcode</label>
  11. <input id="postcode" name="postcode" type="text" />
  12. </fieldset>
  13. </form>

没用CSS修饰的fieldset和legend
forms_unstyled-fields.png


表单布局

Label在表单元素的上面，可以节省横向空间
forms_position-labels-top-399.png

Label在表单元素的左面，左对齐
forms_position-labels-left.png
Label在表单元素的左面，右对齐
forms_position-labels-right-399.png
使用CSS

在这个例子里，html大概是这样

  1. <form action="example.php"> 
  2. <fieldset> 
  3. <legend>Contact Details</legend> 
  4. <ol> 
  5. <li> 
  6. <label for="name">Name:</label> 
  7. <input id="name" name="name" class="text" type="text" /> 
  8. </li> 
  9. <li> 
  10. <label for="email">Email address:</label> 
  11. <input id="email" name="email" class="text" type="text" /> 
  12. </li> 
  13. <li> 
  14. <label for="phone">Telephone:</label> 
  15. <input id="phone" name="phone" class="text" type="text" /> 
  16. </li> 
  17. </ol> 
  18. </fieldset> 
  19. <fieldset> 
  20. <legend>Delivery Address</legend> 
  21. <ol> 
  22. <li> 
  23. <label for="address1">Address 1:</label> 
  24. <input id="address1" name="address1" class="text" 
  25. type="text" /> 
  26. </li> 
  27. <li> 
  28. <label for="address2">Address 2:</label> 
  29. <input id="address2" name="address2" class="text" 
  30. type="text" /> 
  31. </li> 
  32. <li> 
  33. <label for="suburb">Suburb/Town:</label> 
  34. <input id="suburb" name="suburb" class="text" 
  35. type="text" /> 
  36. </li> 
  37. <li> 
  38. <label for="postcode">Postcode:</label> 
  39. <input id="postcode" name="postcode" 
  40. class="text textSmall" type="text" /> 
  41. </li>
  42.  
  43. <li> 
  44. <label for="country">Country:</label> 
  45. <input id="country" name="country" class="text" 
  46. type="text" /> 
  47. </li> 
  48. </ol> 
  49. </fieldset> 
  50. <fieldset class="submit"> 
  51. <input class="submit" type="submit" 
  52. value="Begin download" /> 
  53. </fieldset>
  54. </form>

这里用了前面提到的fieldset-legend-label组合，但是每一个元素都包含于list里，这样方便通过样式来调整。

没有使用css的效果，也就是前面这些代码说呈现出来的
forms_unstyled-lists.png
加上css来调整一下

  1. fieldset { 
  2. margin: 1.5em 0 0 0; 
  3. padding: 0;
  4. }
  5. legend { 
  6. margin-left: 1em; 
  7. color: #000000; 
  8. font-weight: bold;
  9. }
  10. fieldset ol { 
  11. padding: 1em 1em 0 1em; 
  12. list-style: none;
  13. }
  14. fieldset li { 
  15. padding-bottom: 1em;
  16. }
  17. fieldset.submit { 
  18. border-style: none;
  19. }

这样修饰一下就好看一点了
forms_messy-399.png

如果使用上标签，也很简单，一句css就搞定了

  1. label { 
  2. display: block;
  3. }

效果图
forms_neater-399.png

标签左对齐

可以简单的设置float left

  1. label { 
  2. float: left; 
  3. width: 10em; 
  4. margin-right: 1em;
  5. }

forms_wrapped-label.png
但是出现了一个问题，list本身不会因为label的高度增加而增加，使用背景色以便更清楚地观察
forms_wrapped-label-floated.png

解决办法是对父元素也使用左对齐

  1. left-aligned-labels.css (excerpt)
  2. fieldset li { 
  3. float: left; 
  4. clear: left; 
  5. width: 100%; 
  6. padding-bottom: 1em;
  7. }

这些参数都比较讲究，具体可以修改相应值，来看看效果

设置label（左对齐）

  1. left-aligned-labels.css (excerpt)
  2. fieldset.submit { 
  3. float: none; 
  4. width: auto; 
  5. border: 0 none #FFF; 
  6. padding-left: 12em;
  7. }

forms_left-aligned-399.png

设置label（右对齐）

  1. right-aligned-labels.css (excerpt)
  2. label { 
  3. float: left; 
  4. width: 10em; 
  5. margin-right: 1em; 
  6. text-align: right;
  7. }

forms_right-aligned-399.png

设置fieldset和legend的样式

很少见到没有修饰的fieldset和legend，但如果为包含legend的fieldset设置背景色，会发现不同的浏览器有不同的表现方式，IE和其他的浏览器不同，它会把legend包含在里面
forms_legend-differences.png
解决方法是为IE专门引入一个CSS文件

  1. <!--[if lte IE 7]> 
  2. <style type="text/css" media="all"> 
  3. @import "css/fieldset-styling-ie.css"; 
  4. </style>
  5. <![endif]-->

这个是为IE7或者之前的版本所作的兼容，其他的浏览器将会忽略这段代码，文件里面的内容是

  1. legend { 
  2. position: relative; 
  3. left: -7px; 
  4. top: -0.75em;
  5. }
  6. fieldset ol { 
  7. padding-top: 0.25em;
  8. }
  9. fieldset { 
  10. position: relative;
  11. }

如果没有设置fieldset的position为relative，那么就会像下面这样
forms_ie-weird.png

由于legend在各个浏览器里的padding不同，所以我们要为它设置一个值。

  1. fieldset-background-color.css (excerpt)
  2. legend { 
  3. margin-left: 1em; 
  4. padding: 0; 
  5. color: #000; 
  6. font-weight: bold;
  7. }

设置fieldset的边框

  1. fieldset-background-color.css (excerpt)
  2. fieldset { 
  3. float: left; 
  4. clear: both; 
  5. width: 100%; 
  6. margin: 0 0 1.5em 0; 
  7. padding: 0; 
  8. border: 1px solid #BFBAB0; 
  9. background-color: #F2EFE9;
  10. }

我们不希望在提交按钮后面再有什么边框或背景，所以很简单，去掉就行

  1. fieldset-background-color.css (excerpt)
  2. fieldset.submit { 
  3. float: none; 
  4. width: auto; 
  5. border-style: none; 
  6. padding-left: 12em; 
  7. background-color: transparent;
  8. }

改变默认的fieldset的外观

很多人没有用fieldset和legend，因为他们觉得样式与网站风格不协调，而且也不好调整，但是调整一下也不难

第一步，我们将fieldset合并起来，试着将fieldset的margin bottom设为0，但它看起来像是这样
forms_fieldset-collapse.png
下面一个legend的font height，导致了不能合并，我们也有办法解决，那就是使用-margin

  1. fieldset { 
  2. float: left; 
  3. clear: both; 
  4. width: 100%; 
  5. margin: 0 0 -1em 0; 
  6. padding: 0 0 1em 0; 
  7. border-style: none;
  8. border: 1px solid #BFBAB0; 
  9. background-color: #F2EFE9;
  10. }

forms_fieldset-alternating-399.png

但如果想把legend的文字往下移呢，可能会本能地想到改变position，但是在FF下，确是无效的，唯一的解决办法就是使用span

  1. fieldset-alternating.html (excerpt)
  2. <legend> 
  3. <span>Contact Details</span>
  4. </legend>
  1. legend span { 
  2. position: absolute; 
  3. left: 0.74em; 
  4. top: 0; 
  5. margin-top: 0.5em; 
  6. font-size: 135%;
  7. }

在legend里关掉margin，不然会造成margin的距离加倍

  1. fieldset-alternating.css (excerpt)
  2. legend { 
  3. padding: 0; 
  4. color: #545351; 
  5. font-weight: bold;
  6. }

最后就像这样
forms_fieldset-headings-399.png

要改变fieldset的背景，可以设置样式

  1. <fieldset>
  2. ...
  3. </fieldset>
  4. <fieldset class="alt">
  5. ...
  6. </fieldset>
  7. <fieldset>
  8. ...
  9. </fieldset>
  10. <fieldset class="alt">
  11. ...
  12. </fieldset>
  1. fieldset-alternating.css (excerpt)
  2. fieldset.alt { 
  3. background-color: #E6E3DD;
  4. }

必填区域和错误信息

  1. required-fields.html (excerpt)
  2. <label for="name"> 
  3. Name: <em>required</em>
  4. </label>
  1. required-fields.css (excerpt)
  2. label em { 
  3. display: block; 
  4. color: #060; 
  5. font-size: 85%; 
  6. font-style: normal; 
  7. text-transform: uppercase;
  8. }

可以通过控制em元素的block与none来显示错误信息
forms_required.png

显示必填信息

  1. required-fields-star1.html (excerpt)
  2. <label for="name"> 
  3. Name: <em><img src="images/required_star.gif" 
  4. alt="required" /></em>
  5. </label>

forms_required-stars.png

在右边显示错误信息

  1. error-fields2.css (excerpt)
  2. label { 
  3. position: relative; 
  4. float: left; 
  5. width: 10em; 
  6. margin-right: 1em;
  7. }
  8. label strong {
  9. position: absolute;
  10. left: 27em;
  11. top: 0.2em;
  12. width: 19em;
  13. color: #C00;
  14. font-size: 85%;
  15. font-weight: normal
  16. ;text-transform: uppercase;
  17. }

“右边”是通过把label的长度与input的长度加起来得到的。
forms_required-text-aligned.png

终于结束了，如果你看到这句话了，那么我佩服你

www.bluestation.net
一把刀，给你只能切西瓜，但给一个武林高手手中，这是一把可以将江湖闹得沸沸扬扬的神器
2007-6-20 10:36:02IP: 123.5.82.* 
  donny
  等级:社区游民
  权限:普通用户
  积分:1
  金钱:1
  声望:1
  经验:1
  发帖数:1
  注册时间:2007-8-4
 编辑 删除 引用   第2楼 

谢啦

 

2007-8-4 19:43:23IP:222.129.97.* 
  admin
  等级:社区游民
  权限:管理员
  积分:114
  金钱:114
  声望:60
  经验:60
  发帖数:60
  注册时间:2004-4-10
 编辑 删除 引用   第3楼 
good
www.bluestation.net
一把刀，给你只能切西瓜，但给一个武林高手手中，这是一把可以将江湖闹得沸沸扬扬的神器
2007-8-29 17:48:36IP:125.40.193.* 
 快速回复
  • 支持UBB,HTML标签

  • 高级回复
    		•
    内容

    操作选项: 加精 解精 奖惩 设专题 设公告 解公告 固顶 总固顶 解固顶 结帖 解结帖 锁帖 解锁 移帖 删帖

    Copyright © 2004-2006  BlueStation.net 豫ICP备05003215号