[點(diǎn)晴永久免費(fèi)OA]WEB編程入門進(jìn)階：認(rèn)識表單
無論是asp、.net、php還是jsp進(jìn)行WEB網(wǎng)絡(luò)編程的時(shí)候，都離不開和用戶的交互。而人機(jī)對話的平臺，基本上是靠相應(yīng)的文本、列表框進(jìn)行輸入，然后通過按鈕提交送至數(shù)據(jù)庫的。所以學(xué)習(xí)網(wǎng)絡(luò)編程就一定要了解這些輸入平臺相關(guān)的東西：表單（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>
可以總結(jié)出：表單即包括<form>...</form>之內(nèi)的相關(guān)內(nèi)容。
其中內(nèi)部可以分三大類：input，select，textarea。
一，首先看<form>內(nèi)部參數(shù)
參數(shù)name：用來表示該表單的唯一名稱，方便一個(gè)頁面建立多個(gè)表單而不混淆，當(dāng)然更是為了接受頁面的確認(rèn)關(guān)系。
參數(shù)action：顯而易見，是表示當(dāng)前的表單中所有內(nèi)容將送交某個(gè)頁面去處理。處理包括接受信息，數(shù)據(jù)庫比較，添加，修改等。
參數(shù)method：即表單的提交方法，含兩種方法：post和get。post是傳輸信息內(nèi)容，get是傳輸url值，具體用法將會在下一節(jié)“內(nèi)置對象request”中介紹到。
二，再來看Input相關(guān)
Input表示Form表單中的一種輸入對象，其又隨Type類型的不同而分文本輸入框，密碼輸入框，單選/復(fù)選框，提交/重置按鈕等，下面一一介紹。
1，type=text
輸入類型是text，這是我們見的最多也是使用最多的，比如登陸輸入用戶名，注冊輸入電話號碼，電子郵件，家庭住址等等。當(dāng)然這也是Input的默認(rèn)類型。
參數(shù)name：同樣是表示的該文本輸入框名稱。
參數(shù)size：輸入框的長度大小。
參數(shù)maxlength：輸入框中允許輸入字符的最大數(shù)。
參數(shù)value：輸入框中的默認(rèn)值
特殊參數(shù)readonly：表示該框中只能顯示，不能添加修改。
<form>
your name:
<input type="text" name="yourname" size="30" maxlength="20" value="輸入框的長度為30，允許最大字符數(shù)為20"><br>
<input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能讀不能修改">
</form>
2，type=password
不用我說，一看就明白的密碼輸入框，最大的區(qū)別就是當(dāng)在此輸入框輸入信息時(shí)顯示為保密字符。
參數(shù)和“type=text”相類似。
<form>
your password:
<input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密碼長度小于15
</form>
3，type=file
當(dāng)你在BBS上傳圖片，在EMAIL中上傳附件時(shí)一定少不了的東西：）
提供了一個(gè)文件目錄輸入的平臺，參數(shù)有name，size。
<form>
your file:
<input type="file" name="yourfile" size="30">
</form>
4，type=hidden
非常值得注意的一個(gè)，通常稱為隱藏域：如果一個(gè)非常重要的信息需要被提交到下一頁，但又不能或者無法明示的時(shí)候。
一句話，你在頁面中是看不到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
標(biāo)準(zhǔn)的一windows風(fēng)格的按鈕，當(dāng)然要讓按鈕跳轉(zhuǎn)到某個(gè)頁面上還需要加入寫Javascript代碼
<form name="form1">
your button:
<input type="button" name="yourhiddeninfo" value="Go，Go，Go！" onclick="window.open('http://www.gxlsystem.com')">
</form>
6，type=checkbox
多選框，常見于注冊時(shí)選擇愛好、性格、等信息。參數(shù)有name,value及特別參數(shù)checked（表示默認(rèn)選擇）
其實(shí)最重要的還是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值可以不一樣，但不推薦
<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
即單選框，出現(xiàn)在多選一的頁面設(shè)定中。參數(shù)同樣有name,value及特別參數(shù)checked.
不同于checkbox的是，name值一定要相同，否則就不能多選一。當(dāng)然提交到處理頁的也還是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值不同的一個(gè)例子，就不能實(shí)現(xiàn)多選一的效果了<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
比較另類的一個(gè)，自己看看效果吧，可以作為提交式圖片
<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中所有內(nèi)容進(jìn)行提交action頁處理，reset則起個(gè)快速清空所有填寫內(nèi)容的功能。
<form name="form1" action="xxx.asp">
<input type="text" name="yourname">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
Input的Type總結(jié)下來有10個(gè)，還是不少的，呵呵。
三，接著再來看select相關(guān)
select主要要來做下拉菜單，跳轉(zhuǎn)菜單，（下拉）列表。
其本身有內(nèi)嵌代碼<option>...</option>，option參數(shù)value值為傳遞被處理的值，option還有參數(shù)selected，表示默認(rèn)被選中的。
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("菜單的默認(rèn)選取值是 "+document.form1.selectwhat.value);
</script>
2，跳轉(zhuǎn)菜單
在下拉菜單基礎(chǔ)上添加Javascript成為跳轉(zhuǎn)菜單。
<select onChange="if(this.selectedIndex && this.selectedIndex!=0){window.open(this.value);}this.selectedIndex=0;">
<option selected>網(wǎng)站連接……</option>
<option value="http://www.gxlsystem.com/">Cn-Bruce</option>
<option value="http://www.gxlsystem.com/">Blue!dea</option>
<option value="http://www.gxlsystem.com/">It365cn</option>
</seclect>
3，下拉列表
和下拉菜單最大的區(qū)別就是select多了一個(gè)size值，該值并非長度大小，而是列表的上下高度。
當(dāng)然還有更主要的是：菜單只能選一個(gè)，而列表可以選多個(gè)，該特殊參數(shù)為multiple
size=1，簡直就是一個(gè)下拉菜單：
<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>
size>1，你會發(fā)現(xiàn)了大不同：
<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>
加入了multiple，發(fā)現(xiàn)可以多個(gè)選擇了，包括Shift進(jìn)行快速全選及Ctrl進(jìn)行點(diǎn)選：
<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>
四，最后關(guān)注的Textarea
可以將Textarea文本區(qū)域理解為擴(kuò)大化了的文本輸入框。
其參數(shù)沒有value，默認(rèn)值設(shè)定在<textarea>...</textarea>之間。
其它參數(shù)還有rows,表示文本區(qū)域的行數(shù)；參數(shù)cols，表示文本區(qū)域的列數(shù)。
還有參數(shù)warp，當(dāng)warp=off表示該文本區(qū)域中的不自動換行，當(dāng)然不寫默認(rèn)是自動換行的。
<form name="form1">
<textarea name="textinit" rows="5" cols="20" wrap="off">5行20列，不自動換行</textarea>
</form>
最后總結(jié)：input根據(jù)type分10類，select從option處又分菜單和列表，textarea有行有列的文本輸入?yún)^(qū)域。
該文章在 2022/6/21 9:00:46 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
