表單的設計

發布時間:2007年02月07日      浏覽次數:2355 次
10-1 表單标記<form>
表單在Web網頁中(zhōng)用來給訪問者填寫信息,從而能采集客戶端信息,使網頁具有交互的功能。一(yī)般是将表單設計在一(yī)個Html文檔中(zhōng),當用戶填寫完信息後做提交(submit)操作,于是表單的内容就從客戶端的浏覽器傳送到服務器上,經過服務器上的 ASP 或 CGI 等處理程序處理後,再将用戶所需信息傳送回客戶端的浏覽器上,這樣網頁就具有了交互性。這裏我(wǒ)(wǒ)們隻講怎樣使用Html标志(zhì)來設計表單。
表單是由窗體(tǐ)和控件組成的,一(yī)個表單一(yī)般應該包含用戶填寫信息的輸入框,提交和按鈕等,這些輸入框,按鈕叫做控件,表單很像容器,它能夠容納各種各樣的控件。
一(yī)個表單用<form></form>标志(zhì)來創建。也即定義表單的開(kāi)始和結束位置,在開(kāi)始和結束标志(zhì)之間的一(yī)切定義都屬于表單的内容。<form>标志(zhì)具有action、method和target屬性。action的值是處理程序的程序名(包括 網絡路徑:網址或相對路徑),如:<form action="用來接收表單信息的url">,如果這個屬性是空值("")則當前文檔的url将被使用.當用戶提交表單時,服務器将執行網址裏面的程序(一(yī)般是CGI程序)。method屬性用來定義處理程序從表單中(zhōng)獲得信息的方式,可取值爲 GET 和 POST 的其中(zhōng)一(yī)個。GET方式是處理程序從當前Html文檔中(zhōng)獲取數據,然而這種方式傳送的數據量是有所限制的,一(yī)般限制在1KB(255個字節)以下(xià)。POST方式傳送的數據比較大(dà),它是當前的Html文檔把數據傳送給處理程序,傳送的數據量要比使用GET方式的大(dà)的多。target屬性用來指定目标窗口或目标幀。可選當前窗口_self,父級窗口_parent,頂層窗口_top,空白(bái)窗口_blank。
表單标簽的格式: <FORM action="url" method=get|post name="myform" target="_blank">... </FORM>
10-2 寫入标記<input>
在html語言中(zhōng),标記<input>具有重要的地位,它能夠将浏覽器中(zhōng)的控件加載到html文檔中(zhōng),該标記是單個标記,沒有結束标記。<input type="">标志(zhì)用來定義一(yī)個用戶輸入區,用戶可在其中(zhōng)輸入信息。此标志(zhì)必須放(fàng)在 <form></form>标志(zhì)對之間。<input type="">标志(zhì)中(zhōng)共提供了九種類型的輸入區域,具體(tǐ)是哪一(yī)種類型由type屬性來決定。請看下(xià)邊列表:
type屬性值定義
type屬性取值
輸入區域類型
控件的屬性及說明

<input type="TEXT" size="" maxlength=""> 單行的文本輸入區域,size與maxlength屬性用來定義此種輸入區域顯示的尺寸大(dà)小(xiǎo)與輸入的最大(dà)字符數 (1)name 定義控件名稱
(2)value 指定控件初始值,該值就是浏覽器被打開(kāi)時在文本框中(zhōng)的内容
(3)size 指定控件寬度,表示該文本輸入框所能顯示的最大(dà)字符數。
(4)maxlength 表示該文本輸入框允許用戶輸入的最大(dà)字符數。
(5)onchang 當文本改變時要執行的函數
(6)onselect 當控件被選中(zhōng)時要執行的函數
(7)onfocus 當文本接受焦點時要執行的函數
<input type="button">
普通按鈕,當這個按鈕被點擊時,就會調用屬性onclick指定的函數;在使用這個按鈕時,一(yī)般配合使用value指定在它上面顯示的文字,用onclick指定一(yī)個函數,一(yī)般爲JavaScript的一(yī)個事件。 這三個按鈕有下(xià)面共同的屬性:
(1)name 指定按鈕名稱
(2)value 指定按鈕表面顯示的文字
(3)onclick 指定單擊按鈕後要調用的函數
(4)onfocus 指定按鈕接受焦點時要調用的函數
<input type="SUBMIT"> 提交到服務器的按鈕,當這個按鈕被點擊時,就會連接到表單form屬性action指定的url地址。
<input type="RESET"> 重置按鈕,單擊該按鈕可将表單内容全部清除,重新輸入數據。
<input type="CHECKBOX" checked> 一(yī)個複選框,checked屬性用來設置該複選框缺省時是否被選中(zhōng),右邊示例中(zhōng)使用了三個複選框 checkbox用于多選,有以下(xià)屬性:
(1) name 定義控件名稱
(2) value 定義控件的值
(3) checked 設定控件初始狀态是被選中(zhōng)的
(4) onclick 定義控件被選中(zhōng)時要執行的函數
(5) onfocus 定義控件爲焦點時要執行的函數
<input type="HIDDEN"> 隐藏區域,用戶不能在其中(zhōng)輸入,用來預設某些要傳送的信息 hidden 隐藏控件,用于傳遞數據,對用戶來說是不可見的;屬性有:
(1)name 控件名稱,
(2)value 控件默認值
(3)hidden隐藏控件的默認值會随表單一(yī)起發送給服務器,例如:
<input type="Hidden" name="ss" value="688">
控件的名稱設置爲ss,設置其數據爲"688",當表單發送給服務器後,服務器就可以根據hidden的名稱ss,讀取value的值688;
<input type="IMAGE" src="URL"> 使用圖像來代替Submit按鈕,圖像的源文件名由src屬性指定,用戶點擊後,表單中(zhōng)的信息和點擊位置的X、Y坐标一(yī)起傳送給服務器 (1)name 指定圖像按鈕名稱
(2)src 指定圖像的url地址
<input type="PASSWARD"> 輸入密碼的區域,當用戶輸入密碼時,區域内将會顯示"*"号 password 口令控件
表示該輸入項的輸入信息是密碼,在文本輸入框中(zhōng)顯示"*",屬性有:
(1)name 定義控件名稱
(2)value 指定控件初始值,該值就是浏覽器被打開(kāi)時在文本框中(zhōng)的内容
(3)size 指定控件寬度,表示該文本輸入框所能顯示的最大(dà)字符數。
(4)maxlegnth 表示該文本輸入框允許用戶輸入的最大(dà)字符數。

<input type="RADIO"> 單選按鈕類型,checked屬性用來設置該單選框缺省時是否被選中(zhōng),右邊示例中(zhōng)使用了三個單選框 radio用于單選,有以下(xià)屬性:
(1) name 定義控件名稱
(2) value 定義控件的值
(3) checked 設定控件初始狀态是被選中(zhōng)的
(4) onclick 定義控件被選中(zhōng)時要執行的函數
(5) onfocus 定義控件爲焦點時要執行的函數
當爲單選項時,所有按鈕的name屬性必需相同,如:都設置爲my_radio。

以上類型的輸入區域有一(yī)個公共的屬性name,此屬性給每一(yī)個輸入區域一(yī)個名字。這個名字與輸入區域是一(yī)一(yī)對應的,即一(yī)個輸入區域對應一(yī)個名字。服務器就是通過調用某一(yī)輸入區域的名字的value值來獲得該區域的數據的。而value屬性是另一(yī)個公共屬性,它可用來指定輸入區域的缺省值。
應用格式
<input 屬性1 屬性2......>
常用屬性:
1 name 控件名稱
2 type控件類型 如:botton 普通按鈕,texe 文本框等
3 align 指定對齊方式,可取top, bottom, middl
4 size 指定控件的寬度
5 value 用于設定輸入默認值
6 maxlength在單行文本的時候允許輸入的最大(dà)字符數
7 src 插入圖像的地址
8 event 指定激發的事件
實例:10-2.html
<html>
<head>
<title><input>的控件</title>
</head>
<body>
<center>
<h2><font color="#339933"><input>控件的使用</font></h2></center>
<pre>
<form action="" method="post" target="_parent">
單行的文本輸入區域: <INPUT name=T1 type=text>
普通按鈕: <INPUT name=B1 type=button value=button>
提交按鈕: <INPUT name=B1 type=submit value=Submit>
重置按鈕: <INPUT name=B1 type=reset value=Reset>
複選框: 你喜歡哪些教程:<INPUT name=C1 type=checkbox value=ON> Html入門 <INPUT CHECKED name=C2 type=checkbox value=ON> 動态Html <INPUT name=C3 type=checkbox value=ON> ASP
圖像來代替Submit按鈕: <INPUT border=0 name=I2 height=20 src="../../imge/nnn.gif" type=image width=65>
密碼的區域: <INPUT name=p1
type=password> </P>
單選按鈕: 你的休閑愛好是什麽:<INPUT CHECKED name=R1 type=radio value=V1> 音樂 <INPUT name=R1 type=radio value=V2> 體(tǐ)育 <INPUT name=R1 type=radio value=V3> 旅遊
</form>
</pre>
<a href="20170711122112.html" onClick="javascript:window.history.back()"><FONT size=4>返回</FONT></A></SUB>
</PRE>
</body>
</html>
10-3 菜單下(xià)拉列表框<select></select><option>
<select></select>标志(zhì)對用來創建一(yī)個菜單下(xià)拉列表框。此标志(zhì)對用于<form></form>标志(zhì)對之間。<select>具有multiple、name和size屬性。multiple屬性不用賦值,直接加入标志(zhì)中(zhōng)即可使用,加入了此屬性後列表框就成了可多選的了;name是此列表框的名字,它與上邊講的name屬性作用是一(yī)樣的;size屬性用來設置列表的高度,缺省時值爲1,若沒有設置(加入)multiple屬性,顯示的将是一(yī)個彈出式的列表框。
<option>标志(zhì)用來指定列表框中(zhōng)的一(yī)個選項,它放(fàng)在<select></select>标志(zhì)對之間。此标志(zhì)具有selected和value屬性,selected用來指定默認的選項,value屬性用來給<option>指定的那一(yī)個選項賦值,這個值是要傳送到服務器上的,服務器正是通過調用<select>區域的名字的value屬性來獲得該區域選中(zhōng)的數據項的。
實例:10-3-1.html
<html>
<head>
<title>下(xià)拉列表框</title>
</head>
<body>
<form action="" method="post">
<p>請選擇最喜歡的男歌星:
<select name="gx1" size="1">
<option value="ldh">劉德華
<option value="zhxy" selected>張學友
<option value="gfch">郭富城
<option value="lm">黎明
</select>
</form>
</body>
</html>
實例:10-3-2.html
<html>
<head>
<title>複選的列表框</title>
</head>
<body>
<form action="" method="post">
<p>請選擇最喜歡的女歌星:
<select name="gx2" multiple size="4">
<option value="zhmy">張曼玉
<option value="wf" selected>王菲
<option value="tzh">田震
<option value="ny">那英
</select>
</form>
</body>
</html>
10-4 多行的文本框.<textarea></textarea>
<textarea></textarea>用來創建一(yī)個可以輸入多行的文本框,此标志(zhì)對用于<form></form>标志(zhì)對之間。<textarea>具有以下(xià)屬性:
(1)onchange指定控件改變時要調用的函數
(2)onfocus當控件接受焦點時要執行的函數
(3)onblur當控件失去(qù)焦點時要執行的函數
(4)onselect當控件内容被選中(zhōng)時要執行的函數
(5)name這文字區塊的名稱,作識别之用,将會傳及 CGI。
(6)cols這文字區塊的寬度。
(7)rows這文字區塊的列數,即其高度。
(8)wrap屬性 定義輸入内容大(dà)于文本域時顯示的方式,可選值如下(xià):
*默認值是文本自動換行;當輸入内容超過文本域的右邊界時會自動轉到下(xià)一(yī)行,而數據在被提交處理時自動換行的地方不會有換行符出現;
*Off,用來避免文本換行,當輸入的内容超過文本域右邊界時,文本将向左滾動;
*Virtual,允許文本自動換行。當輸入内容超過文本域的右邊界時會自動轉到下(xià)一(yī)行,而數據在被提交處理時自動換行的地方不會有換行符出現;
*Physical,讓文本換行,當數據被提交處理時換行符也将被一(yī)起提交處理。
這裏列與行是以字符數爲單位的。
實例:10-4.html
<html>
<head>
<title>多行的文本框</title>
</head>
<body>
<form action="" method="post">
<p>您的意見對我(wǒ)(wǒ)很重要:
<textarea name="yj" clos="20" rows="5">
請将意見輸入此區域
</textarea>
</form>
</body>
</html>
文章來源:http://longka.flasher123.com/zy/index/h10.html
免責聲明:本站相關技術文章信息部分(fēn)來自網絡,目的主要是傳播更多信息,如果您認爲本站的某些信息侵犯了您的版權,請與我(wǒ)(wǒ)們聯系,我(wǒ)(wǒ)們會即時妥善的處理,謝謝合作!