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

　　HTML中，一個(gè)完整的表單通常由表單控件、提示信息和表單域3個(gè)部分構(gòu)成，如圖1所示。

　圖1 表單的構(gòu)成

　　對(duì)表單構(gòu)成中的表單控件、提示信息和表單域的具體解釋如下：

　　● 表單控件：包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、搜索框等。

　　● 提示信息：一個(gè)表單中通常還需要包含一些說(shuō)明性的文字，提示用戶進(jìn)行填寫(xiě)和操作。

　　● 表單域：相當(dāng)于一個(gè)容器，用來(lái)容納所有的表單控件和提示信息，可以通過(guò)它處理表單數(shù)據(jù)所用程序的url地址，定義數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無(wú)法傳送到后臺(tái)服務(wù)器。

      標(biāo)簽被用于定義表單域，即創(chuàng)建一個(gè)表單，以實(shí)現(xiàn)用戶信息的收集和傳遞，中的所有內(nèi)容都會(huì)被提交給服務(wù)器。創(chuàng)建表單的基本語(yǔ)法格式如下：

<form action="url地址" method="提交方式" name="表單名稱">
        各種表單控件

</form>

　　在上面的語(yǔ)法中，<form>與</form>與之間的表單控件是由用戶自定義的，action、method和name為表單標(biāo)簽的常用屬性，分別用于定義url地址、表單提交方式及表單名稱，具體介紹如下。

　　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@163.com>

　　表示當(dāng)提交表單時(shí)，表單數(shù)據(jù)會(huì)以電子郵件的形式傳遞出去。

　　2. method屬性

　　method屬性用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。在HTML中，可以通過(guò)

標(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ì)將用戶填寫(xiě)的內(nèi)容提交給服務(wù)器。創(chuàng)建表單的示例代碼如下：

<form action="http://www.mysite.cn/index.asp" method="post" name="biao">  <!--表單域-->

    賬號(hào)：    <!--提示信息-->

  <input type="text" name="zhanghao" />          <!--表單控件-->

  密碼：    <!--提示信息-->

  <input type="password" name="mima" />          <!--表單控件-->

  <input type="submit" value="提交"/>            <!--表單控件-->      </form>

　　上述示例代碼即為一個(gè)完整的表單結(jié)構(gòu)，其中標(biāo)簽用于定義表單控件，對(duì)于該標(biāo)簽以及標(biāo)簽的相關(guān)屬性，在后面會(huì)具體講解，這里了解即可。示例代碼對(duì)應(yīng)效果如圖1所示。

圖2創(chuàng)建表單

猜你喜歡：

如何在列表中嵌套多重子列表？?

什么是css盒子，在網(wǎng)頁(yè)中起到什么作用？