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

HTML表單是HTML元素中較為復(fù)雜的部分,表單往往和腳本,動(dòng)態(tài)頁面,數(shù)據(jù)處理等功能相結(jié)合,因此是制作動(dòng)態(tài)網(wǎng)站很重要的內(nèi)容.

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

2.表單工作原理

訪問者在瀏覽有表單的網(wǎng)頁時(shí),可填寫必需的信息,然后按某個(gè)按鈕提交,這些信息通過網(wǎng)絡(luò)傳送到服務(wù)器上.服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進(jìn)行處理,如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息,并要求糾正錯(cuò)誤.當(dāng)數(shù)據(jù)完整無誤后,服務(wù)器反饋一個(gè)輸入完成的信息

3.表單的功能

功能:表單用于向服務(wù)器傳輸數(shù)據(jù),從而實(shí)現(xiàn)用戶與WEB服務(wù)器的交互表單能夠包含input系統(tǒng)標(biāo)簽,比如文本字段,復(fù)選框,單選框,提交按鈕等表單還可以包含textarea,select,fieldset,label標(biāo)簽.

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

1.表單常用的類型有:

2.表單屬性：

3.文本輸入框(text)：

當(dāng)用戶要在表單中輸入字母,數(shù)字內(nèi)容時(shí),就會(huì)用到文本域

代碼如下:

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

在密碼域中輸入的字符,瀏覽器將使用項(xiàng)目符號(hào)來代替這些字符.

4.單選按鈕(radio)：

當(dāng)用戶從若干給定的選擇中選取一個(gè)選項(xiàng)時(shí),就會(huì)用到單選框.

代碼如下:

當(dāng)用戶點(diǎn)擊一個(gè)單選按鈕時(shí),該按鈕會(huì)變?yōu)檫x中狀態(tài),其他所有按鈕會(huì)變?yōu)榉沁x中狀態(tài).

5.復(fù)選框(checkboxes)

當(dāng)用戶需要從若干給定的選擇中選取一個(gè)或多個(gè)選項(xiàng)時(shí),就會(huì)用到復(fù)選框

代碼如下:

6.重置按鈕(reset)

重置按鈕會(huì)清除當(dāng)前頁面上的用戶輸入的所有數(shù)據(jù),把當(dāng)前頁面恢復(fù)到打開時(shí)的樣子.

代碼如下:

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

7.提交按鈕

會(huì)在當(dāng)前頁面生成一個(gè)提交按鈕,用戶點(diǎn)擊此按鈕,瀏覽器就會(huì)把當(dāng)前頁面用戶輸入的數(shù)據(jù)傳送到服務(wù)端

代碼如下:

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

8.提交文件

當(dāng)需要把客戶端的文件發(fā)送到服務(wù)端時(shí),需要用到提交文件按鈕

代碼如下:

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

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

9.下拉菜單

當(dāng)需要用戶從很多選項(xiàng)中選擇一個(gè)或多個(gè)選項(xiàng)時(shí),也可以使用下拉列表.

代碼如下:

代碼如下:

OPTION

selected="selected"

10.表單屬性

1.action屬性的說明:

使用action選項(xiàng)來指定服務(wù)端的腳本來處理被提交的表單

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

如果省略action屬性,則action會(huì)被設(shè)置為當(dāng)前頁面

2.method屬性的說明:

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

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

或

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

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

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

當(dāng)使用get方法時(shí),表單的數(shù)據(jù)在頁面地址欄中是可見的

因此,get最適合少量數(shù)據(jù)的提交,瀏覽器會(huì)設(shè)定容量限制

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

因?yàn)樵陧撁娴刂窓谥斜惶峤坏臄?shù)據(jù)是不可見的.

切圖 qietu(.com)

TML表單元素

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

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

1、action：指定當(dāng)單擊表單內(nèi)的“確認(rèn)”按鈕時(shí)，該表單被提交到哪個(gè)地址。該屬性即可指定一個(gè)絕對地址，也可指定一個(gè)相對地址。該屬性必填。

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

3、enctype：指定對表單內(nèi)容進(jìn)行編碼所使用的字符集。

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

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

歡web前端網(wǎng)頁開發(fā)和python開發(fā)的、請加下企鵝群：526929231 內(nèi)有大量案例和學(xué)習(xí)教程，對python、和web感興趣的朋友可以加下哦

form表單域

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

<form>
 使用form標(biāo)簽建立表單域，當(dāng)提交數(shù)據(jù)的時(shí)候會(huì)收集表單域里面的數(shù)據(jù)然后發(fā)送給服務(wù)器</form>

input表單控件元素

賦予不同的type值可實(shí)現(xiàn)不同的表單控件

下拉列表框

<select>
 <option value="music">聽音樂</option>
 <option value="running">跑步</option>
 <option value="study">學(xué)習(xí)</option>
 <option value="coffee">找小姐姐一起喝咖啡</option></select><!-- selected="selected"默認(rèn)選中 --><!-- size="2" 現(xiàn)實(shí)兩行下拉項(xiàng) --><!-- disabled 禁止選擇 -->

selected默認(rèn)選擇一項(xiàng)

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

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

clos顯示多少列，rows現(xiàn)實(shí)多少行

按鈕

單獨(dú)使用沒有效果，一般配合js點(diǎn)擊按鈕的時(shí)候執(zhí)行什么操作

<input type="button" value="自定義按鈕標(biāo)題" />

重置按鈕

回到表單初識(shí)狀態(tài)

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

隱藏域

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

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

label元素

為input元素定義一個(gè)標(biāo)記，label元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果你在label元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽是，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上

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

form表單屬性

提交方式

格式化文本

• pre可定義預(yù)格式化的文本。

• pre元素中的文本通常會(huì)保留空格和換行符。

  主要用于在網(wǎng)頁上顯示代碼，比如在網(wǎng)頁當(dāng)中顯示html模板