JavaScript

   


表單 (Form)


表單及表單元件

這堜珓的表單是 <form> HTML 標記寫成的表單, 一個表單內可以有以下物件: Text, Checkbox, Radio, Textarea, Password, Hidden, Submit, Reset, Button, Select 及 Option 。

例子: 表單物件和表單內堛咱顗 HTML 標記

<form name="myform">

Name: <input type="text" name="thename"><br>
Sex:
<input type="radio" name="thesex" value="Male">Male
<input type="radio" name="thesex" value="Female">Female
<br>
Interests:
<br><input type="checkbox" name="intr_Sports">Sports
<br><input type="checkbox" name="intr_Music">Music
<br><input type="checkbox" name="intr_Computing">Computing
<br>
Finished Chapter: (You can select more than one option.)<br>
<select name="chapter" size="4" multiple>
  <option value="Basic Structure">Basic Structure</option>
  <option value="Object">Object</option>
  <option value="Variable">Variable</option>
</select>
<br>
<input type="submit">
<input type="reset">
<input type="button" name="dummy" value="button">

</form>

例子說明:

  • 還記得如何表示一個物件嗎? 就是用物件在 HTML 標記 name 屬性的內容。
物件    
Text HTML <input type="text" name="thename">
表示方法 document.myform.thename
Radio HTML <input type="radio" name="thesex" value="Male">
表示方法 document.myform.thesex
Checkbox HTML <input type="checkbox" name="intr_Sports">
表示方法 document.myform.intr_Sports
Select HTML <select name="chapter" size="7" multiple>
表示方法 document.myform.chapter
Option HTML <select name="chapter" size="7" multiple>
  <option value="Basic Structure">Basic Structure</option>
表示方法 document.myform.chapter.options[0]
Button HTML <input type="button" name="dummy" value="button">
表示方法 document.myform.dummy
  • document.myform.chapter.options[0]

    比較特別的就是 Option 物件, 這句的 options 其實是一個陣列, 而 options[0] 就是該個 Select 內的第一個 Option 物件了, 即是第一個選擇項, 它的值 (value) 是 Basic Structure 。

  • 這堨u介紹常用的表單物件, 因為其它物件和以上介紹的物件用法相近, 所以大家只要參閱 Netscape's JavaScript Reference 或本站的速查表就能知道其它物件的用法。

知道如何表示物件, 就可以運用它的方法、屬性和事件了。

 

Text

例子: Text 物件的方法、屬性和事件

<form name="myform">
Type anything you like:
<input type="text" name="typing"
onChange="alert(this.value) ; this.select()">
<input type="button" value="Click me to see what you have typed"
onClick="alert(this.form.typing.value)">
</form>

例子說明:

  • onChange=" ..."

    onChange 是 Text 物件的事件處理者, 當該欄內的文字被修改後, 就會即時執行雙引號括著的 JavaScript 敘述。

  • alert(this.value)

    alertwindow 物件的方法, 作用是彈出一個訊息柜。 this 是指 Text 物件, 因為它是寫在那個 Text 物件的 HTML 標記內, 所以 this.value 其實即是 document.myform.typing.value

  • this.select()

    同理, this.select() 其實即是 document.myform.typing.select()select() 是 Text 物件的方法, 作用是選取 typing 一欄內的的文字, 情形就好像大家用滑鼠來選取欄內的文字。

  • onClick=" ..."

    onClick 是 Button 物件的事件處理者, 當按下按鈕時, 就立即顯示 typing.value

  • this.form.typing.value

    這句的 this 是寫在 Button 物件的 HTML 標記內, 因此這個 this 就是指 Button 。 其實每個表單內的元件都有 form 屬性, 用來表示該元件所身處的表單。 那麼 this.form 就是指那個 Button 所身處的表單, 即是指 myform, 而 this.form.typing.value 就是指 document.myform.typing.value

 

Radio 和 Checkbox

例子: 運用 Radio 的方法、屬性和事件

<html><head>
<script>
<!--
function show(theform) {
var sex_len = theform.sex.length;
for (var i = 0 ; i < sex_len ; i++) {
 if (theform.sex[i].checked) {
  alert(theform.sex[i].value);
 }
}
}
//-->
</script>
</head><body>
<form name="myform">
Sex: <br>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type="radio" name="sex" value="secret">I won't tell you :) <br>
<input type="button" onclick="show(this.form)" value="Click me to see the result">
<input type="button" onclick="this.form.sex[2].click()" value="I won't tell you">
</form>
</body></html>

說明:

  • sex[i]

    當你有大量 Radio 物件時, 你可以用把它們的 Name 屬性指定同一個值, 這就可以把這個值當做陣列來表示它們了。 注意: 如果只有一個 Radio 物件就不能這樣做。

例子: 運用 Checkbox 的方法、屬性和事件

<html><head>
<script>
<!--
function show(theform) {
var interest_len = theform.interest.length;
var intr = ""
for (var i = 0 ; i < interest_len ; i++) {
  if (theform.interest[i].checked) {
   intr += theform.interest[i].value + " "
  }
}
if (intr == "") {
  alert("You have no interest?")
}
else {
  alert("Your interest(s) : " + intr)
}
}
//-->
</script>
</head><body>
<form name="myform">
Sex: <br>
<input type="checkbox" name="interest" value="Computing">Computing<br>
<input type="checkbox" name="interest" value="Music">Music<br>
<input type="checkbox" name="interest" value="Sports">Sports<br>
<input type="button" onclick="show(this.form)" value="Click me to see the result">
<input type="button" onclick="this.form.interest[2].checked = true" value="I like sports">
<input type="button" onclick="this.form.interest[2].click()" value="Toggle Sports checkbox">
</form>
</body></html>

說明:

  • interest[i]

    Checkbox 和 Radio 一樣, 都可以把它們的 Name 屬性當作陣列。

Select 和 Option

例子: 運用 Select 和 Option 物件的方法、屬性和事件

<html><head>
<script>
<!--
function show(selection) {
var select_len = selection.length;
var opt = '';
for (var i = 0 ; i < select_len ; i++) {
  if (selection.options[i].selected) {
   opt += i + ' : ' + selection.options[i].value + ' ; ' ;
  }
 }
 window.status = "Selected option : " + opt;
}
//-->
</script>
</head><body>
<form name="myform">
Finished Chapter: (You can select more than one option)
<br>
<select name="chapter" size="4" multiple
onChange="show(this)">
  <option value="Basic Structure">Basic Structure</option>
  <option value="Object">Object</option>
  <option value="Variable">Variable</option>
</select>
</form>
</body></html>

例子說明:

  • onChange="show(this)"

    onChange 是 Select 物件的事件處理者, 當該欄內的選項被改變後, 就會即時執行 show 函數, 而參數就是 this 。 這個 this 是寫在 <select> 範圍內, 所以 this 就是指該 Select 物件。 this 傳入到 selection 變數, 因此 selection 也變成該 Select 物件了。

  • selection.length

    length 是 Select 物件的屬性, 表示該 <select> 範圍內有多少個 <option>, 這埵 3 個 <option> , 因此它的值就是 3 了。

  • selection.options[i].selected

    options[i] 是 Select 物件內的 Option 物件, 緊記 options[0] 表示第 1 個 Option 物件, options[2] 就表示第 3 個物件, 因此用 for 迴圈將 i = 0,1,2 。 selected 是 Option 物件的屬性, 如果那個 Option 被選取了, 就傳回 true , 否則傳回 false。 每一次迴圈都檢查這個屬性是否 true , 決定是否把那個 Option 的 value 加入 opt 字串變數, 最後 opt 的內容會顯示到狀態列。

elements 陣列

以上的例子都用了物件的名稱來表示表單內的物件, 但我們也可以用另一種方法表示方式, 就是用表單物件的 elements[ ] 陣列。

例子: 用 elements[ ] 陣列表示表單內的物件

<html><head>
<script>
<!--
function show(thisform) {
var form_len = thisform.length;
var out_string = 'There are ' + form_len + ' elements.'
var form_elem;
for (var i = 0 ; i < form_len ; i++) {
  form_elem = thisform.elements[i];
  out_string += '<br> elements[' + i + '] : ';
  out_string += ' type = ' + form_elem.type + ' ; ';
  out_string += ' name = ' + form_elem.name + ' ; ';
  out_string += ' value = ' + form_elem.value + ' ; ';
}
 document.write(out_string);
}
//-->
</script>
</head><body>

<form name="myform" onSubmit="show(this);return false">
The followings are the elements of myform
<br>
Name: <input type="text" name="thename">
<br>
<input type="radio" name="thesex" value="Male">Male
<input type="radio" name="thesex" value="Female">Female
<br>
Interests:
<br><input type="checkbox" name="intr_Sports">Sports
<br><input type="checkbox" name="intr_Music">Music
<br>
Multiple option allowed:
<br>
<select name="chapter" size="4" multiple>
  <option value="Basic Structure">Basic Structure</option>
  <option value="Object">Object</option>
  <option value="Variable">Variable</option>
</select>
<br>
Only one option allowed:
<select name="chapter" size="1">
  <option value="High School">High School</option>
  <option value="College">College</option>
</select>
<br>
<input type="submit">
<input type="reset">
<input type="button">
</form>
</body></html>

例子說明:

  • form_elem = thisform.elements[i]

    指定 form_elem 為物件型態變數, 表示表單內的各個物件。

 

 

檢查表單

例子: 檢查表單內的 Text 和 Radio 物件 form_validate.htm

例子說明:

  • 本例子會檢查兩樣錯誤: 漏填姓名和漏選姓別
  • onSubmit="return checkform(this)"

    onSubmit 是 Form 的事件處理者, 當瀏覽者確定送出表單, 就會執行 return checkform(this)。  checkform 函數會檢查兩樣錯誤, 如果有錯, checkform 函數就傳回 false , 那就變成 onSumit="return false" , 這樣就會終止瀏覽器送出表單。 如果沒有錯, 就應該傳回 true , 然後瀏覽器就會送出表單。 不過這個例子只會顯示表單結果, 如果你要用它來送出表單, 請在原始碼填入表單的 action 屬性, 並且刪除 reportform 函數和有關部份。

 







[到頁頂] [首頁] [速查表]