Javascript: 互動表單

阿瑟 發表



STEP1:【前言】
與表單的配合，可以做出一些效果，讓您的網站更有互動性。

STEP2:【原始碼】
這個是一個Select表單元件與Javascript配合做出的連結選單:
<Select onChange="location=this.options[this.selectedIndex].value">
<option value=".">酷必網</option>
<option value="http://www.study-area.org">STUDY-AREA</option>
</select>


阿得針對以上的原始碼簡單講解一下:

onChange，這是一個Event，當您修改該元件的時候會觸發。
location，連結的意思。
midi[index]，很簡單，也就是midi這個陣列是利用index裡面的數值來決定使用哪一個陣列。
this.options[this.selectedIndex].value，指的是這個Select選單選擇的值。


其實原理很簡單，當您改變的該Select選單的時候，他會觸發事件，然後連結到您所選擇的網站。

STEP3:【控制表單元件內容】
您可以試試看:
<form>
<input type=button value="hello" onclick="this.value='不hello';">
</form>
利用value=，您可以自由的利用Javascript控制現在網頁上已經有的表單元件，您甚至可以利用布林邏輯來判斷該欄位的內容是否符合要求，像是您在填寫申請表的時候，有的欄位您沒有填Javascript就會跳出視窗提醒您，value讓您可以做出這種功能。

一點要注意的就是，這個範例是控制自己的內容，阿得現在給您看看另外一個範例:
<form name=form1>
<input type=text value="hello" name=text1>
</form>
<a href="#" onclick="document.form1.text1.value='大家好'" target=_self>更換</a>


如果您想要控制另外一個表單的元件，您必須給予每一個元件一個名稱，然後利用名稱來控制內容。

STEP4:【關閉表單元件】
您可以試試看:
<form>
<input type=button value="hello" onclick="this.disabled=true;">
</form>
除了Disabled，您可以試試看其他如Checked和Selected等等其他的屬性，其他的部分阿得就不講解了，由您自己發揮囉。

STEP5:【結語】
如果光是用這些實用性不大，但是當您在設計表單的時候，這些功能可以輔助您的表單讓您的表單更有互動性。

最後更新日期: 12/17/2001 4:41:07 PM