學習筆記（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>