学习笔记（7） CSS表单设计

知识点

• 改变文本框和文本域样式
• 用图片美化按钮
• 用label标签提升用户体验

一、改变文本框和文本域样式

改变边框精细，颜色，添加背景色、背景图像等。

	.text1 {
				border: 1px solid #f60;
				color: #03C;
			}

			.text2 {
				border: 2px solid #390;
				width: 200px;
				height: 24px;
				font-size: 16px;
				font-weight: bold;
				line-height: 1.6;
			}

			.text3 {
				border: 2px solid #C3C;
				height: 20px;
				background: #ffeeff url(./images/map.png) right 3px no-repeat;
			}

			.text4 {
				border: 2px solid #F60;
				width: 150px;
				height: 29px;
				font-size: 16px;
				line-height: 1.6;
				background: url(./images/dw/yu.png) 0 0 no-repeat;
			}

文本：
第一行是文本框的默认样式；
第二行为设置边框和字体颜色的样式；
第三行为设置边框、宽度、高度、字体大小、行高的样式；
第四行设置边框和增加背景色和背景图片；第五行为增加一个gif动画的背景图片。

textare 文本域：

第一个为默认的文本域样式。

第二个为设置边框、宽度为百分比、高度和背景颜色。

overflow:auto定义当内容不超过现在文本域高度时不出现滚动条

代码：

.area {
border: 1px solid #F90;
overflow: auto;
background-color: palegoldenrod;
width: 99%;
height: 100px;
}

二、用图片美化按钮

代码：

.btn08 {
				background: url(/upload/2010-08/28/submit_bg.gif) 0px -64px;
				border: 1px solid #8b9c56;
				height: 32px;
				font-weight: bold;
				padding-top: 2px;
				cursor: pointer;
				font-size: 14px;
				color: #360;
			}

			.btn09 {
				/* background: url(http://www.aa25.cn/upload/2010-08/14/014304_btn_bg.gif) 0 0 no-repeat; */
				background-color: pink;
				width: 107px;
				height: 37px;
				border: none;
				font-size: 14px;
				font-weight: bold;
				color: #d84700;
				cursor: pointer;
			}

三、用label标签提升用户体验

label标签常常被大家忽略了，我们可以对表单的说明文字使用label标签，这样当用户点击文字时，光标就定位到表单上了。

标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。但是，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的 for 属性应当与相关元素的 id 属性相同。
当鼠标点击姓名文字时，光标就会定位到后边的文本框上了；点击男女文字也会选中相应的选项；同理，复选框和文本域也是一样的。

        <p>
			<label for="name">姓名：</label>
			<input type="text" name="name" id="name" />
		</p>