這些常用技巧,往往是和事件以及腳本聯系在一起,本文注重功能,至于腳本,就不一一詳細分析。常見的技巧有:下拉跳轉菜單,表單內容的聚焦。
1.下拉跳轉菜單
在Dreamweaver中,可以很方便地建立基于表單的下拉菜單,為了兼顧非Dreamweaver用戶,這里講述一下這種技巧。
樣例22:基于表單的下拉跳轉菜單
分析:實際上,這里用到了一個函數,用于向選擇的地址跳轉,
<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.表單內容的聚焦
內容聚焦,常用在Copy&Paste類網站上,用的好的話,可以方便用戶。
樣例23:內容自動聚焦
分析: 上面分別使用了兩個事件,Email的是onFocus="this.value=''",自動選擇的是onMouseOver="this.select()"
3.去掉表格和表單間的空隙
樣例24:表格和表單的空隙處理
表格,我們常用來構架頁面,可是,表格里的表單總是和表格的內容有一個空隙,對照一下:
|
|
|
分析:為什么右邊沒有空隙呢,看看右邊的代碼就知道了。
<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>標簽放到<tr>和<td>中間,對應的</form>放在</td>和</tr>中間!
4.用Email提交表單(只適合Outlook用戶,不適合Foxmail用戶)
樣例25:Email提交表單
分析:看看我們的表單<form>標簽就知道了,格式如下:
<form name="..." action="mailto:xxxxx@xxx.xxx?Subject=表單反饋" enctype="text/plain" method="post">...</form>
這里的mailto:后面加上要接受信息的地址,?Subject是設置默認的Email標題,enctype="text/plain"是必要的,表示信息以文本方式提交,沒有任何加密,所以這種方法常用于沒有Asp/Php/cgi支持的空間,也只是一個代用的方法,用戶必須安裝Outlook,并且是默認的郵件程序,才能順利執行提交,據說TheBat!也可以,大家可以試驗一下。
