干貨：HTML中表單元素理解

.HTML中表單元素的基本概念

HTML表單是HTML元素中較為復雜的部分,表單往往和腳本,動態頁面,數據處理等功能相結合,因此是制作動態網站很重要的內容.

表單一般用來收集用戶的輸入信息

2.表單工作原理

訪問者在瀏覽有表單的網頁時,可填寫必需的信息,然后按某個按鈕提交,這些信息通過網絡傳送到服務器上.服務器上專門的程序對這些數據進行處理,如果有錯誤會返回錯誤信息,并要求糾正錯誤.當數據完整無誤后,服務器反饋一個輸入完成的信息

3.表單的功能

功能:表單用于向服務器傳輸數據,從而實現用戶與WEB服務器的交互表單能夠包含input系統標簽,比如文本字段,復選框,單選框,提交按鈕等表單還可以包含textarea,select,fieldset,label標簽.

4.表單的常用類型及說明

1.表單常用的類型有:

2.表單屬性：

3.文本輸入框(text)：

當用戶要在表單中輸入字母,數字內容時,就會用到文本域

代碼如下:

注意,表單本身并不可見.同時,在大多瀏覽器中,文本域的缺省寬度是20個字符.

在密碼域中輸入的字符,瀏覽器將使用項目符號來代替這些字符.

4.單選按鈕(radio)：

當用戶從若干給定的選擇中選取一個選項時,就會用到單選框.

代碼如下:

用戶只能從眾多選擇中選取一個選項.

當用戶點擊一個單選按鈕時,該按鈕會變為選中狀態,其他所有按鈕會變為非選中狀態.

5.復選框(checkboxes)

當用戶需要從若干給定的選擇中選取一個或多個選項時,就會用到復選框

代碼如下:

用戶一次可以選擇多個選項.

6.重置按鈕(reset)

重置按鈕會清除當前頁面上的用戶輸入的所有數據,把當前頁面恢復到打開時的樣子.

代碼如下:

<form><p><input type="reset"></p></form>

7.提交按鈕

會在當前頁面生成一個提交按鈕,用戶點擊此按鈕,瀏覽器就會把當前頁面用戶輸入的數據傳送到服務端

代碼如下:

<form><p><input type="button" value="按鈕"/></p></form>

8.提交文件

當需要把客戶端的文件發送到服務端時,需要用到提交文件按鈕

代碼如下:

<form action="/index/" method="post"><p><input type="file"/></p></form>

上傳文件注意兩點: 請求方式必須是post enctype="multipart/form-data"

9.下拉菜單

當需要用戶從很多選項中選擇一個或多個選項時,也可以使用下拉列表.

代碼如下:

這樣的下拉列表,用戶只能從其中選擇一個選項,當需要用戶選擇兩個或以下時,可以添加參數來進行控制.

代碼如下:

還可以在

OPTION

中添加

selected="selected"

選項來設置默認值.

10.表單屬性

1.action屬性的說明:

使用action選項來指定服務端的腳本來處理被提交的表單

<form action="/index/" method="post">

如果省略action屬性,則action會被設置為當前頁面

2.method屬性的說明:

method屬性規定在提交表單時所用的http方法(POST或GET)

<form action="/index/" method="post">

或

<form action="/index/" method="get">

3.get方法或post方法的使用方式說明:

如果表單提交是被動的(比如搜索引擎查詢),并且沒有敏感信息.

當使用get方法時,表單的數據在頁面地址欄中是可見的

因此,get最適合少量數據的提交,瀏覽器會設定容量限制

如果表單正在更新數據,或者包含敏感信息(比如密碼)時應該使用post,post的安全性更好.

因為在頁面地址欄中被提交的數據是不可見的.

切圖 qietu(.com)

TML表單元素

<form.../>元素用于生成輸入表單，該元素不會生成可視化部分。在HTML5規范以前，其他表單控件，如單行文本框，多行文本域、單選按鈕、復選框等都必須放在<form.../>元素之內。

<form.../>元素可以指定id、style、class等核心屬性，還可以指定onclick等事件屬性。除此之外還可以指定如下幾個屬性。

1、action：指定當單擊表單內的“確認”按鈕時，該表單被提交到哪個地址。該屬性即可指定一個絕對地址，也可指定一個相對地址。該屬性必填。

2、method：指定提交表單時發送何種類型的請求，該屬性值可謂get或post，分別用于發送GET或POST請求。通常建議發送POST請求。該屬性必填。

3、enctype：指定對表單內容進行編碼所使用的字符集。

4、name：指定表單的唯一名稱，建議該屬性值與id屬性保持一致。

5、target：指定使用哪種方式打開目標URL（提交請求會打開另一個URL資源），與超鏈接的target可接受的屬性值完全一樣，該屬性值可以是_blank、_patent、_self和_top四個值中之一。

歡web前端網頁開發和python開發的、請加下企鵝群：526929231 內有大量案例和學習教程，對python、和web感興趣的朋友可以加下哦

form表單域

所有的控件(表單元素都寫在form表單標簽中)

<form>
 使用form標簽建立表單域，當提交數據的時候會收集表單域里面的數據然后發送給服務器</form>

input表單控件元素

賦予不同的type值可實現不同的表單控件

type類型	描述
text	文本輸入框 maxlength最大長度、onlyready只讀、 disabled禁止、 placeholder
password	密碼遮掩框
radio	單選按鈕，checked默認選擇
checkbox	多選框
submit	收集表單域的name數據，然后提交到服務器上

下拉列表框

<select>
 <option value="music">聽音樂</option>
 <option value="running">跑步</option>
 <option value="study">學習</option>
 <option value="coffee">找小姐姐一起喝咖啡</option></select><!-- selected="selected"默認選中 --><!-- size="2" 現實兩行下拉項 --><!-- disabled 禁止選擇 -->

selected默認選擇一項

多行文本輸入框(文本域) textarea

<textare cols="30" rows="10"></textarea>

clos顯示多少列，rows現實多少行

按鈕

單獨使用沒有效果，一般配合js點擊按鈕的時候執行什么操作

<input type="button" value="自定義按鈕標題" />

重置按鈕

回到表單初識狀態

<input type="reset" value="重置表單" />

隱藏域

目的在于收集或發送信息頁面上面沒有任何效果 CSRF跨域攻擊在此作用

<input type="hidden" value="ABCD1234" />

label元素

為input元素定義一個標記，label元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果你在label元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽是，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上

<input id="man" type="radio" /><label for="man">男</label>

form表單屬性

屬性	描述
action	指定提交到哪個url上
method	提交方式，常用的GET / POST

提交方式

Method	Description
GET	URL地址欄上做拼接問號再加參數
POST	隱式提交方式，看不到，可以抓包

格式化文本

pre可定義預格式化的文本。
pre元素中的文本通常會保留空格和換行符。
主要用于在網頁上顯示代碼，比如在網頁當中顯示html模板

在線咨詢

上一篇：碎片時間學編程「135]：在 JavaScript 中創建 HTML 元素
下一篇：網表挑戰OA和BPM軟件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

干貨：HTML中表單元素理解

form表單域

input表單控件元素

下拉列表框

多行文本輸入框(文本域) textarea

按鈕

重置按鈕

隱藏域

label元素

form表單屬性

提交方式

格式化文本

您的項目需求