CSS form design
原文地址:click here
PS:原文实在是太长太长了,无奈精力有限,只能把核心给翻译了一下
使用 Label
Label能够建立form元素与文字说明的桥梁
<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加以说明
<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在表单元素的左面,右对齐
使用CSS
在这个例子里,html大概是这样
<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来调整一下
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就搞定了
display: block;
}
标签左对齐
可以简单的设置float left
float: left;
width: 10em;
margin-right: 1em;
}
但是出现了一个问题,list本身不会因为label的高度增加而增加,使用背景色以便更清楚地观察
解决办法是对父元素也使用左对齐
fieldset li {
float: left;
clear: left;
width: 100%;
padding-bottom: 1em;
}
这些参数都比较讲究,具体可以修改相应值,来看看效果
设置label(左对齐)
fieldset.submit {
float: none;
width: auto;
border: 0 none #FFF;
padding-left: 12em;
}
设置label(右对齐)
label {
float: left;
width: 10em;
margin-right: 1em;
text-align: right;
}
设置fieldset和legend的样式
很少见到没有修饰的fieldset和legend,但如果为包含legend的fieldset设置背景色,会发现不同的浏览器有不同的表现方式,IE和其他的浏览器不同,它会把legend包含在里面
解决方法是为IE专门引入一个CSS文件
<style type="text/css" media="all">
@import "css/fieldset-styling-ie.css";
</style>
<![endif]-->
这个是为IE7或者之前的版本所作的兼容,其他的浏览器将会忽略这段代码,文件里面的内容是
position: relative;
left: -7px;
top: -0.75em;
}
fieldset ol {
padding-top: 0.25em;
}
fieldset {
position: relative;
}
如果没有设置fieldset的position为relative,那么就会像下面这样
由于legend在各个浏览器里的padding不同,所以我们要为它设置一个值。
legend {
margin-left: 1em;
padding: 0;
color: #000;
font-weight: bold;
}
设置fieldset的边框
fieldset {
float: left;
clear: both;
width: 100%;
margin: 0 0 1.5em 0;
padding: 0;
border: 1px solid #BFBAB0;
background-color: #F2EFE9;
}
我们不希望在提交按钮后面再有什么边框或背景,所以很简单,去掉就行
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
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
<legend>
<span>Contact Details</span>
</legend>
position: absolute;
left: 0.74em;
top: 0;
margin-top: 0.5em;
font-size: 135%;
}
在legend里关掉margin,不然会造成margin的距离加倍
要改变fieldset的背景,可以设置样式
...
</fieldset>
<fieldset class="alt">
...
</fieldset>
<fieldset>
...
</fieldset>
<fieldset class="alt">
...
</fieldset>
必填区域和错误信息
<label for="name">
Name: <em>required</em>
</label>
label em {
display: block;
color: #060;
font-size: 85%;
font-style: normal;
text-transform: uppercase;
}
显示必填信息
<label for="name">
Name: <em><img src="images/required_star.gif"
alt="required" /></em>
</label>
在右边显示错误信息
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的长度加起来得到的。
终于结束了,如果你看到这句话了,那么我佩服你