06月

5

[译]css form design

文章分类：css, misc  查看次数：2,288 + 240

原文地址：click here

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

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

<label for="firstName">First name</label>
<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加以说明

< action="example.php">
<fieldset>
<legend>Postal Address</legend>  
<label for="street">Street address</label>
<input id="street" name="street" type="text" />
<label for=" suburb">Suburb</label>
<input id="suburb" name="suburb" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="postcode">Postcode</label>
<input id="postcode" name="postcode" type="text" />
</fieldset>
</>
 

没用修饰的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
使用

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

< action="example.php">  
<fieldset>  
<legend>Contact Details</legend>  
<ol>  
<li>  
<label for="name">Name:</label>  
<input id="name" name="name" class="text" type="text" />  
</li>  
<li>  
<label for="email">Email address:</label>  
<input id="email" name="email" class="text" type="text" />  
</li>  
<li>  
<label for="phone">Telephone:</label>  
<input id="phone" name="phone" class="text" type="text" />  
</li>  
</ol>  
</fieldset>  
<fieldset>  
<legend>Delivery Address</legend>  
<ol>  
<li>  
<label for="address1">Address 1:</label>  
<input id="address1" name="address1" class="text"  
type="text" />  
</li>  
<li>  
<label for="address2">Address 2:</label>  
<input id="address2" name="address2" class="text"  
type="text" />  
</li>  
<li>  
<label for="suburb">Suburb/Town:</label>  
<input id="suburb" name="suburb" class="text"  
type="text" />  
</li>  
<li>  
<label for="postcode">Postcode:</label>  
<input id="postcode" name="postcode"  
class="text textSmall" type="text" />  
</li>
 
<li>  
<label for="country">Country:</label>  
<input id="country" name="country" class="text"  
type="text" />  
</li>  
</ol>  
</fieldset>  
<fieldset class="submit">  
<input class="submit" type="submit"  
value="Begin download" />  
</fieldset>
</>
 

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

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

fieldset {  
margin: 1.5em 0 0 0;  
padding: 0;
}
legend {  
margin-left: 1em;  
color: #000000;  
font-weight: bold;
}
fieldset ol {  
padding: 1em 1em 0 1em;  
list-style: none;
}
fieldset li {  
padding-bottom: 1em;
}
fieldset.submit {  
border-style: none;
}
 

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

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

label {  
display: block;
}
 

效果图
forms_neater-399.png

标签左对齐

可以简单的设置float left

label {  
float: left;  
width: 10em;  
margin-right: 1em;
}
 

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

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

left-aligned-labels. (excerpt)
fieldset li {  
float: left;  
clear: left;  
width: 100%;  
padding-bottom: 1em;
}
 

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

设置label（左对齐）

left-aligned-labels. (excerpt)
fieldset.submit {  
float: none;  
width: auto;  
border: 0 none #FFF;  
padding-left: 12em;
}
 

forms_left-aligned-399.png

设置label（右对齐）

right-aligned-labels. (excerpt)
label {  
float: left;  
width: 10em;  
margin-right: 1em;  
text-align: right;
}
 

forms_right-aligned-399.png

设置fieldset和legend的样式

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

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

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

legend {  
position: relative;  
left: -7px;  
top: -0.75em;
}
fieldset ol {  
padding-top: 0.25em;
}
fieldset {  
position: relative;
}
 

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

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

fieldset-background-color. (excerpt)
legend {  
margin-left: 1em;  
padding: 0;  
color: #000;  
font-weight: bold;
}
 

设置fieldset的边框

fieldset-background-color. (excerpt)
fieldset {  
float: left;  
clear: both;  
width: 100%;  
margin: 0 0 1.5em 0;  
padding: 0;  
border: 1px solid #BFBAB0;  
background-color: #F2EFE9;
}

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

fieldset-background-color. (excerpt)
fieldset.submit {  
float: none;  
width: auto;  
border-style: none;  
padding-left: 12em;  
background-color: transparent;
}
 

改变默认的fieldset的外观

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

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

fieldset {  
float: left;  
clear: both;  
width: 100%;  
margin: 0 0 -1em 0;  
padding: 0 0 1em 0;  
border-style: none;
border: 1px solid #BFBAB0;  
background-color: #F2EFE9;
}
 

forms_fieldset-alternating-399.png

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

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

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

fieldset-alternating. (excerpt)
legend {  
padding: 0;  
color: #545351;  
font-weight: bold;
}
 

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

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

<fieldset>
...
</fieldset>
<fieldset class="alt">
...
</fieldset>
<fieldset>
...
</fieldset>
<fieldset class="alt">
...
</fieldset>
 
fieldset-alternating. (excerpt)
fieldset.alt {  
background-color: #E6E3DD;
}
 

必填区域和错误信息

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

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

显示必填信息

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

forms_required-stars.png

在右边显示错误信息

error-fields2. (excerpt)
label {  
position: relative;  
float: left;  
width: 10em;  
margin-right: 1em;
}
label strong {
position: absolute;
left: 27em;
top: 0.2em;
width: 19em;
color: #C00;
font-size: 85%;
font-weight: normal
;text-transform: uppercase;
}
 

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

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

相关文章

评论

共5 条评论 to “[译]css form design”

  1. ttim7077 on 2007-06-21 10:30 am
    Gravatar

    嘿嘿..我真的看到这句话了..

    [回复此评论]

  2. awflasher on 2007-06-22 4:48 pm
    Gravatar

    我也看到了：）

    [回复此评论]

  3. llinzzi on 2007-06-22 7:00 pm
    Gravatar

    我以前都是把input放在label里面使用的。感觉结构上比较好

    [回复此评论]

  4. buzhizhe on 2007-06-23 3:06 pm
    Gravatar

    我看到了,不过,我是浏览了前面的代码然后直接把滚动条拉下来的:D

    [回复此评论]

  5. Kenn on 2007-06-30 1:48 pm
    Gravatar

    哈哈……对于我这个"饥饿"的人来说能看到这里并不值得你佩服，
    很感谢你，：）

    [回复此评论]

发表评论