HTML表單使用簡介

為什么要用表單?

在我們?yōu)g覽網(wǎng)頁的時候,尤其是各種論壇,一般都會要求我們登陸賬號,在我們輸入完賬號密碼后,這些數(shù)據(jù)就需要通過表單來傳遞給網(wǎng)站后臺數(shù)據(jù)庫,來完成網(wǎng)站后臺服務(wù)器對我們賬號及密碼的驗(yàn)證,所以,總的來說表單的作用就是客戶端向服務(wù)器端提交數(shù)據(jù)? 也可以說為交互功能。

表單語法

語法:

<form action="url" method="get|post" enctype="..." target="...">.

<input type="" name="" valule="" placeholder="">

</form>

屬性解釋見下表:

action=url用來指定處理提交表單的格式.它可以是一個URL地址(提交給程式)或一個電子郵件地址.

method=get或post指明提交表單的HTTP方法.可能的值為:?

GET(默認(rèn)方法):

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

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

GET 適合少量數(shù)據(jù)的提交。瀏覽器會設(shè)定容量限制。

POST:

如果表單正在更新數(shù)據(jù),或者包含敏感信息(例如密碼)使用。

POST 安全性更加,因?yàn)樵陧撁娴刂窓谥斜惶峤坏臄?shù)據(jù)是不可見的。

enctype=cdata指明用來把表單提交給服務(wù)器時(當(dāng)method值為"post")的互聯(lián)網(wǎng)媒體形式.這個特性的缺省值是"application/x-www-form-urlencoded"

TARGET="..."指定提交的結(jié)果文檔顯示的位置: _blank :在一個新的、無名瀏覽器窗口調(diào)入指定的文檔; _self :在指向這個目標(biāo)的元素的相同的框架中調(diào)入文檔; _parent :把文檔調(diào)入當(dāng)前框的直接的父FRAMESET框中;這個值在當(dāng)前框沒有父框時等價于_self; _top :把文檔調(diào)入原來的最頂部的瀏覽器窗口中(因此取消所有其它框架);這個值等價于當(dāng)前框沒有你框時的_self.

表單類型

<input>元素是最重要的表單元素。

input包含了文本框、多行文本框、密碼框、隱藏域、復(fù)選框、單選框等,用于采集用戶的輸入或選擇的數(shù)據(jù)。

1.單行文本框<input type="text">(input 的type 屬性的默認(rèn)值就是"text")

以下是單行文本框的主要屬性:

size:指定文本框的寬度,以字符個數(shù)為單位;在大多數(shù)瀏覽器中,文本框的缺省寬度是20個字符。

value:指定文本框的默認(rèn)值,是在瀏覽器第一次顯示表單或者用戶單擊按鈕之后在文本框中顯示的值。

maxlength:指定用戶輸入的最大字符長度。

readonly:只讀屬性,當(dāng)設(shè)置readonly屬性后,文本框可以獲得焦點(diǎn),但用戶不能改變文本框中的value。

disabled:禁用,當(dāng)文本框被禁用時,不能獲得焦點(diǎn),當(dāng)然,用戶也不能改變文本框的值。并且在提交表單時,瀏覽器不會將該文本框的值發(fā)送給服務(wù)器。

2.密碼框<input type="password">


3.單選按鈕<input type="radio">


使用方式:使用name相同的一組單選按鈕,不同radio設(shè)定不同的value值,這樣通過取指定name的值就可以知道誰被選中了,不用單獨(dú)的判斷。單選按鈕的元素值由value屬性顯式設(shè)置,表單提交時,選中項(xiàng)的value和name被打包發(fā)送,不顯式設(shè)置value。

4.復(fù)選框<input type="checkbox">


使用復(fù)選按鈕組,即name相同的一組復(fù)選按鈕,復(fù)選按鈕表單元素的元素值由value屬性顯式設(shè)置,表達(dá)提交時,所有選中項(xiàng)的value和name被打包發(fā)送


5.隱藏域<input type="hidden"

隱藏域通常用于向服務(wù)器提交不需要顯示給用戶的信息。

6.文件上傳<input type="file">

使用file,則form的enctype必須設(shè)置為multipart/form-data,method屬性為POST。

7.下拉框<select></select>


<select>標(biāo)記創(chuàng)建一個列表框,<option>標(biāo)記創(chuàng)建一個列表項(xiàng),<select>與嵌套的<option>一起使用,共同提供在一組選項(xiàng)中進(jìn)行選擇的方式。

將一個option設(shè)置為選中:<option selected>北京</option> 或者 <option selected="selected">北京</option>就可以將這個項(xiàng)設(shè)定為選擇項(xiàng)。

8.多行文本<textarea></textarea>


cols表示列數(shù),rows表示行數(shù),若不設(shè)置則采用瀏覽器默認(rèn)顯示

9.<label></label>標(biāo)簽


在<input type="">前可以寫普通的文本來修飾,但是單擊修飾文本的時候input并不會得到焦點(diǎn),而用label則可以,for屬性指定要修飾的控件的id

10.提交按鈕<input type="Submit">、重置按鈕<input type="Reset">、普通按鈕<input type="button">


按提交按鈕時,表單數(shù)據(jù)會提交給標(biāo)簽的action屬性所指定的服務(wù)器處理程序。

按重置鈕時,表單中的值被重置為初始值。在用戶提交表單時,重置按鈕的name和value不會提交給服務(wù)器。

普通按鈕通常用于單擊執(zhí)行一段腳本代碼。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 表單基礎(chǔ)知識 在HTML中,表單是由 元素來表示的,而在JS中,表單對應(yīng)的則是HTMLFormElement類型。...
    oWSQo閱讀 959評論 0 1
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,527評論 1 41
  • 一、表單 1. 表單的作用 HTML 表單用于接收不同類型的用戶輸入,用戶提交表單時向服務(wù)器傳輸數(shù)據(jù),從而實(shí)現(xiàn)用戶...
    zx9426閱讀 528評論 0 1
  • OpenStack 服務(wù)支持各種安全方法,包括密碼、策略和加密。此外,數(shù)據(jù)庫服務(wù)和消息代理也支持密碼安全。 為了簡...
    堅(jiān)果的野望閱讀 210評論 0 0
  • 可能我生下來就是為了感情難過,小時候因?yàn)橛H情,長大因?yàn)閻矍椤? 好想把我自己的過往寫出來,然后好好整理一...
    老賊別跑閱讀 324評論 0 0

友情鏈接更多精彩內(nèi)容