當前位置:編程學習大全網 - 編程語言 - 網頁制作中常用的網頁表單的應用

網頁制作中常用的網頁表單的應用

說實話,無論是asp,php還是jsp進行網絡編程的時候,都離不開和用戶的交互。

而人機對話的平臺,基本上是靠相應的文本、列表框進行輸入,然後通過按鈕提交送至數據庫的。

所以學習網絡編程就壹定要了解這些輸入平臺相關的東西:表單(form)其基本格式如下:

form name="form1" action="xxx.asp" method="post"

input type="text" name="yourname"

select name="selectwhat"

optionaaa/option

optionaaa/option

/select

textarea name="textinit" rows=5 cols=10/textarea

/form

可以總結出:表單即包括form.../form之內的相關內容。

其中內部可以分三大類:input,select,textarea

壹,首先看form內部參數

參數name:用來表示該表單的唯壹名稱,方便壹個頁面建立多個表單而不混淆,當然更是為了接受頁面的確認關系。

參數action:顯而易見,是表示當前的表單中所有內容將送交某個頁面去處理。處理包括接受信息,數據庫比較,添加,修改等。

參數method:即表單的提交方法,含兩種方法:post和get。post是傳輸信息內容,get是傳輸url值,具體用法將會在下壹節“內置對象request”中介紹到

二,再來看Input相關

Input表示Form表單中的壹種輸入對象,其又隨Type類型的不同而分文本輸入框,密碼輸入框,單選/復選框,提交/重置按鈕等,下面壹壹介紹。

1,type=text

輸入類型是text,這是我們見的最多也是使用最多的,比如登陸輸入用戶名,註冊輸入電話號碼,電子郵件,家庭住址等等。當然這也是Input的默認類型。

參數name:同樣是表示的該文本輸入框名稱。

參數size:輸入框的長度大小。

參數maxlength:輸入框中允許輸入字符的最大數。

參數value:輸入框中的默認值

特殊參數readonly:表示該框中只能顯示,不能添加修改。

form

your name:

input type="text" name="yourname" size="30" maxlength="20" value="輸入框的長度為30,允許最大字符數為20"br

input type="text" name="yourname" size="30" maxlength="20" readonly value="妳只能讀不能修改"

/form

2,type=password

不用我說,壹看就明白的密碼輸入框,最大的區別就是當在此輸入框輸入信息時顯示為保密字符。

參數和“type=text”相類似。

form

your password:

input type="password" name="yourpwd" size="20" maxlength="15" value="123456"密碼長度小於15

/form

3,type=file

當妳在BBS上傳圖片,在EMAIL中上傳附件時壹定少不了的東西:)

提供了壹個文件目錄輸入的平臺,參數有name,size。

form

your file:

input type="file" name="yourfile" size="30"

/form

4,type=hidden

非常值得註意的壹個,通常稱為隱藏域:如果壹個非常重要的信息需要被提交到下壹頁,但又不能或者無法明示的時候。

壹句話,妳在頁面中是看不到hidden在哪裏。最有用的是hidden的值。

form name="form1"

your hidden info here:

input type="hidden" name="yourhiddeninfo" value=""

/form

script

alert("隱藏域的值是 "+document.form1.yourhiddeninfo.value)

/script

5,type=button

標準的壹windows風格的按鈕,當然要讓按鈕跳轉到某個頁面上還需要加入寫JavaScript代碼

form name="form1"

your button:

input type="button" name="yourhiddeninfo" value="Go,Go,Go!" onclick="window.open('

/form

6,type=checkbox

多選框,常見於註冊時選擇愛好、性格、等信息。參數有name,value及特別參數checked(表示默認選擇)

其實最重要的還是value值,提交到處理頁的也就是value。(附:name值可以不壹樣,但不推薦。)

form name="form1"

a:input type="checkbox" name="checkit" value="a" checkedbr

b:input type="checkbox" name="checkit" value="b"br

c:input type="checkbox" name="checkit" value="c"br

/form

name值可以不壹樣,但不推薦br

form name="form1"

a:input type="checkbox" name="checkit1" value="a" checkedbr

b:input type="checkbox" name="checkit2" value="b"br

c:input type="checkbox" name="checkit3" value="c"br

/form

7,type=radio

即單選框,出現在多選壹的頁面設定中。參數同樣有name,value及特別參數checked.

不同於checkbox的是,name值壹定要相同,否則就不能多選壹。當然提交到處理頁的也還是value值。

form name="form1"

a:input type="radio" name="checkit" value="a" checkedbr

b:input type="radio" name="checkit" value="b"br

c:input type="radio" name="checkit" value="c"br

/form

下面是name值不同的壹個例子,就不能實現多選壹的效果了br

form name="form1"

a:input type="radio" name="checkit1" value="a" checkedbr

b:input type="radio" name="checkit2" value="b"br

c:input type="radio" name="checkit3" value="c"br

/form

8,type=image

比較另類的壹個,自己看看效果吧,可以作為提交式圖片

form name="form1" action="xxx.asp"

your Imgsubmit:

input type="image" src="../blog/images/face4.gif"

/form

9,type=submit and type=reset

分別是“提交”和“重置”兩按鈕

submit主要功能是將Form中所有內容進行提交action頁處理,reset則起個快速清空所有填寫內容的功能。

form name="form1" action="xxx.asp"

input type="text" name="yourname"

input type="submit" value="提交"

input type="reset" value="重置"

/form

Input的Type總結下來有10個,還是不少的,呵呵

三,接著再來看Select相關

Select主要要來做下拉菜單,跳轉菜單,(下拉)列表。

其本身有內嵌代碼option.../option,option參數value值為傳遞被處理的值,option還有參數selected,表示默認被選中的。

1,下拉菜單

只是菜單式顯示。

form name="form1"

select name="selectwhat"

option value="a"aaa/option

option value="b"bbb/option

option value="c" selectedccc/option

/select

/form

script

alert("菜單的默認選取值是 "+document.form1.selectwhat.value)

/script

2,跳轉菜單

在下拉菜單基礎上添加JavaScript成為跳轉菜單。

select onChange="if(this.selectedIndex

this.selectedIndex!=0){window.open(this.value);}this.selectedIndex=0;"

option selected網站連接/option

option value="Webjx.Com'>

option value="Sina.com.cn'>

option value="163.com'>

/seclect

3,下拉列表

和下拉菜單最大的區別就是select多了壹個size值,該值並非長度大小,而是列表的上下高度。

當然還有更主要的是:菜單只能選壹個,而列表可以選多個,該特殊參數為multiple size=1簡直就是壹個下拉菜單

form name="form1"

select name="selectwhat" size=1

option value="a"aaa/option

option value="b"bbb/option

option value="c"ccc/option

/select

/formbr

size1妳會發現了大不同

form name="form1"

select name="selectwhat" size=3

option value="a"aaa/option

option value="b"bbb/option

option value="c"ccc/option

/select

/formbr

加入了multiple發現可以多個選擇了,包括Shift進行快速全選及Ctrl進行點選

form name="form1"

select name="selectwhat" size=3 multiple

option value="a"aaa/option

option value="b"bbb/option

option value="c"ccc/option

/select

/formbr

四,最後關註的Textarea

可以將Textarea文本區域理解為擴大化了的文本輸入框。

其參數沒有value,默認值設定在textarea.../textarea之間。

其它參數還有rows,表示文本區域的行數;參數cols,表示文本區域的列數。

還有參數warp,當warp=off表示該文本區域中的不自動換行,當然不寫默認是自動換行的。

form name="form1"

textarea name="textinit" rows="5" cols="20" wrap="off"5行20列,不自動換行/textarea

/form

  • 上一篇:c語言矩陣怎麽寫?
  • 下一篇:我的世界0.15.0世界邊界
  • copyright 2024編程學習大全網