中的所有內容都會被提交給服務器。創(chuàng)建表單的基本語法格式如下:" /> 久久午夜夜伦鲁鲁片免费无码影视,国产AⅤ精品一区二区三区
首頁技術文章正文

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

更新時間:2020-11-13 來源:黑馬程序員 瀏覽量:

     

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

1605262062135_44.png

 圖1 表單的構成

  對表單構成中的表單控件、提示信息和表單域的具體解釋如下:

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

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

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

  

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

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

</form>

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

  1. action屬性

  在表單收集到信息后,需要將信息傳遞給服務器進行處理,action屬性用于指定接收并處理表單數(shù)據(jù)的服務器程序的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ù)據(jù)的提交方式,其取值為get或post。在HTML中,可以通過

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

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

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

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

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

  3. name屬性

  表單中的name屬性用于指定表單的名稱,而表單控件中具有name屬性的元素會將用戶填寫的內容提交給服務器。創(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>

  上述示例代碼即為一個完整的表單結構,其中標簽用于定義表單控件,對于該標簽以及標簽的相關屬性,在后面會具體講解,這里了解即可。示例代碼對應效果如圖1所示。

1621498861770_創(chuàng)建表單.jpg

圖2創(chuàng)建表單


猜你喜歡:

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

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

分享到:
在線咨詢 我要報名
和我們在線交談!