使用過(guò)Delphi的程序員，對(duì)Form這個(gè)詞應(yīng)該比較熟悉。在Delphi中，Form被翻譯為“界面、窗口”，作用是：為用戶提供界面，供用戶輸入信息，向用戶展示處理結(jié)果。

HTML5中也有Form，功能與Delphi中的Form差不多，用于接收用戶輸入，和服務(wù)器進(jìn)行交互。不過(guò)HTML5中的Form，中文一般譯為“表單”。

1、Web前端與Web后端的交互

Web前端，指瀏覽器上展示的HTML文件，以及HTML文件使用的CSS文件及JavaScript腳本。

Web后端，指運(yùn)行在服務(wù)器上的，為Web前端提供服務(wù)的軟件，Web后端也常常被稱為Web服務(wù)器。

在HTML5中，Web前端與Web后端交互的流程一般如下：

(1)Web前端向Web后端發(fā)起HTTP請(qǐng)求；

(2)Web后端收到HTTP請(qǐng)求后，進(jìn)行業(yè)務(wù)處理；

(3)Web后端向Web前端返回HTTP響應(yīng)。

到目前為止，我們?cè)贖TML5中碰到的Web前端發(fā)起HTTP請(qǐng)求的方式有兩種：

第1種：HTML頁(yè)面通過(guò)元素向用戶提供超級(jí)鏈接，用戶點(diǎn)擊該鏈接時(shí)，會(huì)向服務(wù)器發(fā)起請(qǐng)求；

第2種：HTML頁(yè)面通過(guò)表單為用戶提供輸入界面，用戶提交表單時(shí)，會(huì)向服務(wù)器發(fā)起請(qǐng)求。

2、GET請(qǐng)求和POST請(qǐng)求

HTTP請(qǐng)求有八種，對(duì)Web前端開發(fā)者來(lái)說(shuō)，最常用的是GET請(qǐng)求和POST請(qǐng)求。

GET請(qǐng)求：向Web后端請(qǐng)求指定的頁(yè)面；GET請(qǐng)求攜帶的數(shù)據(jù)，以URL參數(shù)的形式提供；

POST請(qǐng)求：向Web后端提交數(shù)據(jù)，請(qǐng)求Web后端對(duì)數(shù)據(jù)進(jìn)行處理；POST請(qǐng)求攜帶的數(shù)據(jù)，在請(qǐng)求消息體中提供。

在HTML5中，用戶點(diǎn)擊鏈接地址，Web前端向后端發(fā)起GET請(qǐng)求；

在HTML5中，用戶提交表單，Web前端可以向后端發(fā)起GET請(qǐng)求，也可以發(fā)起POST請(qǐng)求。

說(shuō)明：由于目前沒(méi)有和后端服務(wù)器對(duì)接，為了便于對(duì)表單設(shè)計(jì)進(jìn)行展示，下面的例子HTML文檔，都是用GET請(qǐng)求來(lái)提交數(shù)據(jù)。

3、表單的主要元素

元素：表示表單；

元素：表單中的輸入控件，輸入控件可以是文本框、單選框、復(fù)選框、按鈕等等；

元素：表單中的標(biāo)簽控件；

元素：表單中的按鈕控件；

與元素：用于實(shí)現(xiàn)列表框和下拉菜單；

元素：多行文本控件。

4、表單提交文本框的輸入

下面是一個(gè)可以提交文本框輸入的HTML文檔：

form001 請(qǐng)輸入您的姓名：

在瀏覽器中打開該HTML文檔時(shí)，展示效果如下：

我們可以在文本框中輸入信息，例如輸入tom：

當(dāng)我們點(diǎn)擊“提交”按鈕后，瀏覽器顯示信息如下；

可以看到，數(shù)據(jù)被提交給process.html頁(yè)面，并且附帶了一個(gè)參數(shù)name，且值為我們輸入的tom。

5、表單提交用戶對(duì)單選框的選擇

下面是一個(gè)可以提交單選框被選信息的HTML文檔：

form002 性別：
男： 女：國(guó)籍：
中國(guó)：
美國(guó)：
日本：
英國(guó)：
其它：

在瀏覽器中打開該HTML文檔時(shí)，顯示效果如下：

我們可以選擇性別和國(guó)籍，例如我們選擇“男”和“中國(guó)”：

當(dāng)我們點(diǎn)擊“提交”按鈕后，瀏覽器顯示信息如下：

可以看到，我們選擇的信息被提交給process.html文件，并且附帶了gender參數(shù)的值為male，nationality參數(shù)的值為Chinese。

6、表單提交用戶對(duì)復(fù)選框的選擇

下面是一個(gè)可以提交復(fù)選框被選信息的HTML文檔；

form003 請(qǐng)選擇您的業(yè)余愛(ài)好：
美術(shù)：
足球：
唱歌：
廚藝：
其它：

在瀏覽器中打開該HTML文檔時(shí)，顯示效果如下：

我們可以選擇自己的業(yè)余愛(ài)好，例如我們選擇足球、唱歌、廚藝：

當(dāng)我們點(diǎn)擊“提交”按鈕后，瀏覽器顯示信息如下：

可以看到，我們選擇的信息被提交給process.html文件，并且附帶了三個(gè)hobby參數(shù)，其值分別為Football，Singing和Cook。

7、表單提交用戶對(duì)下拉菜單的選擇

下面是一個(gè)可以提交下拉菜單被選信息的HTML文檔；

form004 請(qǐng)選擇您的學(xué)歷： 小學(xué)初中高中大學(xué)請(qǐng)選擇您的興趣愛(ài)好： 美術(shù)足球唱歌廚藝其它

在瀏覽器中打開該HTML文檔時(shí)，顯示效果如下：

我們可以單選我們的學(xué)歷，也可以通過(guò)按下Shift+鼠標(biāo)鍵多選我們的興趣。例如我們選擇“初中”學(xué)歷，選擇“美術(shù)”和“廚藝”兩項(xiàng)愛(ài)好：

當(dāng)我們點(diǎn)擊“提交”按鈕后，瀏覽器顯示信息如下：

可以看到，我們選擇的信息被提交給process.html文件，并且附帶了education參數(shù)和兩個(gè)hobby參數(shù)，education的值為junior_high_school，hobby的值為Art和Cook。

上面列舉了幾種控件的HTML5表單設(shè)計(jì)方法，其它的控件也大概差不多，把多個(gè)控件組合在同一個(gè)

元素中的方法也是相同的，這里就不再贅述了。

總結(jié)

以上是生活随笔為你收集整理的html5中单选框被选中把值传给后台_HTML5的表单设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。