轉：ASP編程入門進階（二）：認識表單

ASP編程入門進階（二）：認識表單

無論是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="cnbruce.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.cnbruce.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>

　　三.接著再來看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="http://www.cnbruce.com/">Cn-Bruce</option>
<option  value="http://www.blueidea.com/">Blue!dea</option>
<option  value="http://www.it365cn.com/">It365cn</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>

　　最後總結：input根據type分10類，select從option處又分菜單和列表，textarea有行有列的文本輸入地區。

友情提供:ASP編程入門進階（一）是有關伺服器的配置，沒有轉過來，如果有誰有興趣可以看這裡