DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver入門 >> 網頁制作中常用的網頁表單的應用
網頁制作中常用的網頁表單的應用
編輯:Dreamweaver入門     

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

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

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

  <form name="form1" action="xxx.asp" method="post">
<input type="text" name="yourname">
<select name="selectwhat">
 <option>aaa</option>
 <option>aaa</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="webjx.com">
</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('http://www.webjx.com')">
</form>

  6,type=checkbox

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

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

  <form name="form1">
a:<input type="checkbox" name="checkit" value="a" checked><br>
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" checked><br>
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" checked><br>
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" checked><br>
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" selected>ccc</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.Comhttp://www.webjx.com/">Webjx.Com</option>
<option value="Sina.com.cnhttp://www.sina.com.cn/">Sina.com.cn</option>
<option value="163.comhttp://www.163.com/">163.com</option>
</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>
</form><br>
size>1你會發現了大不同
<form name="form1">
<select name="selectwhat" size=3>
 <option value="a">aaa</option>
 <option value="b">bbb</option>
 <option value="c">ccc</option>
</select>
</form><br>
加入了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>
</form><br>

  四,最後關注的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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved