表單標籤(掌握)

現實中的表單，類似我們去銀行辦理信用卡填寫的單子。 如下圖

目的是為了收集使用者資訊。

在我們網頁中， 我們也需要跟使用者進行互動，收集使用者資料，此時也需要表單。

在HTML中，一個完整的表單通常由表單控制元件（也稱為表單元素）、提示資訊和表單域3個部分構成。

表單控制元件：

   包含了具體的表單功能項，如單行文字輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。

提示資訊：

    一個表單中通常還需要包含一些說明性的文字，提示使用者進行填寫和操作。

表單域：

  他相當於一個容器，用來容納所有的表單控制元件和提示資訊，可以通過他定義處理表單資料所用程式的url地址，以及資料提交到伺服器的方法。如果不定義表單域，表單中的資料就無法傳送到後臺伺服器。
 

input 控制元件(重點)

在上面的語法中，input /標籤為單標籤，type屬性為其最基本的屬性，其取值有多種，用於指定不同的控制元件型別。除了type屬性之外，input /標籤還可以定義很多其他的屬性，其常用屬性如下表所示。

label標籤(理解)

label 標籤為 input 元素定義標註（標籤）。

作用： 用於繫結一個表單元素, 當點選label標籤的時候, 被繫結的表單元素就會獲得輸入焦點

如何繫結元素呢？

for 屬性規定 label 與哪個表單元素繫結。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
 

textarea控制元件(文字域)

如果需要輸入大量的資訊，就需要用到textarea/textarea標籤。通過textarea控制元件可以輕鬆地建立多行文字輸入框，其基本語法格式如下：

<textarea cols="每行中的字元數" rows="顯示的行數">
  文字內容
</textarea>

下拉選單

使用select控制元件定義下拉選單的基本語法格式如下

<select>
  <option>選項1</option>
  <option>選項2</option>
  <option>選項3</option>
  ...
</select>
 

注意：

1. select</select中至少應包含一對option></option。
2. 在option 中定義selected =" selected "時，當前項即為預設選中項。

表單域

在HTML中，form標籤被用於定義表單域，即建立一個表單，以實現使用者資訊的收集和傳遞，form中的所有內容都會被提交給伺服器。建立表單的基本語法格式如下：

<form action="url地址" method="提交方式" name="表單名稱">
  各種表單控制元件
</form>

常用屬性：

1. Action 在表單收集到資訊後，需要將資訊傳遞給伺服器進行處理，action屬性用於指定接收並處理表單資料的伺服器程式的url地址。
2. method 用於設定表單資料的提交方式，其取值為get或post。
3. name 用於指定表單的名稱，以區分同一個頁面中的多個表單。

注意： 每個表單都應該有自己表單域。

查文件

經常查閱文件是一個非常好的學習習慣。