整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
.HTML中表單元素的基本概念
HTML表單是HTML元素中較為復(fù)雜的部分,表單往往和腳本,動(dòng)態(tài)頁(yè)面,數(shù)據(jù)處理等功能相結(jié)合,因此是制作動(dòng)態(tài)網(wǎng)站很重要的內(nèi)容.
表單一般用來(lái)收集用戶(hù)的輸入信息
2.表單工作原理
訪問(wèn)者在瀏覽有表單的網(wǎng)頁(yè)時(shí),可填寫(xiě)必需的信息,然后按某個(gè)按鈕提交,這些信息通過(guò)網(wǎng)絡(luò)傳送到服務(wù)器上.服務(wù)器上專(zhuān)門(mén)的程序?qū)@些數(shù)據(jù)進(jìn)行處理,如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息,并要求糾正錯(cuò)誤.當(dāng)數(shù)據(jù)完整無(wú)誤后,服務(wù)器反饋一個(gè)輸入完成的信息
3.表單的功能
功能:表單用于向服務(wù)器傳輸數(shù)據(jù),從而實(shí)現(xiàn)用戶(hù)與WEB服務(wù)器的交互表單能夠包含input系統(tǒng)標(biāo)簽,比如文本字段,復(fù)選框,單選框,提交按鈕等表單還可以包含textarea,select,fieldset,label標(biāo)簽.
4.表單的常用類(lèi)型及說(shuō)明
1.表單常用的類(lèi)型有:
2.表單屬性：
3.文本輸入框(text)：
當(dāng)用戶(hù)要在表單中輸入字母,數(shù)字內(nèi)容時(shí),就會(huì)用到文本域
代碼如下:
注意,表單本身并不可見(jiàn).同時(shí),在大多瀏覽器中,文本域的缺省寬度是20個(gè)字符.
在密碼域中輸入的字符,瀏覽器將使用項(xiàng)目符號(hào)來(lái)代替這些字符.
4.單選按鈕(radio)：
當(dāng)用戶(hù)從若干給定的選擇中選取一個(gè)選項(xiàng)時(shí),就會(huì)用到單選框.
代碼如下:
用戶(hù)只能從眾多選擇中選取一個(gè)選項(xiàng).當(dāng)用戶(hù)點(diǎn)擊一個(gè)單選按鈕時(shí),該按鈕會(huì)變?yōu)檫x中狀態(tài),其他所有按鈕會(huì)變?yōu)榉沁x中狀態(tài).
5.復(fù)選框(checkboxes)
當(dāng)用戶(hù)需要從若干給定的選擇中選取一個(gè)或多個(gè)選項(xiàng)時(shí),就會(huì)用到復(fù)選框
代碼如下:
用戶(hù)一次可以選擇多個(gè)選項(xiàng).6.重置按鈕(reset)
重置按鈕會(huì)清除當(dāng)前頁(yè)面上的用戶(hù)輸入的所有數(shù)據(jù),把當(dāng)前頁(yè)面恢復(fù)到打開(kāi)時(shí)的樣子.
代碼如下:
<form><p><input type="reset"></p></form>
7.提交按鈕
會(huì)在當(dāng)前頁(yè)面生成一個(gè)提交按鈕,用戶(hù)點(diǎn)擊此按鈕,瀏覽器就會(huì)把當(dāng)前頁(yè)面用戶(hù)輸入的數(shù)據(jù)傳送到服務(wù)端
代碼如下:
<form><p><input type="button" value="按鈕"/></p></form>
8.提交文件
當(dāng)需要把客戶(hù)端的文件發(fā)送到服務(wù)端時(shí),需要用到提交文件按鈕
代碼如下:
<form action="/index/" method="post"><p><input type="file"/></p></form>
上傳文件注意兩點(diǎn): 請(qǐng)求方式必須是post enctype="multipart/form-data"
9.下拉菜單
當(dāng)需要用戶(hù)從很多選項(xiàng)中選擇一個(gè)或多個(gè)選項(xiàng)時(shí),也可以使用下拉列表.
代碼如下:
這樣的下拉列表,用戶(hù)只能從其中選擇一個(gè)選項(xiàng),當(dāng)需要用戶(hù)選擇兩個(gè)或以下時(shí),可以添加參數(shù)來(lái)進(jìn)行控制.代碼如下:
還可以在OPTION
中添加selected="selected"
選項(xiàng)來(lái)設(shè)置默認(rèn)值.10.表單屬性
1.action屬性的說(shuō)明:
使用action選項(xiàng)來(lái)指定服務(wù)端的腳本來(lái)處理被提交的表單
<form action="/index/" method="post">
如果省略action屬性,則action會(huì)被設(shè)置為當(dāng)前頁(yè)面
2.method屬性的說(shuō)明:
method屬性規(guī)定在提交表單時(shí)所用的http方法(POST或GET)
<form action="/index/" method="post">
或
<form action="/index/" method="get">
3.get方法或post方法的使用方式說(shuō)明:
如果表單提交是被動(dòng)的(比如搜索引擎查詢(xún)),并且沒(méi)有敏感信息.
當(dāng)使用get方法時(shí),表單的數(shù)據(jù)在頁(yè)面地址欄中是可見(jiàn)的
因此,get最適合少量數(shù)據(jù)的提交,瀏覽器會(huì)設(shè)定容量限制
如果表單正在更新數(shù)據(jù),或者包含敏感信息(比如密碼)時(shí)應(yīng)該使用post,post的安全性更好.
因?yàn)樵陧?yè)面地址欄中被提交的數(shù)據(jù)是不可見(jiàn)的.
切圖 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è)絕對(duì)地址，也可指定一個(gè)相對(duì)地址。該屬性必填。
2、method：指定提交表單時(shí)發(fā)送何種類(lèi)型的請(qǐng)求，該屬性值可謂get或post，分別用于發(fā)送GET或POST請(qǐng)求。通常建議發(fā)送POST請(qǐng)求。該屬性必填。
3、enctype：指定對(duì)表單內(nèi)容進(jìn)行編碼所使用的字符集。
4、name：指定表單的唯一名稱(chēng)，建議該屬性值與id屬性保持一致。
5、target：指定使用哪種方式打開(kāi)目標(biāo)URL（提交請(qǐng)求會(huì)打開(kāi)另一個(gè)URL資源），與超鏈接的target可接受的屬性值完全一樣，該屬性值可以是_blank、_patent、_self和_top四個(gè)值中之一。
歡web前端網(wǎng)頁(yè)開(kāi)發(fā)和python開(kāi)發(fā)的、請(qǐng)加下企鵝群：526929231 內(nèi)有大量案例和學(xué)習(xí)教程，對(duì)python、和web感興趣的朋友可以加下哦
所有的控件(表單元素都寫(xiě)在form表單標(biāo)簽中)
<form> 使用form標(biāo)簽建立表單域，當(dāng)提交數(shù)據(jù)的時(shí)候會(huì)收集表單域里面的數(shù)據(jù)然后發(fā)送給服務(wù)器</form>
賦予不同的type值可實(shí)現(xiàn)不同的表單控件
| type類(lèi)型 | 描述 |
|---|---|
| text | 文本輸入框 maxlength最大長(zhǎng)度、onlyready只讀、 disabled禁止、 placeholder |
| password | 密碼遮掩框 |
| radio | 單選按鈕，checked默認(rèn)選擇 |
| checkbox | 多選框 |
| submit | 收集表單域的name數(shù)據(jù)，然后提交到服務(wù)器上 |
<select> <option value="music">聽(tīng)音樂(lè)</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)
<textare cols="30" rows="10"></textarea>
clos顯示多少列，rows現(xiàn)實(shí)多少行
單獨(dú)使用沒(méi)有效果，一般配合js點(diǎn)擊按鈕的時(shí)候執(zhí)行什么操作
<input type="button" value="自定義按鈕標(biāo)題" />
回到表單初識(shí)狀態(tài)
<input type="reset" value="重置表單" />
目的在于收集或發(fā)送信息 頁(yè)面上面沒(méi)有任何效果 CSRF跨域攻擊在此作用
<input type="hidden" value="ABCD1234" />
為input元素定義一個(gè)標(biāo)記，label元素不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果。不過(guò)，它為鼠標(biāo)用戶(hù)改進(jìn)了可用性。如果你在label元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說(shuō)，當(dāng)用戶(hù)選擇該標(biāo)簽是，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上
<input id="man" type="radio" /><label for="man">男</label>
| 屬性 | 描述 |
|---|---|
| action | 指定提交到哪個(gè)url上 |
| method | 提交方式，常用的GET / POST |
| Method | Description |
|---|---|
| GET | URL地址欄上做拼接問(wèn)號(hào)再加參數(shù) |
| POST | 隱式提交方式，看不到，可以抓包 |
pre可定義預(yù)格式化的文本。
pre元素中的文本通常會(huì)保留空格和換行符。
主要用于在網(wǎng)頁(yè)上顯示代碼，比如在網(wǎng)頁(yè)當(dāng)中顯示html模板
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
