表單的目的是為了跟用戶進行交互,收集用戶資料
在HTML中,一個完整的表單通常由表單控件(也稱為表單元素)、提示信息和表單域3個部分構成。
表單控件:
包含了具體的表單功能項,如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。
提示信息:
一個表單中通常還需要包含一些說明性的文字,提示用戶進行填寫和操作。
表單域:相當於一個容器,用來容納所有的表單控件和提示信息,可以通過他定義處理表單數據所用程序的url地址,以及數據提交到服務器的方法。如果不定義表單域,表單中的數據就無法傳送到后台服務器。
input 控件(重點)
<input />標簽為單標簽,type屬性為其最基本的屬性,其取值有多種,用於指定不同的控件類型。除了type屬性之外,<input />標簽還可以定義很多其他的屬性
label標簽(理解)
label 標簽為 input 元素定義標注(標簽)。
作用: 用於綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點
如何綁定元素呢?
for 屬性規定 label 與哪個表單元素綁定。
textarea控件(文本域)
如果需要輸入大量的信息,就需要用到<textarea></textarea>標簽。通過textarea控件可以輕松地創建多行文本輸入框,其基本語法格式如下:
<textarea cols="每行中的字符數" rows="顯示的行數">
文本內容
</textarea>
下拉菜單
使用select控件定義下拉菜單的基本語法格式如下
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
注意:
-
<select></select>中至少應包含一對<option></option>。
-
在option 中定義selected =" selected "時,當前項即為默認選中項。
表單域
在HTML中,form標簽被用於定義表單域,即創建一個表單,以實現用戶信息的收集和傳遞,form中的所有內容都會被提交給服務器。創建表單的基本語法格式如下:
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</form>
常用屬性:
-
Action 在表單收集到信息后,需要將信息傳遞給服務器進行處理,action屬性用於指定接收並處理表單數據的服務器程序的url地址。
-
method 用於設置表單數據的提交方式,其取值為get或post。
-
name 用於指定表單的名稱,以區分同一個頁面中的多個表單。
注意: 每個表單都應該有自己表單域。
通過下面案例來了解表單: