資訊科技中文教學應用 | 首頁 | 前頁 | 論壇 | 搜尋

WebForm的製作

製作 WebForm，要求以下四方面的認識：

  1. 當然要懂得編寫網頁，這是最基本的條件，此外，還要：
  2. 懂得在網頁中加入 Form（表單，不同於表格 Table），以及各種表單項目（Form Objects），如文字欄位（TextField）、按鈕（Button）；
  3. 對網頁原始檔（Source）以及網頁語言 HTML （HyperText Markup Language）有最基本的認識 ，了解 <HEAD></HEAD>、<P></P>、<HR> 等標籤（tags）的意義等；
  4. 對網頁編程（script）有最起碼的概念（編程概念而已，而非編程能力）。

如何利用 DreamWeaver 編寫網頁，請參考 DreamWeaver 3.0 教程；至於有關 HTML 的基本認識，請參考 HTML 探索。另外，十分建議到 W3 Schools 細讀有關技術的說明，這可能是網上內容最完備、設計最清晰的編網技術免費導引（Tutorial）網站。

何謂 WebForm？

按一下連結，看看 WebForm 指甚麼。本程式的作用的二：一、把表單內容儲存起來；二、把表單內容在另一新生成的網頁中顯示出來。

步驟 1：搜尋

下列程式為本站所開發，非搜尋所得。

步驟 2：織網

在網頁中加入以下表單項目 (Form Objects)：文字欄位 (textfield)，讓瀏覽者輸入文字。文字欄位有兩種：


注意：加入表單項目前，不必先加入表單 (Form) ，否則 WebForm 會出現錯誤。

步驟 3：程式

把下列語句加在網頁原始檔中的 head 之內。

1. 把以下程式加插到網頁原始檔的 <HEAD> 與 </HEAD> 之間，為免有錯誤，建議緊貼在 </HEAD> 的前面：

2. 認識網頁程式的組織：

<script>
function template() {
var t=document.all[0].outerHTML;
var w=window.open("","temp","menubar,resizable,scrollbars,status,width=625,height=400");
var d=w.document;
d.open("html/plain");
d.write(t);
d.close();
d.execCommand("SaveAs");
daddy = window.self;
daddy.opener = window.self;
daddy.close();
}
function transform() {
/***預設以段落分隔項目，可修改 sp 內容改變分隔方式***/
var sp="<p></p>";
/***可修改部份結束***/
var ta=document.all.tags("textarea");
var w=window.open("","comp","menubar,resizable,scrollbars,status,width=625,height=400");
var d=w.document;
d.open("html/plain");
d.write("<html><head><meta http-equiv='Content-Type' content='text/html; charset=big5'></head><body>");
for (i=0; i<ta.length; i++) {
d.write(ta[i].value);
d.write(sp);
}
d.write("</body></html>");
d.close();
}
</script>

JavaScript 程式一般由四部份組成（藍色部份為專用語，不可改變；黑色部份為自定項，可任意設定）：

  1. 程式標籤：<script>......</script>
  2. 程式名稱：function transform()
  3. 程式邊界：{......}
  4. 程式內容：......;

程式標籤內包著程式名稱；程式名稱後是程式邊界（即左右大括號「{ }」）；程式邊界又內包著程式內容（即左右大括號「{ }」所包內容）；程式內容的每行均須以分號「;」完結。

接著會修改這個程式以符合不同的表單設計；但須注意程式中紅色的部份都是 JavaScript 的專用語，不可改易，否則程式無法運作。

3. 注意程式中下列套紅的部份：

<script>
function template() {
var t=document.all[0].outerHTML;
var w=window.open("","temp","menubar,resizable,scrollbars,status,width=625,height=400");
var d=w.document;
d.open("html/plain");
d.write(t);
d.close();
d.execCommand("SaveAs");
daddy = window.self;
daddy.opener = window.self;
daddy.close();
}
function transform() {
/***預設以段落分隔項目，可修改 sp 內容改變分隔方式***/
var sp="<p></p>";
/***可修改部份結束***/
var ta=document.all.tags("textarea");
var w=window.open("","comp","menubar,resizable,scrollbars,status,width=625,height=400");
var d=w.document;
d.open("html/plain");
d.write("<html><head><meta http-equiv='Content-Type' content='text/html; charset=big5'></head><body>");
for (i=0; i<ta.length; i++) {
d.write(ta[i].value);
d.write(sp);
}
d.write("</body></html>");
d.close();
}
</script>

留意套紅部份，「template()」「transform()」是這個程式的名稱，它由一個英文詞語（這裡是 transform）加上左右彎括號「( )」組成，英文詞語部份是任意命名的，稱為「printing()」或「display()」等亦無不可。

步驟 4：啟動

加入兩個表單項目：按鈕，一者顯示為「暫存」，另一者顯示為「完成」。「暫存」按鈕用以把表單內容儲存起來，「完成」按鈕把表單內容在另一新生成的網頁中顯示出來。

這一起動部份須加在網頁原始檔的 body 之內，至於放在 body 之中的哪兒，則由網頁計設者自行從頁面設計上考慮。

在網頁的原始檔中找尋按鈕的原始碼，按鈕原始碼應是這樣的：

在兩個按鈕的原始碼內（注意，是原始碼之內，不是原始碼之後，即應置於 HTML 標記收束符號「>」之前）加入啟動程式的語句：前一按鈕原始碼加入「onclick="template()"」，後一按鈕原始碼加入「onclick="transform()"」，令整個按鈕的原始碼變成如下的樣子：

再一次留意新加入的內容，是否在按鈕的原始碼之內，即在左右兩個尖括號 「<　>」 之中。

這兩項新加入內容「onclick="template()"」與「onclick="transform()"」各有兩部份，前半部份是「onclick」，後半部份是「"template()"」或「"transform()"」，注意後半部份要用西文（而且是半形，不是全形）引號「"　"」括起來，而且，前半和後半要用等號「=」連結起來。意思是說：當按下按鈕的時候（onclick 的意思），便相應地執行稱為「transform()」或「transform()」的程式。

注意：1. onclick 之前應留有空格，別緊貼前面內容；2. 不要把 template 和 transform 的程式名稱串錯；3. onclick="template()" 和 onclick="transform()" 皆為半形（而不是全形）的文字或符號；4. template() 和 transform() 前後有開關引號，而且皆為雙引號，而不是開引號用了雙引號，關引號用了單引號之類；5. template() 和 transform() 中的圓弧開關括號（即「(」和「)」）之間沒有空格。

至於為甚麼後半部份是「"template()"」或「"transform()"」呢？道理很簡單，因為上文把程式命名為「template()」及「transform()」；如果上文把程式命名為「output()」，則這裡便會是「onclick="output()"」了。

步驟 5：調校

調校一般是應用 JavaScript 程式最重要的部份；但本程式的調校很簡單，甚至可以不作任何修訂。

注意程式中下列套紅的部份，這是本程式唯一或者需要改動的地方：

<script>
function template() {
var t=document.all[0].outerHTML;
var w=window.open("","temp","menubar,resizable,scrollbars,status,width=625,height=400");
var d=w.document;
d.open("html/plain");
d.write(t);
d.close();
d.execCommand("SaveAs");
daddy = window.self;
daddy.opener = window.self;
daddy.close();
}
function transform() {
/***預設以段落 <p></p> 分隔項目，可修改 sp 的內容改變分隔方式***/
var sp="<p></p>";
/***可修改部份結束***/
var ta=document.all.tags("textarea");
var w=window.open("","comp","menubar,resizable,scrollbars,status,width=625,height=400");
var d=w.document;
d.open("html/plain");
d.write("<html><head><meta http-equiv='Content-Type' content='text/html; charset=big5'></head><body>");
for (i=0; i<ta.length; i++) {
d.write(ta[i].value);
d.write(sp);
}
d.write("</body></html>");
d.close();
}
</script>

程式用變數 sp 記下如何分隔文字欄位項目。程式預設了以 <p></p>（即 paragraph 段落）為分隔的方式，這方式可以隨意改易，唯這方式必須以 HTML 標記表示。例如改成：

var sp="<p>****************</p>";

或者改成水平線（<hr> 表示水平線）：

var sp="<hr>";

注意，表達分隔方式的 HTML 標記須要用開關引號（即： " 和 "）括起 。

步驟 6：試用

試用後把編寫好的網頁上載到伺服器上。 看看一個簡單的例子：讀書報告。

可能問題

如發現本程式問題，請到論壇張貼。

This Site is designed and managed by Lam Wai-ip Joseph. All Rights Reserved.
Updated.