用戶登錄  |  用戶注冊
首 頁源碼下載網絡學院最新源碼源碼排行屏蔽廣告
當前位置:新興網絡 > 網絡學院 > 網頁制作 > HTML

HTML表單<FORM>(7)——HTML入門系

減小字體 增大字體 作者:佚名  來源:本站整理  發布時間:2010-05-05 23:31:02

什么是表單?

HTML中的表單是HTML頁面與瀏覽器端實現交互的重要手段。利用表單,服務器可以收集客戶端瀏覽器提交的相關信息,比如輸入的密碼等等。我們在瀏覽網站時經常會遇到表單,它是服務器與瀏覽器實現互動功能的重要組成部分,互動在這里的意思是指相互之間交換數據的一個過程,比如把我們在本地輸入的密碼傳送到服務器上。不管網站的服務端使用的是哪一種形式的語言來實現網站的互動的功能,例如ASP、PHP、JSP等,目前表單都已經成為它們統一的信息收集方法。

表單的主要功能是收集信息,具體的說是收集瀏覽者的信息。例如在網上申請一個電子郵箱,就必須按要求填寫完成網站提供的表單頁面,其內容主要是姓名、年齡、聯系方式等個人信息。又例如要在某個論壇上發言,發言之前要申請資格,也是要填寫完成一個表單網頁。當然表單在不看源代碼的情況下是不可見的,用戶感覺不出表單的存在了。

表單可以通常用于調查、定購、搜索等功能,一般的表單由兩部分組成,一是描述表單元素的HTML源代碼,在瀏覽器上我們可以通過源代碼來查找這部分。二是客戶端腳本,或者是服務器端用來處理用戶所填寫的程序,這里主要是處理收集過來的數據,比如上面的例子中獲得的密碼,傳送到服務器上肯定要驗證密碼是否正確的了,如果正確就進入,錯誤就登陸不了,這就是一個處理過程。在HTML中,我們可以定義表單,并且使表單與ASP、PHP等服務端腳本語言的表單處理程序配合。表單信息的處理過程為:當我們單擊表單中提交的按鈕時,輸入在表單中的信息就會傳送到服務器中,然后由服務器的相關應用程序進行處理,處理后或者將用戶提交的信息存儲在服務端的數據庫中,或者將有關信息返回到客戶端的瀏覽器上。下面就來具體接觸一下表單的各個知識點。

一、表單標記<Form>

表單是在網頁上的一個特定的區域中,這個區域由一對<FORM>標記定義和標識的。<FORM>標記在網頁中主要有兩個方面的作用。

第一、可以限定表單它的作用范圍,其他的表單對象標記都要插入到表單之中。比如我們單擊提交按鈕時,提交的也是表單范圍之內的內容,而表單之外的內容確不會提交。

第二、包含表單本身的所具有的相關信息,例如處理表單的腳本程序的位置、提交表單的方法等。表單的基本語法和語法解釋如下。

基本語法:

 

HTML code復制代碼編輯
<FORM name="form_name" method="method" action="URL" enctype="value" target="target_win">
    ..............
</FORM>


語法解釋如下表:

屬性

                       描述

NAME

表單的名稱

METHOD

定義表單的從瀏覽器傳送到服務器的方法,一般用:getpost兩種方法

ACTION

定義表單處理程序的位置,有絕對路徑和相對路徑兩種

ENCTYPE

設置表單的編碼方式

TARGET

設置返回信息的顯示方式

 

在上面的屬性中NAME、METHOD、ACTION最為常用,也是腳本程序分析的基礎,下面分別對他們進行詳細的說明和解釋。 1. <FORM>標記的Name屬性 基本語法是: <FORM name="form_name"> ………………… <FORM> 通過表單名可以控制表單與服務端的處理程序之間建立關系,用名字來確定在服務端中程序處理的標識。

2. <FORM>標記的Action屬性 基本語法是: <FORM ACTION="URL"> ………………… <FORM> 通過表單的ACTION屬性,定義了表單中數據提交的地址,這個地址可以是絕對路徑也可以是相對路徑,也可以是郵件地址.

例如:<FORM NAME="郵件" ACTION="mailto:zhangsan@gmail.com">

3. <FORM>標記的Mthod屬性 基本語法是: <FORM Mthod="method"> ……………… <FORM> Mthod有兩種方法選擇,一是Get二是Post。通過Get方法提交數據時,那么表單中所有的內容都會附加在URL地址后面,之間通過問號"?"隔開。傳遞數據的格式是"name=value",name就是要傳遞的數據的名字,而value就是要傳遞的值,當有多個要傳遞的時候,多個值之間可以通過符號"&"分隔開。例如http://localhost/haha/haha.asp?name1=value1&name2=value2。由于這個數據是在URL地址后面,所以對提交的信息的長度進行了限制,不可以超過8192個字符。目前使用最多的還是Post方法,這個方法將用戶在表單中填寫的數據包含在表單的主體中,一起傳到服務端的處理程序中,所以這個方法沒有大小限制,在不指明哪種方式時,默認是Get方式。 在定義好了表單標記<FORM>后,就可在里面添加完成具體功能的代碼的標記的了,表單中可以包含的標記有4個,如下表所示

    標記

                     描述

<INPUT>

表單輸入標記

<SELECT>

菜單和列表標記

<OPTION>

菜單和列表項目標記

<TEXTAREA>

文字域標記

在HTML代碼中,他們的組織形式如下

HTML code復制代碼編輯
<FORM>
    <input>……………</input>
    <textarea>……………</textarea>
    <select>
        <option>…………</option>
    </select>
</FORM>

對于上面的標記,在腳本黑客技術中最頻繁的應該就是<INPUT><TEXTAREA>這兩個了,下面就詳細的來講解這兩個標記。


二、輸入標記<Input>
輸入標記<INPUT>是表單中最常用的標記之一,我們在網頁中常用的文本域、按鈕都是使用的這個標記;菊Z法如下:
HTML code復制代碼編輯
<form>
    <input name="field_name" type="type_name">
</form>
    其中name是域的名稱,type是域的的類型。在type屬性中可以有很多屬性值。其中常用的而且是和黑客技術聯系緊密的有:TEXT、PASSWORD、FILE、BUTTON、SUBMIT、RESET、HIDDEN。

1.文字域TEXT

    TEXT屬性值用來設定在表單的文本區域中,輸入任何類型的文本、數字和字母。其中輸入的數據是以單行顯示。這樣說可能大家很難理解,等下我給大家舉個例子說明,首先看他的基本語法和語法解釋。
基本語法:<INPUT type="text" name="field_name" maxlength=value size=value value="field_VALUE">
語法解釋:這些解釋如下表所示

文字域屬性

                         描述

NAME

文字域的名稱

MAXLENGTH

文字域的最大輸入字符數

SIZE

文字域的寬度(以字符為單位)

VALUE

文字域的默認值

這就是文字域的一些基本知識,可能很多朋友還是不明白,下面就通過編寫一個例子來說明,代碼如下:

HTML code運行代碼復制代碼編輯
<html>
    <head>
        <title>插入文字域</title>
    </head>
    <body>
        用戶調查
        <form action="mailto:zhangsan@gamil.com" method="get" name="haha">
            <!--編寫一個表單,連接為郵件地址,方法是get提交,名字是haha-->
        姓名:<input type="text" name="username" size=20>
            <!--編寫一個文字域,名字為username,寬度為20-->
        網址:<input type="text" name="URL" size=20 maxlength=50 value="http://">
            <!--編寫一個文字域,名字為URL,寬度為20,最大輸入長度為50 默認值是http://-->
        </from>
    </body>
</html>

 編寫完代碼之后,我們把后綴名改成html后,執行看看,如(圖1)所示,對于這樣的圖片來說,相信會上網的朋友都應該都見過吧。

(圖1)

2. 密碼域Password
    我們在上網時,比如登陸郵箱是肯定要輸入密碼的,這個輸入密碼的輸入框叫做密碼域,它是文本域的另外一種形式。他的功能是輸入到文本域中的文章均以星號"*"或者圓點顯示,基本語法和上面的文字域差不多,區別是要把type中的text改成password即可。還是用上面文本域的例子為基礎,在<form>標記之間加入一條代碼"密碼:<inpyt type="password" name="password" size="20" maxlength="30"> ,保存之后打開文件,并且在密碼輸入框中輸入任何字符看看,都是圓點,而真正的字符卻隱藏了,如(圖2)所示。

 

(圖2)

3.文件域File

文件域可以讓我們在域的內部填寫自己本地電腦上的文件,最后通過表單上傳,這是文件域的基本功能。運用的最多的應該就是上傳了。文件域在外觀上是一個文本框加一個瀏覽按鈕,我們既可以直接將要上傳給網站的文件的路徑填寫在文本框中,也可以單擊瀏覽按鈕,在自己的電腦中找到要上傳的文件。
基本語法是 

<INPUT type="file" name="field_name">

它的類型為File,Name為這個文件域的名稱,下面來簡單的編寫一個文件域,代碼如下:

HTML code運行代碼復制代碼編輯
<html>
  <head>
    <title>文本域</title>
  </head>
  <body>
    <form>
      請上傳你的相片:<INPUT type="file" name="file">
    </form>
  </body>
</html>


保存之后打開就可以看到文本域的真實面目了,如(圖3)所示。這樣的上傳圖片相信大家都見過吧。
 

(圖3)

4.按鈕
    表單中的按鈕起著一個至關重要的作用。按鈕可以有提交表單所有數據到服務端的功能、可以在用戶需要修改表單的時候,將表單恢復到初始的狀態,還可以依照程序的需要,發揮其他的作用。按鈕一般分了BUTTON(普通按鈕)、SUBMIT(提交按鈕)、RESET(重置按鈕) 三種。

    普通按鈕BUTTON的語法是<INPUT type= "BUTTON" name= "field_name" value= "BUTTON_TEXT">,其中value的值代表顯示在按鈕上的文字。

    提交按鈕SUBMIT的作用是在單擊這個按鈕后,把表單中的數據全部提交到服務端的處理程序中去;菊Z法是<INPUT type= "SUBMIT" name= "field_name" value= "BUTTON_TEXT">,其中value的值代表顯示在按鈕上的文字。

    重置按鈕RESET就是在單擊按鈕后,把我們添入在表單中的數據全部清除,恢復到默認的表單內容設定;菊Z法是<INPUT type= "RESET" name= "field_name" value= "BUTTON_TEXT">,再次提示:在HTML語言中,大小是不區分的。下面簡單編寫一個例子來實踐一下按鈕的效果,代碼如下。

 

HTML code運行代碼復制代碼編輯
<html>
  <head>
    <title>表單按鈕演示</title>
  </head>
  <body>
    用戶注冊
    <form action="mailto:zhangsan@gmail.com" method="get" name="haha">
      姓名:<input type="text" name="username" size=20><br>
      密碼:<input type="password" name="password" size=20 maxlength=30><br>
      網址:<input type="text" name="URL" size=20 maxlength=50 value=http:/ /><br>
      <INPUT type= "BUTTON" name= "field_name" value= "普通按鈕">
      <INPUT type= "SUBMIT" name= "field_name" value= "提交按鈕">
      <INPUT type= "RESET" name= "field_name" value= "重置按鈕">
    </from>
  </body>
</html>

保存之后,打開文件看看,如(圖4)所示。我想相似的圖片應該也大家見過吧,最多的就是在注冊用戶時使用。

(圖4)

5. 隱藏域HIDDEN

    隱藏域在頁面中對于我們用戶來說是看不到的,因為他被隱藏起來了,在表單中插入隱藏域的目的就是在于收集或發送信息。我們在點擊提交按紐發送表單數據的時候,隱藏域的信息也被一起發送到了服務器中。他的基本語法是<INPUT type="field_name" value="value">。我之所以也給大家講解在隱藏是因為很多程序在寫程序認為這個是隱藏起來的,認為用戶看不到,所以很多情況下是沒有隱藏域的參數進行檢測和過濾,所以發生了很多安全事故。
 

三、文本域標記<TEXTAREA>

    這個標記通常用來網頁中做多行的文字域,這樣可以輸入更多的文本,用的最多的是在文章的評論中。

的基本語法是: 

HTML code復制代碼
<TEXTAREA  name="name"  rows="value"  cols="value" value="value"></TEXTAREA> 

,它所具有的屬性如下表所示。

文本域標記屬性

                            描述

name

文本域的名稱

      rows

文本域的行數

     cols

文本域的列數

     Value

文本域的默認值

下面結合一個例子來具體說明,讓大家從實踐中明白這不是很難。具體代碼如下:

HTML code運行代碼復制代碼編輯
<html>
  <head>
    <title>文本域功能演示</title>
  </head>
  <body>
    用戶調查
    <form action="mailto:zhangsan@gmail.com" method="get" name="haha">
      留言板:<br>
      <TEXTAREA name="comment" rows=5 cols=40 ></TEXTAREA><br>
      <INPUT type= "SUBMIT" name= "field_name" value= "提交留言">
    </form>
  </body>
</html>

   保存代碼和改了后綴名之后打開看看,是不是和網上的留言板一樣呢,如(圖5)所示。
 

(圖5)

Tags:HTML入門 表單 Form

作者:佚名
  • 好的評價 如果您覺得此文章好,就請您
      94%(15)
  • 差的評價 如果您覺得此文章差,就請您
      6%(1)

網絡學院評論評論內容只代表網友觀點,與本站立場無關!

   評論摘要(共 0 條,得分 0 分,平均 0 分) 查看完整評論
秒速时时彩