首頁(yè)技術(shù)文章正文

HTML表單有哪些屬性?表單屬性簡(jiǎn)介

更新時(shí)間:2021-09-27 來(lái)源:黑馬程序員 瀏覽量:

好口碑IT培訓(xùn)

表單擁有多個(gè)屬性,通過(guò)設(shè)置表單屬性可以實(shí)現(xiàn)提交方式、自動(dòng)完成、表單驗(yàn)證等不同的表單功能。下面將對(duì)表單標(biāo)記的相關(guān)屬性進(jìn)行講解

1.action屬性

在表單收集到信息后,需要將信息傳遞給服務(wù)器進(jìn)行處理,action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。例如:

<form action="form action.asp">

表示當(dāng)提交表單時(shí),表單數(shù)據(jù)會(huì)傳送到名為"form_action.asp',的頁(yè)面去處理。
action的屬性值可以是相對(duì)路徑或絕對(duì)路徑,還可以為接收數(shù)據(jù)的E-mail地址。例如:

<form action=mailto:htmlcss@1 63.com>表示當(dāng)提交表單時(shí),表單數(shù)據(jù)會(huì)以電子郵件的形式傳遞出去。


2.method屬性
method屬性用于設(shè)置表單數(shù)據(jù)的提交方式,其取值為get或post。在HTML5中,可以通過(guò)<form>標(biāo)記的method屬性指明表單處理服務(wù)器處理數(shù)據(jù)的方法,示例代碼如下:

<form action="form action. asp" method="get">

在上面的代碼中,get為method屬性的默認(rèn)值,采用get方法,瀏覽器會(huì)與表單處理服務(wù)器建立連接,然后直接在一個(gè)傳輸步驟中發(fā)送所有的表單數(shù)據(jù)。
如果采用post方法,瀏覽器將會(huì)按照下面兩步來(lái)發(fā)送數(shù)據(jù)。首先,瀏覽器將與action屬性中指定的表單處理服務(wù)器建立聯(lián)系,然后瀏覽器按分段傳輸?shù)姆椒▽?shù)據(jù)發(fā)送給服務(wù)器。
另外,采用get方法提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中,保密性差,且有數(shù)據(jù)量的限制。而post方式的保密性好,并且無(wú)數(shù)據(jù)量的限制,所以使用method="post"可以提交大量數(shù)據(jù)。


3.name屬性
name屬性用于指定表單的名稱,具有name屬性的元素會(huì)將用戶填寫的內(nèi)容提交給服務(wù)器。

4.autocomplete屬性
autocomplete屬性用于指定表單是否有自動(dòng)完成功能。所謂“自動(dòng)完成”,是指將表單控件輸人的內(nèi)容記錄下來(lái),當(dāng)再次輸人時(shí),會(huì)將輸人的歷史記錄顯示在一個(gè)下拉列表里,以實(shí)現(xiàn)自動(dòng)完成輸入。
autocomplete屬性有兩個(gè)值,對(duì)它們的解釋如下。
①on:表單有自動(dòng)完成功能。
②off:表單無(wú)自動(dòng)完成功能。
autocomplete屬性示例代碼如下:

<form id="formBox" autocomplete="on">

值得一提的是,autocomplete屬性不僅可以用于<form>標(biāo)記,還可以用于所有輸人類型的<input/>標(biāo)記。

5.novalidate屬性
novalidate屬性指定在提交表單時(shí)取消對(duì)表單進(jìn)行有效的檢查。為表單設(shè)置該屬性時(shí),可以關(guān)閉整個(gè)表單的驗(yàn)證,這樣可以使<form>標(biāo)記內(nèi)的所有表單控件不被驗(yàn)證,示例代碼如下:

<form action="form_action.asp" method="get" novalidate="true">

上述示例代碼對(duì)form標(biāo)記應(yīng)用“novalidate="true"” 樣式,來(lái)取消表單驗(yàn)證。

注意: <form>標(biāo)記的屬性并不會(huì)直接影響表單的顯示效果。要想讓一個(gè)表單有意義,就必須在<form>與</form>之間添加相應(yīng)的表單控件。


猜你喜歡:

表單的構(gòu)成是什么?如何創(chuàng)建表單

表格標(biāo)簽的特性,如何在HTML網(wǎng)頁(yè)中創(chuàng)建表格

CSS怎樣控制表格單元格的寬高?

黑馬程序員web前端開發(fā)課程

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!