HTML表單的介紹教程

本文是關於HTML表單的介紹，下面就讓我們來閱讀一下吧。

HTML表單(Form)是HTML的一個重要部分，主要用於采集和提交用戶輸入的信息。

舉個簡單的例子，一個讓用戶輸入姓名的HTML表單(Form)。示例代碼如下：

請輸入你的姓名：

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

表單控件(Form Controls)

Action

Method

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

用戶填入表單的信息總是需要程序來進行處理，表單裡的action就指明了處理表單信息的文件。比如上面例句裡的http://www.duote.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")

單行文本輸入框允許用戶輸入一些簡短的單行信息，比如用戶姓名。例句如下：

表單控件(Form Control)：復選框(input type="checkbox")

復選框允許用戶在一組選項裡，選擇多個。示例代碼：

蘋果

桔子

芒果

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

桔子

表單控件(Form Control)：單選框(input type="radio")

使用單選框，讓用戶在一組選項裡只能選擇一個。示例代碼：

蘋果

桔子

芒果

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

桔子

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

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

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

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

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

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

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

通過提交(input type=submit)可以將表單(Form)裡的信息提交給表單裡action所指向的文件。例句如下：

表單控件(Form Control)：圖片提交(input type="image")

input type=image 相當於 input type=submit，不同的是，input type=image 以一個圖片作為表單的提交按鈕，其中 src 屬性表示圖片的路徑。

alt = "提交" NAME="imgsubmit">

以上就是關於HTML表單的介紹，希望對大家有所幫助。