四、表單的常用技巧
這些常用技巧，往往是和事件以及腳本聯(lián)系在一起，本文注重功能，至于腳本，就不一一詳細(xì)分析。常見的技巧有：下拉跳轉(zhuǎn)菜單，表單內(nèi)容的聚焦。
1．下拉跳轉(zhuǎn)菜單
在Dreamweaver中，可以很方便地建立基于表單的下拉菜單，為了兼顧非Dreamweaver用戶，這里講述一下這種技巧。
樣例22：基于表單的下拉跳轉(zhuǎn)菜單
分析：實際上，這里用到了一個函數(shù)，用于向選擇的地址跳轉(zhuǎn)，
＜script language="JavaScript"＞
function FormMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
＜/script＞
然后，給下拉選擇框賦予一個事件onChange="FormMenu('parent',this,0)"，就可以了。
2．表單內(nèi)容的聚焦
內(nèi)容聚焦，常用在Copy&Paste類網(wǎng)站上，用的好的話，可以方便用戶。
樣例23：內(nèi)容自動聚焦
分析： 上面分別使用了兩個事件，Email的是onFocus="this.value=''"，自動選擇的是onMouseOver="this.select()"
3．去掉表格和表單間的空隙
樣例24：表格和表單的空隙處理
表格，我們常用來構(gòu)架頁面，可是，表格里的表單總是和表格的內(nèi)容有一個空隙，對照一下：
分析：為什么右邊沒有空隙呢，看看右邊的代碼就知道了。
＜table width="100%" border="1" cellspacing="1" cellpadding="1"＞
＜tr＞
＜form name="form3" method="post" action=""＞
＜td＞ ＜input type="text" name="textfield2"＞＜br＞
＜input type="submit" name="Submit22" value="Submit"＞
這里沒有空隙 ＜/td＞
＜/form＞
＜/tr＞
＜/table＞
也就是說，把＜form＞標(biāo)簽放到＜tr＞和＜td＞中間，對應(yīng)的＜/form＞放在＜/td＞和＜/tr＞中間！
4．用Email提交表單(只適合Outlook用戶，不適合Foxmail用戶)
樣例25：Email提交表單
分析：看看我們的表單＜form＞標(biāo)簽就知道了，格式如下：
＜form name="..." action="mailto:xxxxx@xxx.xxx?Subject=表單反饋" enctype="text/plain" method="post"＞...＜/form＞
這里的mailto:后面加上要接受信息的地址，?Subject是設(shè)置默認(rèn)的Email標(biāo)題，enctype="text/plain"是必要的，表示信息以文本方式提交，沒有任何加密，所以這種方法常用于沒有Asp/Php/cgi支持的空間，也只是一個代用的方法，用戶必須安裝Outlook，并且是默認(rèn)的郵件程序，才能順利執(zhí)行提交，據(jù)說TheBat!也可以，大家可以試驗一下。
出處：藍(lán)色理想
責(zé)任編輯：無意
上一頁 表單提交 下一頁
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 4 頁 常用技巧
