CSS form design

原文地址：click here

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

使用 Label

Label能够建立form元素与文字说明的桥梁

<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加以说明

<form 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>
</form>

没用CSS修饰的fieldset和legend

表单布局

Label在表单元素的上面，可以节省横向空间

Label在表单元素的左面，左对齐

Label在表单元素的左面，右对齐

使用CSS

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

<form 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>
</form>

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

没有使用css的效果，也就是前面这些代码说呈现出来的

加上css来调整一下

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;
}

这样修饰一下就好看一点了

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

label {
display: block;
}

效果图

标签左对齐

可以简单的设置float left

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

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

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

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

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

设置label（左对齐）

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

设置label（右对齐）

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

设置fieldset和legend的样式

很少见到没有修饰的fieldset和legend，但如果为包含legend的fieldset设置背景色，会发现不同的浏览器有不同的表现方式，IE和其他的浏览器不同，它会把legend包含在里面

解决方法是为IE专门引入一个CSS文件

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

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

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

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

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

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

设置fieldset的边框

fieldset-background-color.css (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.css (excerpt)
fieldset.submit {
float: none;
width: auto;
border-style: none;
padding-left: 12em;
background-color: transparent;
}

改变默认的fieldset的外观

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

第一步，我们将fieldset合并起来，试着将fieldset的margin bottom设为0，但它看起来像是这样

下面一个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;
}

但如果想把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.css (excerpt)
legend {
padding: 0;
color: #545351;
font-weight: bold;
}

最后就像这样

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

<fieldset>
...
</fieldset>
<fieldset class="alt">
...
</fieldset>
<fieldset>
...
</fieldset>
<fieldset class="alt">
...
</fieldset>

fieldset-alternating.css (excerpt)
fieldset.alt {
background-color: #E6E3DD;
}

必填区域和错误信息

required-fields.html (excerpt)
<label for="name">
Name: <em>required</em>
</label>

required-fields.css (excerpt)
label em {
display: block;
color: #060;
font-size: 85%;
font-style: normal;
text-transform: uppercase;
}

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

显示必填信息

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

在右边显示错误信息

error-fields2.css (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的长度加起来得到的。

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