您剛才已經(jīng)看到，顯示短一些的表單可以使那些不需要回答所有問題的人們?nèi)兆雍眠^一些。但是，對于那些的確需要回答很長的問題列表中的每一個問題的人們，又該如何呢？同樣地，您也可以讓他們愉快一些。

使長的問題列表變得更加“美味”的一個方法是把一個表單變成幾個頁面，就象軟件應(yīng)用程序中常見的向?qū)С绦蚰菢?。這種方法對訪問者在特定時刻能夠看見的問題數(shù)目加以限制，減少了用戶因為恐懼而跑掉的可能性。同時，有人一旦經(jīng)過了一個頁面，或者回答了兩個問題，就很可能填完所有信息。

很多網(wǎng)站把長的表單分成若干小的部分，而把每個部分都提交給運行在web服務(wù)器上的一個CGI腳本。絕大部分的電子商務(wù)網(wǎng)站把訂購的表單至少分成三個表單：一個確認購買，一個收集送貨信息，還有一個用來填寫付帳信息。在第一個表單被提交之后，表單中的信息就被發(fā)送到web服務(wù)器上，服務(wù)器上的程序就把這些信息存儲起來，并顯示第二個表單。

這種方法就一個好處，就是逐步存儲信息。舉例來說，如果您正在做一個調(diào)查，則這種方法意味著即使訪問者進行到一半就停止表單的填寫，您仍然可以得到一些信息。這種方法的缺點是表單的每個部分都要獨立地在客戶和服務(wù)器之間來回傳遞。如果連接是慢速的，則意味著可能會因為響應(yīng)緩慢而丟失訪問者。這種方法也假定您對web服務(wù)器上的腳本引擎有訪問權(quán)限，并且您知道如何書寫服務(wù)器端的腳本。

另外一個比較不經(jīng)常用的方法是用DHTML來顯示表單的不同部分。把每個子表單放入她自己的DIV中，在開始的時候顯示第一個DIV上的子表單，然后當訪問者填完了這一部分內(nèi)容后，用JavaScript把第一個DIV隱藏起來，然后顯示第二個DIV。這種方法把表單分割成若干小塊，節(jié)省了和服務(wù)器來回傳遞的時間，并且不要求訪問服務(wù)器端的腳本。您可以在DHTML向?qū)?/A>中查看這個例子是如何工作的，然后再看一下這個向?qū)С绦虻脑创a，看看代碼中涉及到什么技術(shù)。

向?qū)С绦虻墓ぷ鳈C制

在向?qū)С绦虻拇a中有一些有趣的地方。首先，讓我們看一下第二個DIV的稍微縮短過的版本：

<div id="part2" style="position:absolute;top:150px;left:50px;visibility:hidden;">
<form name="pet_info">
<table>
<tr><td>Your pet‘s name:</td>
    <td><input name="petname" type="text"></td></tr>

</table> 

<input type="button" value="prev"
  	onClick="switchDiv(‘part2‘, ‘part1‘);">

<input type="button" value="next" 
	onClick="switchIfDone(this.form, ‘part2‘, ‘part3‘);">
</form>
</div>

這里也有一些要點值得一提。和以前一樣，DIV有一個id，它使得JavaScript可以根據(jù)需要隱藏和顯示DIV。這個DIV也有風(fēng)格信息，用來定位DIV，并在頁面首次裝載時將之隱藏。

在DIV中存在一個含有一系列問題輸入域的表單。請注意，表單有一個名字，每個問題輸入域也都有一個名字。腳本程序在后面會根據(jù)這些名字從表單的不同部分收集數(shù)據(jù)。

除了這些問題域之外，在表單的尾部有兩個按鍵。第一個按鍵使訪問者可以回到原來的頁面去改變問題的答案。它調(diào)用了switchDiv()函數(shù)并傳入兩個參數(shù)：即包含訪問者正在查閱的表單部分的DIV id，以及包含即將被訪問的表單部分的DIV id。第二個按鍵則使訪問者一旦填完當前的表單部分之后可以移動到表單的下一個部分。它調(diào)用了switchIfDone()函數(shù)，這個函數(shù)接收三個參數(shù)：表單的屬性名稱，當前可見的DIV id，以及接下來即將被顯示的DIV id。

大部分的工作由switchDiv()和switchIfDone()函數(shù)來完成。第一個函數(shù)相當直接：

function switchDiv(this_div, next_div)
{
  if (getStyleObject(this_div) && getStyleObject(next_div)) {
    changeObjectVisibility(this_div, "hidden");
    changeObjectVisibility(next_div, "visible");
  }
}

這個函數(shù)和先前例子中看到的changeDiv()函數(shù)相類似。它用getStyleObject()函數(shù)來確認瀏覽器是否可以處理DHTML。如果可以的話，就調(diào)用changeObjectVisibility()函數(shù)將當前可見的DIV隱藏，并顯示下一個應(yīng)該被看見的DIV。

switchIfDone()函數(shù)負責(zé)確定表單是否完全被填充。如果表單已經(jīng)完成，而用戶正在查看表單的最后部分，則應(yīng)該把所有表單上的所有信息發(fā)送到服務(wù)器上。如果用戶正在查看的并不是向?qū)С绦虻淖詈蟛糠?，則switchDiv()函數(shù)應(yīng)該把頁面移動到下一個表單。

當訪問者點擊表單上的next按鍵時，switchIfDone() 函數(shù)就會被調(diào)用，如下所示：

<input type="button" value="next" 
	onClick="switchIfDone(this.form, ‘part2‘, ‘part3‘);">

第一個參數(shù)是一個指針，指向含有按鍵的表單。該函數(shù)將會檢查表單是否填寫正確，如果正確，就把第二部分隱藏，然后顯示第三部分。

下面是判斷表單是否填寫完成的代碼：

  var complete = true;
  for (var loop=0; loop < the_form.elements.length; loop++)
  {
    if (the_form.elements[loop].value == "")
    {
      complete = false;
    }
  }

這個循環(huán)遍歷了表單中的所有元素，確認這些元素是否都不為空。如果有一個元素為空，則把complete變量設(shè)置為假（false）。

一旦上述循環(huán)執(zhí)行完成，函數(shù)接下來就運行如下代碼：

  if ((complete == true) && (next_div == "finished")) 
  {
    submitTheInfo();
  }

如果表單已經(jīng)填充完成，且next_div參數(shù)被設(shè)定為finished（完成），則submitTheInfo()函數(shù)就會被調(diào)用。為了使這段代碼正確地工作，含有最后一部分表單的DIV中的next按鍵應(yīng)該如下所示：

<input type="button" value="next" 
	onClick="switchIfDone(this.form, ‘part3‘, ‘finished‘);">

如果第三個參數(shù)不是"finished"，則執(zhí)行else-if部分的代碼。

else if (complete == true) 
  {
    switchDiv(this_div, next_div);
  }

如果表單完成了，則調(diào)用switchDiv()函數(shù)，向訪問者顯示表單向?qū)У南乱粋€部分。如果這個else-if失敗了，則表單應(yīng)該肯定沒有完成，因此執(zhí)行最后一個else：

else {
    alert(‘please complete the form before moving on‘);
  }

腳本中的最后一個函數(shù)真正地把信息提交給CGI腳本。我們也可以在這里對訪問者提供的信息進行必要的處理：

function submitTheInfo()
{
  var submission_string="";
  for (var form_loop=0; form_loop<document.forms.length; form_loop++) 
  {
    for (var elems=0; elems<document.forms[form_loop].length;elems++)
    {
      if (document.forms[form_loop].elements[elems].name != "")
      {
        submission_string += document.forms[form_loop].name + "_" +
          document.forms[form_loop].elements[elems].name + "=" +
          document.forms[form_loop].elements[elems].value + "\n";
      }
    }
  }
  document.hiddenform.the_text.value = submission_string;

  // the next two lines are written for debugging - 
  // to put the script into action
  // comment out the changeObjectVisibility() line
  // and uncomment the document.hidden.form.submit() line
  //

  // document.hiddenform.submit(); 
  changeObjectVisibility("hiddenstuff","visible");

  document.hiddenform.submit();
}

這個函數(shù)遍歷頁面上所有的表單以及表單上的每一個元素，構(gòu)造一個包含用戶提供的所有信息的字符串。然后把這個字符串關(guān)聯(lián)到一個隱藏表單的textarea構(gòu)件上。包含隱藏表單的DIV大致如下：

&div id="hiddenstuff" style="position:absolute;top:300;left:5;visibility:hidden;">
<form name="hiddenform" method="POST" action="my_cgi_script">
<textarea name = "the_text" cols=40 rows=20>
</textarea>
</form>
</div>

請注意，這個表單有一個方法和動作，它們告訴瀏覽器當表單被提交時應(yīng)該執(zhí)行哪個腳本。下面這行代碼：

  document.hiddenform.the_text.value = submission_string;

把含有表單值的字符串關(guān)聯(lián)到textarea構(gòu)件中，而下面這行代碼：

  document.hiddenform.submit();

則把表單提交給action屬性指定的CGI腳本。

正如前面的例子說明的那樣，向?qū)С绦虻暮诵募夹g(shù)涉及到如何根據(jù)訪問者的動作來隱藏和顯示DIV。這種向?qū)У姆椒ㄉ晕⒂悬c復(fù)雜，因為在提交給CGI腳本之前，必須從表單中收集信息，但是除此之外，想法是一樣的。

信息太多

有些時候，對于一個問題的回答可能分成一整套相關(guān)的子問題。如果有人在填寫您的公寓租賃表單的時候說他或她沒有寵物，則您就不應(yīng)該問和寵物相關(guān)的問題。對于這種情況，您可以提供兩個表單，一個給有寵物的租戶，另一個給沒有寵物的租戶。然而，這意味著您需要維護多個彼此相當類似的表單。另外一種解決辦法就是用DHTML技術(shù)使一部分問題可以根據(jù)另外一個問題的答案出現(xiàn)或者消失。請看一下租賃表單，那里含有一個說明這種方法如何工作的實例。

這個腳本通過修改風(fēng)格表單的顯示屬性來實現(xiàn)元素的隱藏和顯示。如果風(fēng)格表單的顯示屬性被設(shè)定為none（無），那包含該風(fēng)格表單的DIV在屏幕上就不占用任何空間（因此是不可見的）。如果顯示屬性被設(shè)定為block（塊），則DIV就會出現(xiàn)在頁面上。當顯示屬性從none變成block時，DIV下面的所有元素就會向下移動，以便給DIV的內(nèi)容騰讓空間；而當顯示屬性從block變?yōu)閚one時，則DIV就消失，其下面的內(nèi)容就向上移動。請注意，這跟可視屬性完全不同。當您使一個隱藏的DIV變?yōu)榭梢姇r，并不會影響到屏幕上其它內(nèi)容的位置。如果DIV被定位在頁面上其它元素之上，則在顯示時，它就會出現(xiàn)在這些元素的上方。

請讀一下租賃表單的源代碼，看一下發(fā)生了什么。當訪問者點擊其中一個收音機按鈕，確認他或她有寵物時，JavaScript就會被觸發(fā)。按鍵的代碼大致如下：

<input type="radio" name="pet" 
	onClick="hideAll(); changeDiv(‘cat_questions‘,‘block‘);">cat

如果訪問者擁有一只貓，則瀏覽器就調(diào)用hideAll()函數(shù)來隱藏那些可能已經(jīng)顯示出來的和寵物有關(guān)的問題，然后調(diào)用changeDiv()函數(shù)，傳入cat_questions和block作為參數(shù)。在頁面稍微向下一點的地方，有一個id為cat_questions的DIV，下面是這個DIV的簡化版本：

<div id="cat_questions" style="margin-left:30px;display:none">
Does your cat have fleas?
<input type="radio" name="fleas" value="yes">yes
<input type="radio" name="fleas" value="no">no
</div>

請注意風(fēng)格表單中的display:none屬性。這個屬性告訴瀏覽器不要顯示這個DIV的內(nèi)容。changeDiv()函數(shù)和changeObjectVisibility()函數(shù)相類似：

function changeDiv(the_div,the_change)
{
  var the_style = getStyleObject(the_div);
  if (the_style != false)
  {
    the_style.display = the_change;
  }
}

首先，程序調(diào)用getStyleObject()函數(shù)來獲得您希望顯示的DIV的風(fēng)格表單對象。如果這個風(fēng)格表單對象存在，則其顯示屬性就會被改變。the_change變量的值如果是block，就會使DIV顯示在頁面上；如果是none，則DIV就被移走。這里用的getStyleObject()函數(shù)和我們一直用的函數(shù)稍微有點不同。遺憾的是，在Netscape 4上不能用JavaScript來改變顯示屬性，因此如果網(wǎng)頁訪問者使用的是Netscape 4，則這個版本的getStyleObject()函數(shù)返回false（假）。

hideAll()函數(shù)對包含寵物信息的DIV逐個調(diào)用changeDiv()函數(shù)進行處理。

function hideAll()
{
  changeDiv("cat_questions","none");
  changeDiv("dog_questions","none");
  changeDiv("bird_questions","none");
}

以上又是一種用JavaScript改變含有表單元素的DIV的風(fēng)格屬性的方法。這個例子和先前的例子之間的主要差別在于，這個例子切換的是風(fēng)格表單的顯示屬性，而不是可視屬性。

好的表單

幫助頁面訪問者以正確的格式進行填充，可以使信息輸入更加容易。表單通常會被一些輸入的提示弄亂，比如如何格式化日期，如何輸入信用卡號，等等。格式助手頁面介紹如何幫助您的用戶正確輸入，而又不至于因為輸入的提示而把頁面弄亂。

在上面這個實例中發(fā)生的一些事情值得一提。首先，點擊文本輸入框會彈出一個格式化輸入的輔助部件，來說明應(yīng)該如何填充這個元素。您可能可以猜到，這可以通過把相應(yīng)的部件放在DIV里面，并改變DIV的可視屬性來實現(xiàn)。此外，腳本程序還避免了頁面的訪問者直接在文本域上進行輸入，使他們只有通過相應(yīng)的部件才能進行輸入，這可以確保輸入的格式正確無誤。最后，腳本從輸入部件中取出輸入信息，將它放置到文本域中。

讓我們首先看一個主文本輸入框，即訪問者輸入姓名的文本框：

Name: <input type="text"  name="the_name" 
  onFocus= "hideAll(); 
      showAndFocus(‘nameDiv‘,document.name_form.first_name);"><br>

這個輸入域有一個onFocus的事件處理函數(shù)。如果有人點擊該文本框，就會觸發(fā)一個焦點事件，運行與這個事件相關(guān)聯(lián)的JavaScript。這時，瀏覽器就會調(diào)用hideAll()函數(shù)，把當前可視的部件隱藏起來，然后調(diào)用showAndFocus()函數(shù)來顯示正確的部件：

hideAll()函數(shù)對我們來說應(yīng)該有點面熟：

function hideAll()
{
  changeObjectVisibility("dateDiv","hidden");
  changeObjectVisibility("nameDiv","hidden");
}

這個函數(shù)調(diào)用我們在其它例子中用過的changeObjectVisibility()函數(shù)，把指定的DIV設(shè)置為hidden（隱藏）。

showAndFocus()函數(shù)負責(zé)顯示正確的部件，并把光標從用戶點擊的表單元素移動到該輸入部件上。它接收兩個參數(shù)：DIV的id和即將成為焦點的表單域。具體到這個例子，腳本傳入的DIV id是nameDiv，即包含姓名輸入部件的DIV；第二個參數(shù)是document.name_form.first_name，它是部件中的即將成為光標焦點的文本域。下面是showAndFocus()函數(shù)的源代碼：

function showAndFocus(div_id, field_to_focus)
{
  var the_div = getStyleObject(div_id);
  if (the_div != false)
  {
    changeObjectVisibility(div_id, "visible");
    field_to_focus.focus();
  }
}

這個函數(shù)首先確認是否可以訪問DIV的風(fēng)格信息，使用的函數(shù)是我們的老朋友，getStyleObject()。如果風(fēng)格表單可以被訪問，該函數(shù)就調(diào)用我們的另外一個老朋友，changeObjectVisibility()函數(shù)，來把DIV的內(nèi)容變?yōu)榭梢?；然后調(diào)用表單元素的focus()方法，以便把光標移動到輸入部件上。任何時候，如果有人點擊主姓名輸入域，則輸入部件就會彈出，并且抓住光標焦點。這就是為何我們可以保證主姓名域上的任何信息都是被正確格式化了的原因。從那里獲取信息的唯一途徑是通過姓名輸入部件。

姓名輸入部件的代碼大致如下：

<div id="nameDiv" style="position:absolute;top:50px;left:100px;
   visibility:hidden;z-index:2;background-color:#CCCCCC">
<form name="name_form">
First name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
<input type="button" value="DONE" 
onClick="fillInName(this.form.first_name.value,
this.form.last_name.value);">
</form>
</div>

這是一個含有一個表單的DIV，和我早些時候用的類似。最后一個表單元素是DONE按鍵，當這個按鍵被點擊時，fillInName()函數(shù)就會被調(diào)用。fillInName()函數(shù)取出部件的輸入信息，并將這些信息放到主姓名域中，然后把輸入部件隱藏起來：

function fillInName(first_name, last_name)
{
  document.main_form.the_name.value = 
		first_name + " " + last_name;

  changeDiv("nameDiv","hidden");  
}

日期信息的輸入部件的工作機制與此類似，請看一下表單助手的源代碼，那里可以看到整個腳本代碼。

結(jié)束語

在這篇文章中，我演示了如何用DHTML技術(shù)使表單更加易于填充的四種方法。讓用戶選擇他們需要的表單可以確保用戶看到的表單不會比他們實際需要的表單更加復(fù)雜。

有意思的是，雖然這些應(yīng)用看起來各不相同，但是其實現(xiàn)方法卻相當類似。事實上，有幾個函數(shù)被共用到所有的例子代碼中。好的函數(shù)就象是積木，您可以把它們用到很多不同的應(yīng)用程序中。請把這里看到的函數(shù)帶走，試著用到您自己的應(yīng)用程序中。您就肯定可以毫不費力地完成一些復(fù)雜而強大的功能。