HTML與CSS教學-第九章 建立表單

 

第九章 建立表單
本章要點
常用表單標記的意義及使用
表單布局標記的意義及使用

目錄：
9.1 表單的作用
9.2 表單標記
9.3 表單布局標記

9.1  表單的作用
HTML中的表單(form)是網頁中最常用的組件，是網站伺服器端與客戶
端之間溝通的橋樑。表單在網上隨處可見，它們被用於在登入頁面輸
入使用者名稱和密碼，對部落格進行評論等。

9.2  表單標記
1.form
可用<form>標記來定義一個表單，當一個表單被定義後就可在表單內放置表單標記。表單使用<form>作為開始標記，以</form>結尾。在一個HTML頁面中允許有多個表單，以表單的名字（name）和（id）作為它們之間的區分。表單格式的代碼如下：
<form 表單標記的各種屬性設定>
 設定各種表單標記
</form>

2.input
最常用的表單控制項是input，這一類的表單控制項被稱為輸入類控制項，通過<input>來標記。輸入類控制項有很多種類型，通過type屬性進行設定。<input>標記可以為表單提供單行文本輸入框、選項按鈕、複選按鈕、普通按鈕等。

3.textarea
HTML語言提供了多行文本的輸入框，這是接收大量資料的文本區，它可以用於資料的輸入，又可用於資料的顯示地區。實現多行文本輸入區的標記為<textarea>，其文法為：
<textarea class=“class name”id=“ID name”cols=“number”rows=“number”style=“style information”read only>在文本區中顯示內容</textarea>

4. select和option
HTML語言支援具有選擇功能的標記<select>。使用選擇功能方便了使用者在多個選項中進行選擇，提高了視窗地區的利用率。通過對<select>標記的屬性size的值的設定，可產生不同的列表形式：如下拉式清單和滾動列表。對屬性multiple進行設定，可以使同時選擇多個清單項目。<select>標記是定義一個列表結構的標記，列表中的清單項目（或稱功能表項目）是真正被選擇的對象，對它的定義要用<option>標記。因此，設定一個列表，要同時使用<select>和<option>標記。

<select class=“class name” id=“id name” name=“selectname” size=“number” multiple >
option標記
</select>

5.optgroup
<optgroup>標記可以對選項進行分組，通過<optgroup>標記可以對選項進行分類，並使用label屬性在下拉式清單裡顯示為一個不可選的縮排標題。文法如下：

 <optgroup label="組名">

9.3  表單布局標記
1.fieldset和legend
<fieldset>標記可將表單內的相關標記分組。當一組表單控制項放到<fieldset>標記內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D效果，甚至可建立一個子表單來處理這些標記。

<legend>標記為<fieldset>標記定義標題，<legend>且必須在<fieldse>標記中使用。

2.label
 可以對form表單中的常值內容關聯一個<label>標記，並使用<label>標記的for屬性使其與表單組件關聯起來，效果為單擊文本是，游標顯示在相關聯的表單組件內。使用時要將lable綁定到其它的控制項，將<lable>標記的for屬性設定為與該控制項的id相同。將lable綁定到控制項的name屬性沒有作用。文法為：

 <label for="fname">顯示內容字串</label>