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

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

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

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

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

　　● 提示信息：一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。

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

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

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

</form>

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

　　1. action屬性

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

<form action="form_action.asp">

　　表示當提交表單時，表單數(shù)據(jù)會傳送到名為"form_action.asp" 的頁面去處理。

　　action的屬性值可以是相對路徑或絕對路徑，還可以為接收數(shù)據(jù)的E-mail郵箱地址。例如：

<form action=mailto:htmlcss@163.com>

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

　　2. method屬性

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

標簽的method屬性指明表單處理服務(wù)器數(shù)據(jù)的方法，示例代碼如下：

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

　　在上面的代碼中，get為method屬性的默認值，采用get方法，瀏覽器會與表單處理服務(wù)器建立連接，然后直接在一個傳輸步驟中發(fā)送所有的表單數(shù)據(jù)。

　　如果采用post方法，瀏覽器將會按照下面兩步來發(fā)送數(shù)據(jù)。首先，瀏覽器將與action屬性中指定的表單處理服務(wù)器建立聯(lián)系，然后，瀏覽器按分段傳輸?shù)姆椒▽?shù)據(jù)發(fā)送給服務(wù)器。

　　另外，采用get方法提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，且有數(shù)據(jù)量的限制。而post方式的保密性好，并且無數(shù)據(jù)量的限制，所以使用method="post"可以大量的提交數(shù)據(jù)。

　　3. name屬性

　　表單中的name屬性用于指定表單的名稱，而表單控件中具有name屬性的元素會將用戶填寫的內(nèi)容提交給服務(wù)器。創(chuàng)建表單的示例代碼如下：

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

    賬號：    <!--提示信息-->

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

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

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

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

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

圖2創(chuàng)建表單

猜你喜歡：

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

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