HTML表單(Form)

標籤：style   blog   http   io   ar   color   os   使用   sp   

HTML表單(Form)是HTML的一個重要部分，主要用於採集和提交使用者輸入的資訊。

舉個簡單的例子，一個讓使用者輸入姓名的HTML表單(Form)。範例程式碼如下：

<form action="http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get">

請輸入你的姓名：

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

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

</form>

示範樣本

學習HTML表單(Form)最關鍵要掌握的有三個要點：

• 表單控制項(Form Controls)
• Action
• Method

先說表單控制項(Form Controls)，通過HTML表單的各種控制項，使用者可以輸入文字資訊，或者從選項中選擇，以及做提交的操作。比如上面的例句裡，input type= "text"就是一個表單控制項，表示一個單行輸入框。

使用者填入表單的資訊總是需要程式來進行處理，表單裡的action就指明了處理表單資訊的檔案。比如上面例句裡的http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp。

至於method，表示了發送表單資訊的方式。method有兩個值：get和post。get的方式是將表單控制項的name/value資訊經過編碼之後，通過URL發送(你可以在地址欄裡看到)。而post則將表單的內容通過http發送，你在地址欄看不到表單的提交資訊。那什麼時候用get，什麼時候用post呢？一般是這樣來判斷的，如果只是為取得和顯示資料，用get；一旦涉及資料的儲存和更新，那麼建議用post。

HTML表單(Form)常用控制項(Controls)

HTML表單(Form)常用控制項有：

 

表單控制項(Form Contros)	說明
input type="text"	單行文本輸入框
input type="submit"	將表單(Form)裡的資訊提交給表單裡action所指向的檔案
input type="checkbox"	複選框
input type="radio"	單選框
select	下拉框
textArea	多行文本輸入框
input type="password"	密碼輸入框(輸入的文字用*表示)

 

表單控制項(Form Control)：單行文本輸入框(input type="text")

單行文本輸入框允許使用者輸入一些簡短的單行資訊，比如使用者姓名。例句如下：

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

示範樣本

表單控制項(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>

示範樣本

表單控制項(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>

示範樣本

表單控制項(Form Control)：下拉框(select)

下拉框(Select)既可以用做單選，也可以用做複選。單選例句如下：

<select name="fruit" >

  <option value="apple">蘋果

  <option value="orange">桔子

  <option value="mango">芒果

</select>

示範樣本

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

<select name="fruit" multiple>

示範樣本

使用者還可以用size屬性來改變下拉框(Select)的大小。

示範樣本

表單控制項(Form Control)：多行輸入框(textarea)

多行輸入框(textarea)主要用於輸入較長的文本資訊。例句如下：

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

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

示範樣本

表單控制項(Form Control)：密碼輸入框(input type="password")

密碼輸入框(input type="password")主要用於一些保密資訊的輸入，比如密碼。因為使用者輸入的時候，顯示的不是輸入的內容，而是黑點符號。。例句如下：

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

示範樣本

表單控制項(Form Control)：提交(input type="submit")

通過提交(input type=submit)可以將表單(Form)裡的資訊提交給表單裡action所指向的檔案。例句如下：

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

示範樣本

表單控制項(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提交到哪個頁面是由action屬性進行設定的。

然後通過點擊<input type="submit">類型的按鈕傳遞到對應的頁面

也可以通過為<input type="button">類型的按鈕添加onClick事件通過js代碼來重設form表單的action屬性值來轉到不同的頁面。

可以在js代碼中直接處理表單中的資料

可以在js代碼中處理了表單資料以後重新導向到某一頁面來二次處理這些資料（js不使用ajax的話沒法實現資料庫互動）。

可以在js代碼中使用xmlhttprequest類實現不重新導向直接擷取資料處理結果

可以在重新導向的頁面中直接處理這些資料，並UI出處理的結果。

js能做的東西多了去了，越來越好了

摘自http://blog.csdn.net/xiangjun_28/article/details/6656239

HTML表單(Form)