1、用css創建表單css
本篇資料主要介紹使用css設置表單元素的方法。html
表單是網頁與用戶交互所不可缺乏的元素,表單是網頁的訪問者進行交互的接口,例如你們都常遇到的:網上註冊、網上登陸、網上交易、網上投票、網站留言板等。瀏覽器
表單用於向服務器傳輸數據。服務器
表單中的元素不少,包括經常使用的輸入框、文本框、單選項、複選框、下拉菜單、和按鈕等。post
html部分:學習
Form:定義表單的範圍。字體
Input:定義表單中的各個具體表單元素。網站
name:名稱,設定此一欄的名稱,程式中常會用到。spa
size:數值,設定此一欄位顯現的寬度。rest
value:預設內容,設定此一欄位的預設內容。
align:對齊方式,設定此一欄位的對齊方式。
maxkength:數值,設定此一欄位可設定輸入的最大長度。
文本輸入框:
將type屬性設置爲text,就會產生文本框。
<p> 姓名:<input type="text"></p>
密碼輸入框:
將type屬性設置爲password時,就會產生一個密碼輸入框。
<p>密碼:
<input type="password">
</p>
<p>確認密碼:
<input type="password">
</p>
單選按鈕:
將type屬性設置爲radio,就會產生單選按鈕。
《單選按鈕》
<p>性別:
<input type="radio" name="gender" value="radio"checked="true">男
<input type="radio" name="gender" value="radio">女
</p>
複選按鈕:
將type屬性設置爲checkbox時,就會產生複選按鈕。
《複選按鈕》
<p>專業:
<input type="checkbox" name="interest">美術類
<input type="checkbox" name="interest">理科類
<input type="checkbox" name="interest">文科類
<input type="checkbox" name="interest">體育類
</p>
按鈕:
將type屬性設置爲submit時,即爲「提交按鈕」;將type設置爲reset時,即爲重置按鈕。
《提交按鈕》
<p>
<input type="submit" value="註冊提交">
<input type="reset" value="重置內容">
</p>
上面介紹的都是使用<input>標記的,關鍵在於type屬性的值是什麼!
多行文本框:
若須要訪問者輸入較多的文字的話,一般使用多行文本框,使用<textarea>/標記來實現的。
《多行文本框》
<p>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</p>
下拉列表框(下拉的菜單)
下拉列表框是使用<select>標記來實現的。
《下拉列表框》
<p>城市地址:
<select name="select" size="4" id="select">
<option value="1">中國北部地區</option>
<option value="2">中國南部地區</option>
<option value="3">中國東部地區</option>
<option value="4">中國西部地區</option>
</select>
</p>
至此,簡單的案例就所有完成了。爲了方便讀者分析,將上面的代碼所有合起來,進行看效果圖。
簡單的案列:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>戀愛交友網</title>
</head>
<body>
<form method="post">
<p> 姓名:<input type="text"></p>
<p>密碼:
<input type="password">
</p>
<p>確認密碼:
<input type="password">
</p>
<p>性別:
<input type="radio" name="gender" value="radio"checked="true">男
<input type="radio" name="gender" value="radio">女
</p>
<p>專業:
<input type="checkbox" name="interest">美術類
<input type="checkbox" name="interest">理科類
<input type="checkbox" name="interest">文科類
<input type="checkbox" name="interest">體育類
</p>
<p>城市地址:
<select name="select"id="select">
<option value="1">中國北部地區</option>
<option value="2">中國南部地區</option>
<option value="3">中國東部地區</option>
<option value="4">中國西部地區</option>
</select>
</p>
<p>特長:
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</p>
<p>
<input type="submit" value="註冊提交">
<input type="reset" value="重置內容">
</p>
</form>
</body>
</html>
效果圖:
css部分:
一、先來看一份「簡單案例2」:
<!DOCTYPE html> <head> <title>表單</title> <style> <!-- form{ /*設置整個表單樣式*/ border: 2px dotted #AAAAAA; padding: 1px 6px 1px 6px; margin:0px; font:14px Arial; } input{ /* 全部input標記 */ color: #00008B; } input.txt{ /* 文本框單獨設置 */ border: 1px inset #00008B; background-color: #ADD8E6; } input.btn{ /* 按鈕單獨設置 */ color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; padding: 1px 2px 1px 2px; } select{ /*設置下拉列表框*/ width: 80px; color: #00008B; background-color: #ADD8E6; border: 1px solid #00008B; } textarea{ /*設置多行文本框*/ width: 200px; height: 40px; color: #00008B; background-color: #ADD8E6; border: 1px inset #00008B; } --> </style> </head> <body> <form method="post"> <p>請輸入您的姓名:<br><input type="text" name="name" id="name" class="txt"></p> <p>請選擇你最喜歡的顏色:<br> <select name="color" id="color"> <option value="red">紅</option> <option value="green">綠</option> <option value="blue">藍</option> <option value="yellow">黃</option> <option value="cyan">青</option> <option value="purple">紫</option> </select>
</p> <p>請問你的性別:<br> <input type="radio" name="sex" id="male" value="male" class="rad">男<br> <input type="radio" name="sex" id="female" value="female" class="rad">女
</p> <p>你喜歡作些什麼:<br> <input type="checkbox" name="hobby" id="book" value="book" class="check">看書 <input type="checkbox" name="hobby" id="net" value="net" class="check">上網 <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check">睡覺
</p> <p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4" class="txtarea"></textarea></p> <p><input type="submit" name="btnSubmit" id="btnSubmit" value="提交" class="btn"></p> </form> </body> </html>
一、首先body部分十分簡單,就一個簡單的表單結構;
二、設置整個表單的樣式,給表單加一個邊框,設置一下內邊距和外邊距,再設置表單裏用14像素的Arial字體;
三、給全部的輸入框中的字添加同一種顏色;
四、給帶有「txt」類別的<input>標記單獨設置 1像素的深藍色內陷邊框,給背景上個淺天藍色;
五、給帶有「btn」類別的<input>標記單獨設置字體顏色爲「深藍色」、背景色爲「淺天藍色」、添加1像素的深藍色外凸邊框、內邊距;
六、給下拉菜單設置寬度,裏面的字體設置爲「深藍色」,背景色爲「淺天藍色」,添加1像素的深藍色實線邊框;
七、給多行文本框設置寬度、高度,裏面的字體設置爲「深藍色」,背景色爲「淺天藍色」,添加1像素的深藍色實線邊框;
效果圖:
二、對齊文本框和旁邊的圖像按鈕
一個文本框旁邊一個按鈕是很常常用到的網頁內容,好比搜索框等等,而若是旁邊的按鈕使用圖像的話,他們豎直方向就很不容易對齊,即便使用 vertical-align、padding和margin等都不行(特別是在IE中,Firefox中使用vertical-align還能夠)。
「簡單案例3」:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<title>搜索框</title>
</head>
<body>
<form>
<input type="text" name="foo" value="Test Field"/>
<input type="image" src="按鈕.png" />
</form>
</body>
</html>
效果圖:
上圖中徹底不對稱,解決方案很是簡單,只要給圖片來個絕對定位,上述代碼修改成:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<title>搜索框</title>
</head>
<body>
<form> <input type="text" name="foo" value="Test Field"/>
<input type="image" src="搜索框.png" style="position:absolute"/>
</form>
</body>
</html>
效果圖:
IE瀏覽器 Firefox瀏覽器
到這裏,在豎直方向經對齊得很好了,水平方向上;在Firefox和IE中,還略有區別,在Firefox中兩者緊靠在一塊兒,在IE中,兩者之間有一點點間隔。
本篇學習資料主要介紹表單的製做,以及使用css設置表單元素的方法。