HTML表單 (7)——HTML入門教程

2024-08-26 00:17:40

字體：大中小

供稿：網(wǎng)友

什么是表單?

HTML中的表單是HTML頁面與瀏覽器端實(shí)現(xiàn)交互的重要手段。利用表單，服務(wù)器可以收集客戶端瀏覽器提交的相關(guān)信息，比如輸入的密碼等等。我們?cè)跒g覽網(wǎng)站時(shí)經(jīng)常會(huì)遇到表單，它是服務(wù)器與瀏覽器實(shí)現(xiàn)互動(dòng)功能的重要組成部分，互動(dòng)在這里的意思是指相互之間交換數(shù)據(jù)的一個(gè)過程，比如把我們?cè)诒镜剌斎氲拿艽a傳送到服務(wù)器上。不管網(wǎng)站的服務(wù)端使用的是哪一種形式的語言來實(shí)現(xiàn)網(wǎng)站的互動(dòng)的功能，例如ASP、PHP、JSP等，目前表單都已經(jīng)成為它們統(tǒng)一的信息收集方法。

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

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

一、表單標(biāo)記<Form>

表單是在網(wǎng)頁上的一個(gè)特定的區(qū)域中，這個(gè)區(qū)域由一對(duì)<FORM>標(biāo)記定義和標(biāo)識(shí)的。<FORM>標(biāo)記在網(wǎng)頁中主要有兩個(gè)方面的作用。

第一、可以限定表單它的作用范圍，其他的表單對(duì)象標(biāo)記都要插入到表單之中。比如我們單擊提交按鈕時(shí)，提交的也是表單范圍之內(nèi)的內(nèi)容，而表單之外的內(nèi)容確不會(huì)提交。

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

基本語法：

HTML code復(fù)制代碼編輯

<FORM name="form_name" method="method" action="URL" enctype="value" target="target_win">    ..............</FORM>

語法解釋如下表：

屬性	描述
NAME	表單的名稱
METHOD	定義表單的從瀏覽器傳送到服務(wù)器的方法，一般用：get和post兩種方法
ACTION	定義表單處理程序的位置，有絕對(duì)路徑和相對(duì)路徑兩種
ENCTYPE	設(shè)置表單的編碼方式
TARGET	設(shè)置返回信息的顯示方式

在上面的屬性中NAME、METHOD、ACTION最為常用，也是腳本程序分析的基礎(chǔ)，下面分別對(duì)他們進(jìn)行詳細(xì)的說明和解釋。 1. <FORM>標(biāo)記的Name屬性基本語法是： <FORM name="form_name"> ………………… <FORM> 通過表單名可以控制表單與服務(wù)端的處理程序之間建立關(guān)系，用名字來確定在服務(wù)端中程序處理的標(biāo)識(shí)。

2. <FORM>標(biāo)記的Action屬性基本語法是： <FORM ACTION="URL"> ………………… <FORM> 通過表單的ACTION屬性，定義了表單中數(shù)據(jù)提交的地址，這個(gè)地址可以是絕對(duì)路徑也可以是相對(duì)路徑，也可以是郵件地址.

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

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

標(biāo)記	描述
<INPUT>	表單輸入標(biāo)記
<SELECT>	菜單和列表標(biāo)記
<OPTION>	菜單和列表項(xiàng)目標(biāo)記
<TEXTAREA>	文字域標(biāo)記

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

HTML code復(fù)制代碼編輯

<FORM>    <input>……………</input>    <textarea>……………</textarea>    <select>        <option>…………</option>    </select></FORM>

對(duì)于上面的標(biāo)記，在腳本黑客技術(shù)中最頻繁的應(yīng)該就是<INPUT>和<TEXTAREA>這兩個(gè)了，下面就詳細(xì)的來講解這兩個(gè)標(biāo)記。二、輸入標(biāo)記<Input>輸入標(biāo)記<INPUT>是表單中最常用的標(biāo)記之一，我們?cè)诰W(wǎng)頁中常用的文本域、按鈕都是使用的這個(gè)標(biāo)記。基本語法如下:

HTML code復(fù)制代碼編輯

<form>    <input name="field_name" type="type_name"></form>

    其中name是域的名稱，type是域的的類型。在type屬性中可以有很多屬性值。其中常用的而且是和黑客技術(shù)聯(lián)系緊密的有：TEXT、PASSWORD、FILE、BUTTON、SUBMIT、RESET、HIDDEN。1.文字域TEXT

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

文字域?qū)傩?/p>	描述
NAME	文字域的名稱
MAXLENGTH	文字域的最大輸入字符數(shù)
SIZE	文字域的寬度（以字符為單位）
VALUE	文字域的默認(rèn)值

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

HTML code運(yùn)行代碼復(fù)制代碼編輯

<html>    <head>        <title>插入文字域</title>    </head>    <body>        用戶調(diào)查        <form action="mailto:zhangsan@gamil.com" method="get" name="haha">            <!--編寫一個(gè)表單，連接為郵件地址，方法是get提交，名字是haha-->        姓名：<input type="text" name="username" size=20>            <!--編寫一個(gè)文字域，名字為username，寬度為20-->        網(wǎng)址：<input type="text" name="URL" size=20 maxlength=50 value="http://">            <!--編寫一個(gè)文字域，名字為URL，寬度為20，最大輸入長(zhǎng)度為50 默認(rèn)值是http://-->        </from>    </body></html>

編寫完代碼之后，我們把后綴名改成html后，執(zhí)行看看，如(圖1)所示，對(duì)于這樣的圖片來說，相信會(huì)上網(wǎng)的朋友都應(yīng)該都見過吧。

HTML表單 (7)——HTML入門教程

(圖1)

2. 密碼域Password

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

HTML表單 (7)——HTML入門教程

(圖2)

3.文件域File

文件域可以讓我們?cè)谟虻膬?nèi)部填寫自己本地電腦上的文件，最后通過表單上傳，這是文件域的基本功能。運(yùn)用的最多的應(yīng)該就是上傳了。文件域在外觀上是一個(gè)文本框加一個(gè)瀏覽按鈕，我們既可以直接將要上傳給網(wǎng)站的文件的路徑填寫在文本框中，也可以單擊瀏覽按鈕，在自己的電腦中找到要上傳的文件。
基本語法是

<INPUT type="file" name="field_name">它的類型為File，Name為這個(gè)文件域的名稱，下面來簡(jiǎn)單的編寫一個(gè)文件域，代碼如下：

HTML code運(yùn)行代碼復(fù)制代碼編輯

<html>  <head>    <title>文本域</title>  </head>  <body>    <form>      請(qǐng)上傳你的相片：<INPUT type="file" name="file">    </form>  </body></html>

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

HTML表單 (7)——HTML入門教程

(圖3)

4.按鈕    表單中的按鈕起著一個(gè)至關(guān)重要的作用。按鈕可以有提交表單所有數(shù)據(jù)到服務(wù)端的功能、可以在用戶需要修改表單的時(shí)候，將表單恢復(fù)到初始的狀態(tài)，還可以依照程序的需要，發(fā)揮其他的作用。按鈕一般分了BUTTON(普通按鈕)、SUBMIT(提交按鈕)、RESET(重置按鈕) 三種。    普通按鈕BUTTON的語法是<INPUT type= "BUTTON" name= "field_name" value= "BUTTON_TEXT">，其中value的值代表顯示在按鈕上的文字。    提交按鈕SUBMIT的作用是在單擊這個(gè)按鈕后，把表單中的數(shù)據(jù)全部提交到服務(wù)端的處理程序中去。基本語法是<INPUT type= "SUBMIT" name= "field_name" value= "BUTTON_TEXT">，其中value的值代表顯示在按鈕上的文字。    重置按鈕RESET就是在單擊按鈕后，把我們添入在表單中的數(shù)據(jù)全部清除，恢復(fù)到默認(rèn)的表單內(nèi)容設(shè)定。基本語法是<INPUT type= "RESET" name= "field_name" value= "BUTTON_TEXT">，再次提示：在HTML語言中，大小是不區(qū)分的。下面簡(jiǎn)單編寫一個(gè)例子來實(shí)踐一下按鈕的效果，代碼如下。

HTML code運(yùn)行代碼復(fù)制代碼編輯

<html>  <head>    <title>表單按鈕演示</title>  </head>  <body>    用戶注冊(cè)    <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>      網(wǎng)址：<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)所示。我想相似的圖片應(yīng)該也大家見過吧，最多的就是在注冊(cè)用戶時(shí)使用。

HTML表單 (7)——HTML入門教程

(圖4)

5. 隱藏域HIDDEN

隱藏域在頁面中對(duì)于我們用戶來說是看不到的，因?yàn)樗浑[藏起來了，在表單中插入隱藏域的目的就是在于收集或發(fā)送信息。我們?cè)邳c(diǎn)擊提交按紐發(fā)送表單數(shù)據(jù)的時(shí)候，隱藏域的信息也被一起發(fā)送到了服務(wù)器中。他的基本語法是<INPUT type="field_name" value="value">。我之所以也給大家講解在隱藏是因?yàn)楹芏喑绦蛟趯懗绦蛘J(rèn)為這個(gè)是隱藏起來的，認(rèn)為用戶看不到，所以很多情況下是沒有隱藏域的參數(shù)進(jìn)行檢測(cè)和過濾，所以發(fā)生了很多安全事故。

三、文本域標(biāo)記<TEXTAREA>

這個(gè)標(biāo)記通常用來網(wǎng)頁中做多行的文字域，這樣可以輸入更多的文本，用的最多的是在文章的評(píng)論中。

它的基本語法是:

HTML code復(fù)制代碼

<TEXTAREA  name="name"  rows="value"  cols="value" value="value"></TEXTAREA>

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

文本域標(biāo)記屬性	描述
name	文本域的名稱
rows	文本域的行數(shù)
cols	文本域的列數(shù)
Value	文本域的默認(rèn)值

下面結(jié)合一個(gè)例子來具體說明，讓大家從實(shí)踐中明白這不是很難。具體代碼如下：

HTML code運(yùn)行代碼復(fù)制代碼編輯

<html>  <head>    <title>文本域功能演示</title>  </head>  <body>    用戶調(diào)查    <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>

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

HTML表單 (7)——HTML入門教程