（10）用css創建表單

時間 2019-11-18

標籤 css 創建表單欄目 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設置表單元素的方法。