表單

1. 表單（p184）：用來採集使用者輸入到網頁中的資料。其功能是收集使用者資訊，並將資訊傳送給後臺伺服器，從而實現網頁與使用者之間的互動。表單通常用於使用者登入、留言簿、網上報名、產品訂單、網上調查及搜尋介面等。

  表單的組成部分（p184）：

表單域：相當於一個容器 包含表單標籤和各種表單控制元件。

表單標籤：一些說明性文字，提示使用者進行填寫或選擇。

表單控制元件：包含文字域、複選框、檔案域、影象域和按鈕等。（p185）

2.  操作：建立表單（p184-188）

  ①定義表單域：

<form name=”表單名稱” method=”提交方式” action=”url地址

 各種表單控制元件

</form>

②在表單域內插入表格，主要用於表單各個控制元件的佈局。因為表單控制元件是行級元素，不能單個一行顯示。表格做簡單佈局，整齊劃一。

  ③在表格的單元格內，插入表單標籤和表單控制元件。

3. 表單標籤 主要是文字域和按鈕 其他參考p185

 ①文字域：

    單行文字域和密碼域 <input>標籤 單標籤不成對出現

多行文字域 <textarea> </textarea> 成對標籤

文字域：name=”” 用於標明該文字域的名稱。

字元寬度：size=”” 設定文字域中最多可顯示的字元數。

最多字元數：maxlength=

型別：type=”text/password” 設定文字域的型別，可在單行、多行、密碼3個型別中任選一個。如果是密碼型別，則網頁中密碼框內容用*顯示。

如果是多行文字域，程式碼有變化。

初始值：value=”” 設定文字域的初始值，即在首次載入表單時文字域中顯示的值。

類：class=””或者id=””將CSS規則應用於文字域物件。

②按鈕 

包括普通按鈕 提交按鈕 重置按鈕 <input>標籤 單標籤 不成對出現

按鈕名稱：name=”” 用於輸入選中按鈕的名稱，每個按鈕的名稱不能相同。

值：value=”” 設定按鈕上顯示的文字。

動作：type=”” 設定使用者單擊按鈕時將發生的操作，包括3個選項。

  提交表單：type=”submit”單擊按鈕時，將表單資料提交到表單指定的處理程式處理。

  重設表單：typy=”reset”將表單域內的各物件值還原為初始值。

  無：type=”button”單擊按鈕時，選擇為該按鈕附加的行為或指令碼。

類：class=”” 或者id=”” 將CSS規則應用於按鈕。

③ 複選框（複選框組）

 複選框<input>標籤 注意：<input>標籤是行級標籤 同行顯示，不會自動換行 。可以使用換行標籤<br />來實現換行。

    複選框名稱：name=”” 輸入一個名稱。

    選定值：value=”” 輸入一個選取該複選框時要傳送給伺服器斷的應用程式或者處理指令碼的值。

初始狀態：checked="checked" “已勾選”項，瀏覽器首次載入時該選項處於被選定狀態。

複選框組：自動新增一組（自定義個數）複選框。

名稱：name=”” 為複選組框輸入一個名稱。

複選框“+”“-”：增加或者刪除一個複選框。單擊上下按鈕為複選框項排序。

標籤：單擊標籤下面的“複選框”，可以輸入一個新名稱。下圖“運動”“愛好”等在此輸入設定。

值：value=”” 單擊下面複選框文字，可輸入一個新值。

佈局，使用：使用哪種佈局方式進行換行。儘量選擇換行符<br />，整體表單佈局我們使用表格，另外，複選框組內每一項可以橫向顯示，在程式碼區域刪掉<br />換行標籤就可以。

④單選按鈕（單選按鈕組）：

多個選項中只能選擇一個。儘量使用插入單選按鈕組。因為單選按鈕每一項之間有互斥性，只能選擇一個。一組中的所有單選按鈕都必須有同樣的名稱，但域值不同。

型別：type=”radio”

⑤檔案域：

上傳檔案，或者註冊時上傳頭像照片。型別：type=”file”

⑥下拉列表：

選擇年月日，或者學院、專業時。寫在<select></select>標籤之間。

列表的每一項寫在<option></option>標籤內。

初始化時選定：selected=”selected”瀏覽器中顯示的選項。

⑦影象域：

通過影象域製作各具特色的按鈕影象代替預設的按鈕。

 另一種做特色按鈕的方法就是為按鈕新增CSS樣式。

 各類表單控制元件及標籤

4. 使用CSS設定表單樣式（美化表單、表單控制元件）（p188-190）

    ①表單<form></form>標籤 可以設定width:220px;（寬）、height:75px;（高）、background-color:red;（背景色）、border:1px solid blue;（邊框）、padding:10px;（內邊距）等屬性。

②表單控制元件 1  可以使用標籤選擇器定義，注意標籤所屬父元素。使用標籤選擇器定義樣式，會影響到網頁中所有標籤。如果某些標籤想要不同效果，需另外設定。

在此可以設定父元素引用類，再定義父元素下表單標籤樣式。

           2  在表單控制元件便籤內引用類、ID選擇器。這樣需要每個標籤都引用。

 注意：樣式設定方法擇優而選。