web前端基礎：HTML表單

標題

表單(Form)是 HTML 的一個重要部分，主要用於採集和提交用
戶輸入的信息。舉個簡單的例子，一個讓用戶輸入姓名的 HTML 表
單(Form)。
學習 HTML 表單(Form)最關鍵要掌握的有三個要點：

• 表單控件(Form Controls)
• Action
• Method
  先說表單控件(Form Controls)，通過 HTML 表單的各種控件，用戶可以輸入文字信息，或者從選項中選擇，以及做提交的操作。比如上面的例裏，input type= "text"就是一個表單控件，表示一個單行輸入框。用戶填入表單的信息總是需要程序來進行處理，表單裏的 action就指明瞭處理表單信息的文件。至於 method，表示發送表單信息的方式。method 有兩個值：get 和 post。get 的方式是將表單控件的 name/value 信息經過編碼之後，通過URL 發送(你可以在地址欄裏看到)。而 post 則將表單的內容通過 http 發送，你在地址欄看不到表單的提交信息。那什麼時候用 get，什麼時候用post 呢？一般是這樣來判斷的，如果只是爲取得和顯示數據，用 get；一旦涉及數據的保存和更新，那麼建議用post。
  HTML 表單(Form)常用控件(Controls)
   input type=“text” 單行文本輸入框
   input type=“submit” 將表單(Form)裏的信息提交給表單裏
  action 所指向的文件
   input type=“checkbox” 複選框
   input type=“radio” 單選框
   select 下拉框
   textArea 多行文本輸入框
   input type=“password” 密碼輸入框(輸入的文字用*表示)
  （1）表單控件(Form Control)：單行文本輸入框(input type=“text”)
  單行文本輸入框允許用戶輸入一些簡短的單行信息，比如用戶姓名。例句如下：

<input type="text" name="yourname"> 

（2）表單控件(Form Control)：複選框(input type=“checkbox”)複選框允許用戶在一組選項裏，選擇多個。示例代碼：

<input type="checkbox" name="fruit" value ="apple">蘋果
<br>
<input type="checkbox" name="fruit" value ="orange">桔子
<br>
<input type="checkbox" name="fruit" value ="mango">芒果
<br>

用 checked 表示缺省已選的選項。

<input type="checkbox" name="fruit" value ="orange" checked>桔子
<br>

（3）表單控件(Form Control)：單選框(input type=“radio”)使用單選框，讓用戶在一組選項裏只能選擇一個。示例代碼：

<input type="radio" name="fruit" value = "Apple">蘋果
<br>
<input type="radio" name="fruit" value = "Orange">桔子
<br>
<input type="radio" name="fruit" value = "Mango">芒果
<br> 

用 checked 表示缺省已選的選項。

<input type="radio" name="fruit" value = "Orange" checked>
桔子
<br> 

（4）表單控件(Form Control)：下拉框(select)下拉框(Select)既可以用做單選，也可以用做複選。單選例句如下：

<select name="fruit" >
 <option value="apple">蘋果
 <option value="orange">桔子
 <option value="mango">芒果
</select> 

如果要變成複選，加 multiple 即可。用戶用 Ctrl 來實現多選。例句：

<select name="fruit" multiple> 

用戶還可以用 size 屬性來改變下拉框(Select)的大小。
（5）表單控件(Form Control)：多行輸入框(textarea)多行輸入框(textarea)主要用於輸入較長的文本信息。
語法：

<textarea name=“..”rows=“..” cols=“..” …>
內容 …..
</ textarea >

例句如下：

<textarea name="yoursuggest" cols ="50" rows =
"3"></textarea>

其中 cols 表示 textarea 的寬度，rows 表示 textarea 的高度。

屬性	描述
name	設置文本區的名稱。
placeholder	設置描述文本區域預期值的簡短提示。
rows	設置文本區內的可見行數。
cols	設置文本區內的可見寬度。

（6）表單控件(Form Control)：密碼輸入框(input type=“password”)密碼輸入框(input type=“password”)主要用於一些保密信息的輸入，比如密碼。因爲用戶輸入的時候，顯示的不是輸入的內容，而是黑點符號。例句如下：

<input type="password" name="yourpw"> 

（7）表單控件(Form Control)：提交(input type=“submit”)通過提交(input type=submit)可以將表單(Form)裏的信息提交給表單裏 action 所指向的文件。例句如下：

<input type="submit" value="提交"> 

（8）表單控件(Form Control)：圖片提交(input type=“image”)input type=image 相當於 input type=submit，不同的是，input type=image 以一個圖片作爲表單的提交按鈕，其中 src 屬性表示圖片的路徑。

<input type="image" src ="images/icons/go.gif" alt = "提交"
NAME="imgsubmit"> 

FORM標籤

語法：

<form action=“” method=“” name=“”…>
表單元素
</form>

屬性	值	描述
action	URL	提交表單時向何處發送表單數據
method	get、post	設置表單以何種方式發送到指定頁面
name	form_name	表單的名稱
target	_blank、_self、_parent、_top	在何處打開 action URL
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	在發送表單數據之前如何對其進行編碼