語法： form method = 傳送方式 action = 服務器文件

講解：1. form 是成對出現的， 以 form 開始， 以 /form 結束,表單都必須放在其之間。

2.method 傳送方式， get/post 是后端程序員考慮的問題

3.action 瀏覽者輸入的數據被傳送到的地方，比如一個html' target='_blank'>php頁面， (save.php)

form method= post action= save.php

label for= username 用戶名: /label

input type= text name= username /

label for= pass 密碼: /label

input type= password name= pass /

/form

文本輸入框，密碼輸入框

當用戶需要在表單中鍵入字母，數據等，就要用到文本輸入框，文本輸入框也可以轉化為密碼輸入框

語法：

form

input type = text/password name = 名稱 value = 文本 /

/form

講解：1.type ：

當 type 為 text時，為文本輸入框

當 type 為 password 時， 為密碼輸入框

2.name ：為文本框命名，以備后臺asp php使用

3.value ：為文本輸入框設置默認值（一般起提示作用）

!DOCTYPE HTML

html

head

meta http-equiv= Content-Type content= text/html; charset=utf-8

title 文本輸入框、密碼輸入框 /title

/head

body

form method= post action= save.php

賬戶:

input type = text name = myName /

br /

密碼：

input type = password name = pass /

/form

/body

/html

結果：

賬戶:
密碼:

文本域：支持多行文本輸入

當用戶需要在表單中輸入大段文字時，就要用到文本輸入域

語法：

textarea rows = 行數 cols = 列數 文本 /textarea

講解：1.文本輸入域以 textarea 開始 ，以 /textarea 結束

2.rows： 輸入文本輸入域的行數

3.cols ： 輸入文本輸入域的列數

4.在 textarea /textarea 標簽之間輸入默認值

!DOCTYPE HTML

html

head

meta http-equiv= Content-Type content= text/html; charset=utf-8

title 文本域 /title

/head

body

form method = post action = save.php

label 個人簡介 /label

textarea rows = 5 cols = 10 在這里輸入內容... /textarea /span

input type = submit value = 確定 name = submit /

input type = reset value = 重置 name = reset /

/form

/body

/html

結果：

個人簡介

lable 在后面會有詳解。

使用單選框，復選框讓用戶選擇

在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好辦法，在HTML中，有單選框和復選框，兩者的主要區別是 單選框中用戶的選項只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。

input type = radio/checkbox value = 值 name = 名稱 checked = checked /

講解：

1. type : radio :控件單選框

checkbox : 控件復選框

2. value: 提供數據到服務器的值

3. name：為控件命名，以備后臺程序ASP，PHP使用

4.checked： 當設置 checked = “checked”時，該選項被默認選中。

!DOCTYPE HTML

html

head

meta http-equiv= Content-Type content= text/html; charset=utf-8

title 單選框、復選框 /title

/head

body

form name = iForm method = post action = save.php

你是否喜歡旅游？ br /

input type = radio name = radioLove value = 喜歡 checked = checked / /span

input type = radio name = radioLove value = 不喜歡 /

input type = radio name = radioLove value = 無所謂 /

br / br /

你對那些運動感興趣？ br /

input type = checkbox name = checkbox1 value = 跑步 /

input type = checkbox name = checkbox1 value = 打球 checked = checked /

input type = checkbox name = checkbox1 value = 登山 checked = checked /

input type = checkbox name = checkbox1 value = 健身 /

/form

/body

/html

結果：

你是否喜歡旅游？


你對那些運動感興趣？

注意：同一組的單選按鈕，name的取值一定要一致，這樣同一組的單選按鈕才可以起到單選的作用。

下拉列表框

使用下拉列表框，節省空間，既可以單選，又可以多選。

單選：

!DOCTYPE HTML

html

head

meta http-equiv= Content-Type content= text/html; charset=utf-8

title 下拉頁表框 /title

/head

body

form name = iForm method = post action = save.php

label 愛好: /label

select

option value = 讀書 讀書 /option /span

option value = 運動 運動 /option

option value = 音樂 音樂 /option

option value = 旅游 旅游 /option

option value = 購物 購物 /option

span >

/form

/body

/html

結果：愛好: 讀書運動音樂 旅游購物 (可以下拉）

option value = 提交值 選項 /option
提交值：是向服務器提交的值

選項：是顯示的值

設置 selected = selected 則該選項默認被選中。

多選：

就將上面的 select 改為 select multiple = multiple 就行，然后在widows下ctrl ,同時單擊，在Mac 下 Command + 單擊

使用提交按鈕，提交數據

在表單中有兩種按鈕可以使用，提交按鈕和重置，當用戶需要提交信息到服務器時，需要用到提交按鈕。

語法：

input type = submit value = 提交

講解：

1.只有當type = sumit 時，按鈕才有提交的作用

2.value： 按鈕上顯示的字

重置

當用戶需要重置表單信息到初始狀態時，可以使用重置按鈕，只要把type 改為 reset 就行。

input type = reset value = 重置

講解：

1.同理提交按鈕，只有當type = reset 時， 按鈕才有重置的作用

2.value : 按鈕上顯示的文字

label標簽

label標簽不會向用戶呈現任何特殊的效果，它的作用是為鼠標用戶改進了可用性，如果你在label標簽內點擊文本，就會觸發此控件，也就是說，當用戶單擊選中該label標簽時，瀏覽器會自動將焦點轉到和 標簽相關的表單控件上(就自動選中和該label標簽相關聯的表單控件上);

語法：

label for = 控件id 的名稱

注意：標簽中for 屬性的值應該與相關控件的id屬性值一定要相同；

form

label for= male 男 /label

input type= radio name= gender span >

br /

label for= female 女 /label

input type= radio name= gender span >

label for= email 輸入你的郵箱地址 /label

input type= email span >

/form

結果：

男
女
輸入你的郵箱地址

以下是自己仿寫的，可復選的：

!DOCTYPE HTML

html

head

meta http-equiv= Content-Type content= text/html; charset=utf-8

title form中的lable標簽 /title

/head

body

form

你對什么運動感興趣： br/

label for = sport1 慢跑 /label

input type = checkbox name = sports id = sport1 /

br /

label for = sport2 登山 /label

input type = checkbox name = sports id = sport2 /

br /

label for = sport3 籃球 /label

input type = checkbox name = sports id = sport3 / br /

/form

/body

/html

結果：

你對什么運動感興趣：
慢跑
登山
籃球

相關推薦：

動態生成form表單實現方法

JavaScript實現動態添加Form表單元素的方法示例

HTML Form表單元素的詳解

以上就是HTML5中form表單標簽用法詳解的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。