使用過Delphi的程序員，對Form這個詞應該比較熟悉。在Delphi中，Form被翻譯為“界面、窗口”，作用是：為用戶提供界面，供用戶輸入信息，向用戶展示處理結果。

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

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

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

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

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

(1)Web前端向Web后端發起HTTP請求；

(2)Web后端收到HTTP請求后，進行業務處理；

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

到目前為止，我們在HTML5中碰到的Web前端發起HTTP請求的方式有兩種：

第1種：HTML頁面通過元素向用戶提供超級鏈接，用戶點擊該鏈接時，會向服務器發起請求；

第2種：HTML頁面通過表單為用戶提供輸入界面，用戶提交表單時，會向服務器發起請求。

2、GET請求和POST請求

HTTP請求有八種，對Web前端開發者來說，最常用的是GET請求和POST請求。

GET請求：向Web后端請求指定的頁面；GET請求攜帶的數據，以URL參數的形式提供；

POST請求：向Web后端提交數據，請求Web后端對數據進行處理；POST請求攜帶的數據，在請求消息體中提供。

在HTML5中，用戶點擊鏈接地址，Web前端向后端發起GET請求；

在HTML5中，用戶提交表單，Web前端可以向后端發起GET請求，也可以發起POST請求。

說明：由于目前沒有和后端服務器對接，為了便于對表單設計進行展示，下面的例子HTML文檔，都是用GET請求來提交數據。

3、表單的主要元素

元素：表示表單；

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

元素：表單中的標簽控件；

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

與元素：用于實現列表框和下拉菜單；

元素：多行文本控件。

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

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

form001 請輸入您的姓名：

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

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

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下；

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

5、表單提交用戶對單選框的選擇

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

form002 性別：
男： 女：國籍：
中國：
美國：
日本：
英國：
其它：

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

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

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下：

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

6、表單提交用戶對復選框的選擇

下面是一個可以提交復選框被選信息的HTML文檔；

form003 請選擇您的業余愛好：
美術：
足球：
唱歌：
廚藝：
其它：

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

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

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下：

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

7、表單提交用戶對下拉菜單的選擇

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

form004 請選擇您的學歷： 小學初中高中大學請選擇您的興趣愛好： 美術足球唱歌廚藝其它

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

我們可以單選我們的學歷，也可以通過按下Shift+鼠標鍵多選我們的興趣。例如我們選擇“初中”學歷，選擇“美術”和“廚藝”兩項愛好：

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下：

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。