(10)用css創建表單

 

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">男 &nbsp; &nbsp; &nbsp;
       <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設置表單元素的方法。

相關文章
相關標籤/搜索