JavaScript 與表單

HTML <form> 元素表示提交訊息的區塊，此區塊含有許多可互動的控制項。
表單使用表單標籤<form> 來設置: 
<form>
.
input 元素
.
</form>

表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。

詳見表單輸入元素

當用戶單擊提交(submit)按鈕時，使用表單輸入的資料，在後端使用 php，cgi 或 servlet 等程式處理，結果呈現在前端的網頁。 表單的動作屬性 action 定義了目的程式的名稱。

範例: envvar.htm 

<form> action="http://www.csie.ntu.edu.tw/~sylee/cgi-bin/envvar.cgi" METHOD=POST>
<input type="text" Name="text_string">
<p>
<input type="text" Name="Second_string">
<p>
<input type="submit">
</form>

表單範例: form-c.htm

存取表單

使用 Form 陣列

<script language="JavaScript">
<!--
    document.forms[0];

    document.forms[1];
//-->
</script>

屬性值

<html>
<body>

<form>
Name: <input type="text"><BR>
Email: <input type="text"><BR>
<input type="submit" value="Submit"><BR>
<input type="reset" value="Reset">
</form>

<script language="JavaScript">
<!--
    document.write("The form has " + document.forms[0].length + " elements.");
//-->
</script>

</body>
</html>
範例: form1.htm

包含二個 length 屬性

<html>
<body>
<form>
<b>Form 1</b><BR>
Name: <input type="text"><BR>
Email: <input type="text"><BR>
<input type="submit" value="Submit">
</form>

<b>Form 2</b><BR>
<form>
Favorite Color: <input type="text"><BR>
Favorite Food: <input type="text"><BR>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<HR>
<P>
<script language="JavaScript">
<!--
    for (count=0;count<document.forms.length;count+=1)
    {
        var formnum = count+1;
        document.write("Form " + formnum + " has " + document.forms[count].length);
        document.write(" elements.<BR>");
    }
//-->
</script>
</body>
</html>
範例: forms.htm

使用表單名字

<html>
<body>
<form name="info_form">
<b>Info Form</b>
Name: <input type="text"><BR>
<input type="submit" value="Submit">
</form>

<P>
<script language="JavaScript">
<!--
        document.write("The form has " + document."info_form".length + " elements.");
//-->
</script>
</body>
</html>

Form 物件的屬性與方法

Form 物件的屬性

action 屬性 <form> 標籤中 action 屬性的值
elements 屬性 包含表單中所有元件的陣列
encoding 屬性 <form> 標籤中 encoding 屬性的值
length 屬性 表單中元件的個數
method 屬性 <form> 標籤中 method 屬性的值
name 屬性 <form> 標籤中 name 屬性的值
target 屬性 <form> 標籤中 target 屬性的值

action 屬性

<html>
<body>
<h3>上傳檔案</h3>

<form name="info_form" action="http://www.csie.ntu.edu.tw/~sylee/servlet/parserupload" METHOD=POST ENCTYPE="multipart/form-data">
  姓名 <input type=text name=submitter> <BR>
  學號 <input type=text name=id> <BR><BR>
  <input type=submit value="上傳">
</form>

<P>
<script language="JavaScript">
<!--
        document.write("The form goes to " + document.info_form.action);
//-->
</script>
</body>
</html>

elements 屬性(陣列)

elements 屬性是一個陣列, 包含表單中每一元件。

表單元件常用的屬性和方法

checked 屬性

在核取方塊和選項按鈕才會用到。 
<html>
<head>
<script language="JavaScript">
<!--
    function is_it_checked()
    {
        if (document.info_form.yes_no.checked)
            window.alert("Yes, The box is checked!");
        else
            window.alert("No, The box is not checked!");
//-->
</script>
</head>

<html>
<form name="info_form">
核取方塊 to say yes: <input type="checkbox" name="yes_no" >
<P>
<input type="button" value="See the Answer" onClick="is_it_checked()">
</form>

</html>

看效果

使用核取方塊做複項選擇: 

<html>
<head>
<title>Form Example</title>
<link rel="stylesheet" type="text/css" href="../stdtheme.css" />
<script>
function myFunction() {
  var languges = document.f1.languge;
  var langstr="<b>勾選的外國語言有: ";
  var i;
  for (i = 0; i < languges.length; i++) {
    if ( languges[i].checked) {
       langstr+="<br> "+languges[i].value;  }
  }
  document.getElementById("demo").innerHTML= langstr + "</b>" ;}
</script>
</head>
<body bgcolor="#EFFFEF">
<h2>Check boxes</h2>

<form name="f1">
 學過的外國語言有:
<input type="checkbox" name="languge"   value="英語" />英語
<input type="checkbox" name="languge"   value="日語" />日語
<input type="checkbox" name="languge"   value="法語" />法語
<input type="checkbox" name="languge"   value="德語" />德語
<input type="checkbox" name="languge"   value="俄語" />俄語
<input type="checkbox" name="languge"   value="西班牙語" />西班牙語<br />
<input type="button" onclick="myFunction()" value="Go!">
</form>
<p id="demo"></p>

</body>
</html>

看效果

defaultChecked 屬性

由核取方塊和選項按鈕的checked 屬性所決定。 
<html>
<head>
<script language="JavaScript">
<!--
    function is_it_checked()
    {
        if (document.info_form.yes_no.defaultChecked)
            window.alert("Yes, The box was checked by default!");
        else
            window.alert("No, The box was not checked by default!");
    }
//-->
</script>
</head>

<body>
<form name="info_form">
核取方塊 <input type="checkbox" name="yes_no" checked>
<p>
<input type="button" value="See the Answer" onClick="is_it_checked()">
</form>

</body>
</html>

看效果

defaultValue 屬性

其值為文字方塊和文字區域的預設值。 
<html>
<head>
<script language="JavaScript">
<!--
    function back_to_default()
    {
        document.info_form.favurl.value =
            document.info_form.favurl.defaultValue;
    }
//-->
</script>
</head>

<body>
<form name="info_form">
核取方塊 <input type="checkbox" name="yes_no" checked>
<P>
<input type="button" value="See the Answer" onClick="is_it_checked()">
</form>

</body>
</html>

form 屬性

在一元件中用來參考該元件上層的表單。

name 屬性

用來存放一元件的 name 值。 
<html>
<body>
<form name="info_form">
<b>Info Form</b>
Name: <input type="text" name="yourname"><BR>
<input type="submit">
</form>

<P>
<script language="JavaScript">
<!--
        document.write("The first element is " + document.info_form.element[0].name");
//-->
</scripT>
</body>
</html>

options 屬性(陣列)

是一個陣列, 包含表單中選擇方塊的每一選項。

selectedIndex 屬性

用來存放使用者選擇選項的索引值。 
<html>
<body>
<h2>下拉選單:單選</h2>
<form name="f1">
<b>Fruits:</b>
       <select name="s1">
           <option selected value="orange">Orange</option>
           <option value="apple">Apple</option>
           <option value="pear">Pear</option>
       </select>
<input type="button" name="go" value="Go!" onClick="myFunction()">
</form>
Selected:
<p id="demo"></p>

<P>
<script language="JavaScript">
<!--
function myFunction() {
  document.getElementById("demo").innerHTML =
        document.f1.s1.options[document.f1.s1.selectedIndex].value;
}
//-->
</script>

</body>
</html>

看效果

下拉選單:複選

Use the multiple attribute to allow the user to select more than one value.

<html>
<body>
<h2>下拉選單:複選</h2>

<p>Use the multiple attribute to allow the user to select more than one value.</p>

<form name="f1">
<b>Fruits:</b><p>
       <select name="s1"  multiple>
           <option selected value="orange">Orange</option>
           <option value="apple">Apple</option>
           <option value="pear">Pear</option>
       </select>
  <p>
  <input type="button" onclick="myFunction()" value="Go!">
</form>
<p id="demo"></p>

<script>
function myFunction() {
  var fruits = document.f1.s1.options;
  var frtstr="Fruits selected : ";
  var i;
  for (i = 0; i < fruits.length; i++) {
    if (fruits[i].selected) {
       frtstr+="<br> "+fruits[i].value;    }
  }
  document.getElementById("demo").innerHTML =frtstr.fontcolor("blue");
}
</script>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
</body>
</html>

看效果

type 屬性

表示每個表單元件的形態。

value 屬性

存放一元件目前的值。 
<html>
<head>
<script language="JavaScript">
<!--
    function food_alert()
    {
        window.alert("You actually like " + document.info_form.fav_food.value + "?");
    }
//-->
</script>
</head>
<body>
<form name="info_form">
<b>Info Form</b>
Your favorite food: <input type="text" name="fav_food">
<p>
<input type="button" value="Submit" onClick="food_alert()";>
</P>
</form>

</body>
</html>

看效果

blur()失焦方法

<html>
<body>
<form name="info_form">
<h2>Info Form</h2>
Your favorite food: <input type="text" name="fav_food" value="Pizza"
     onFocus="this.form.fav_food.blur();">
</form>
</body>
</html>

看效果

click()點擊方法

<html>
<body>
<form name="info_form">
<h2>Info Form</h2>
Your favorite food: <input type="text" name="fav_food"
     onBlur="this.form.annoy.click()";><br>
Drink <input type="text" >
<p>
<input type="reset" name="annoy" value="Reset Form">
</form>
</body>
</html>

看效果

focus()聚焦方法

<html>
<body>
<form name="info_form" onLoad="this.form.fav_food.focus();">
<h2>Info Form</h2>
Your favorite food: <input type="text" name="fav_food"
     onBlur="this.form.annoy.click();"><br>
Drink <input type="text" >
</form>
</body>
</html>

看效果

select()方法

<html>
<body>
<form name="info_form">
<h2>Text area</h2><BR>留言:
<textarea name="message" rows=4 cols=50
          onFocus="this.form.message.select();">
This text is the default text for the text area and is selected
when the text area is given focus by the viewer.
</textarea>
</form>
</body>
</html>

看效果

encoding 屬性

length 屬性

method 屬性

<form name="info_form" METHOD="POST" ACTION="/servlets/FormServletc">
</form>
<script language="JavaScript">
<!--
    window.alert("The form uses method " + document.info_form.method);
//-->
</script>

name 屬性

<form name="info_form" METHOD="POST" ACTION="/servlets/FormServletc">
</form>
<script language="JavaScript">
<!--
    window.alert("The form has a name " + document.info_form.name);
//-->
</script>

target 屬性

<form name="info_form" target="place" METHOD="POST" ACTION="/servlets/FormServletc">
</form>
<script language="JavaScript">
<!--
    window.alert("The form has a name " + document.info_form.target);
//-->
</script>

方法

reset()重設方法

<html>
<body>
<form name="info_form">
Your Favorite Food
<input type="text" name="fav_food"
        onBlur="this.form.reset();"><BR>
Drink <input type="text">
<P>
<input type="submit" value="Submit">&nbsp;
<input type="reset" value="Reset Form">
</form>
</body>
</html>

submit()提交方法

<HTML>
<BODY>
<form name="info_form" METHOD="POST" ACTION="/servlets/FormServletc">
<B>Text</B><BR>姓名:
       <input type="text" size=20 name="name"
        onBlur="this.form.submit();"><BR>
<P>
<input type="submit" value="Submit Form">
</form>
</BODY>
</HTML>

表單驗證（Form Validation）

在網際網路上，表單是和使用者互動的最常用方式。 但使用者填入的資料可能不符合要求。 一個簡單的解決方案就是在客戶端以 JavaScript 來對表單的輸入進行驗證的工作， 以確保表單數據在送至伺服器前都是正確無誤。

表單驗證可用 JavaScript 的各種字串與數值的函式來達成， 並配合滑鼠事件，在適當的時機來提醒使用者可能發生的錯誤。

表單數據經常需要使用JavaScript 來驗證其正確性：

自動驗證

<html>
<body>

<h2>JavaScript Validation</h2>

<form >
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>

</body>
</html>

看效果

onSubmit 和 return 敘述

當使用者接下確認鍵時, 會產生一個 submit 事件。 這可用 <FORM>中的 onSubmit 事件處理器抓到。 
<html>
<head>
<script language="JavaScript">
<!--
function checkName()
{
    var thename=document.uploadform.name.value;
        if (thename == "") {
                alert( "請輸入大名！");
                return (false);
        } else {
                document.getElementById("demo").innerHTML =	 "你的名字: " + thename;
                return (true);
        }
}
//-->
</script>
</head>

<body>

<form name="uploadform" action="/servlet/formServletc" method=post onSubmit="return checkName();">
  姓名 <input type=text name="name"> <br>
  <input TYPE=SUBMIT>
  <input TYPE=reset>
</form>
<p id="demo"></p>
</body>
</html>
JavaScript 可用來在數據被送往服務器前對HTML 表單中的這些輸入數據進行驗證。

ckname.html

技巧

<html>
<head>
<script language="JavaScript">
<!--
function checkEm()
{
    var Email_addr=document.uploadform.em.value;
        if ( (Email_addr.indexOf("@") == -1) || (Email_addr.indexOf(".") == -1) )
        {
                alert( "請輸入正確的 Email 位址！");
                return (false);
        } else {
                return (true);
        }
}
//-->
</script>
</head>

<body>

<form name="uploadform" method=post onSubmit="return checkEm();">
  Email <input type=text name="em"> <br>
  <input TYPE=SUBMIT>
  <input TYPE=reset>
</form>
</body>
</html>

看效果

可供瀏覽的表單

用選擇方塊瀏覽

用按鈕

<FORM name="f1">
       <select name="s1">
           <option selected value="../event.htm">事件</option>
           <option value="../doc.htm">文件</option>
           <option value="../win.htm">視窗</option>
       </select>
<INPUT TYPE="button" name="go" value="Go!" onClick ="window.location=
        document.f1.s1.options[document.f1.s1.selectedIndex].value;">
</FORM>

看效果

不用按鈕

<FORM name="f1">
       <select name="s1" onChange="window.location=
                document.f1.s1.options[document.f1.s1.selectedIndex].value;">
           <option selected value="../event.htm">事件</option>
           <option value="../doc.htm">文件</option>
           <option value="../win.htm""win.htm">視窗</option>
       </select>
</FORM>

看效果

用選項按鈕瀏覽

<p>你要看那頁?</p>

<form>
  <input type="radio" name="loc" value="../event.htm">事件<br>
  <input type="radio" name="loc" value="../doc.htm">文件<br>
  <input type="radio" name="loc" value="../win.htm">視窗<br>
  <br>
  <input type="button" onclick="myFunction()" value="Go!">
 </form>

<script language="JavaScript">
<!--
function myFunction() {
  var loc = document.forms[0];
  var i;
  for (i = 0; i < loc.length; i++) {
    if (loc[i].checked) {
       window.location=loc[i].value;    }
  }
}
//-->
</script>
看效果

pr14_2.html