實用進階語法

第四篇
製作一個可以輸入名稱及密碼的網頁

適合程度： 初學者 一般程度 進階者 以上均宜
注意：hostedscripts 網站，已停止該項服務。
示範

壹、運用說明：
您不必懂 CGI、ASP 等互動程式，只要懂 的HTML 語法及一些技巧便行。
製作過程：申請一個免費 CGI 程式指示方向套用登錄畫面 HTML 語法指示方向完成。
輸入登錄頁面是一個模擬密碼保護的 CGI 程式畫面，其實並未真正使用到 CGI 程式。

貳、申請免費 CGI 程式：
我們用的是國外 (hostedscripts) 免費 CGI 程式。
注意：hostedscripts 網站，已停止該項服務。

參、製作登錄畫面：
這個畫面包括 HTML、CSS、CGI、JavaScript，分別介紹如下；如果您不懂這些語法或程式，只要套用便可。

肆、<BODY>....</BODY> 內的 HTML、CSS 語法：
<Center>
<DIV class=outborder style="WIDTH: 350px"> <!--class=xxxx style=xxxx，這是 CSS 表單-->
<DIV class=inborder style="WIDTH: 350px">
<DIV class=title style="TEXT-ALIGN: left">  網站登錄</DIV>
<TABLE border=0>
<TR>
<TD vAlign=middle><IMG src="key.gif" alt="網站登錄" align=absmiddle border=0 hspace=0 vspace=0 height=38 width=38>
<TD>
<TABLE border=0>
<TR>
<TD ColSpan=2>這是測試畫面，名稱請使用 test 密碼請使用 1111</TD></TR>
<TR>
<TD align=left>名　　　稱：</TD>
<TD><INPUT class=inputtxt maxLength=100 name=userx onfocus=this.select() size=30></TD></TR>
<TR>
<TD align=left>密　　　碼：</TD>
<TD><INPUT class=inputtxt maxLength=100 name=passx onfocus=this.select() size=30 type=password></TD></TR>
</TABLE>
</TD></TR>
</TABLE>
<CENTER>
<INPUT class=button name=Action2 type=submit value=確定>
</DIV></DIV>
</FORM>
</CENTER>

伍、<HEAD>...</HEAD> 內的 CSS 語法：
<STYLE>
.button { FONT-SIZE: 9pt; HEIGHT: 20px}
.inputtxt { FONT-FAMILY: Arial; FONT-SIZE: 9pt; HEIGHT: 20px}
TD {FONT-FAMILY: Arial; FONT-SIZE: 9pt}
.outborder {BACKGROUND-COLOR: gray; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: gray 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: gray 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; WIDTH: 500px}
.inborder {BACKGROUND-COLOR: #c0c0c0; BORDER-BOTTOM: gray 1px solid; BORDER-LEFT: white 1px solid; BORDER-RIGHT: gray 2px solid; BORDER-TOP: white 1px solid; COLOR: #000000; FONT-SIZE: 9pt; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}
.title {BACKGROUND-COLOR: #000088; BORDER-BOTTOM: gray 1px solid; BORDER-RIGHT: gray 1px solid; COLOR: #ffffff; FONT-SIZE: 9pt; HEIGHT: 20px; PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 0px; PADDING-TOP: 5px; WIDTH: 100%}
</STYLE>

陸、<HEAD>...</HEAD>內的 JavaScript 程式：
<!--密碼查核JavaScript程式-->
<SCRIPT language=JavaScript>
<!--
function chkinput(){
var ErrString = "" ;
if (document.form1.userx.value.length == 0){ErrString = ErrString + "必須輸入使用者代號。" + unescape('%0D%0A')}
if (document.form1.passx.value.length == 0){ErrString = ErrString + "必須輸入密碼。" + unescape('%0D%0A')}
if (ErrString != "") {
alert(ErrString);
return false;
}
return true;
}
// -->
</SCRIPT>
<!--密碼查核JavaScript程式-->

柒、BODY 內部的 HTML 語法、JavaScript 程式：
<BODY bgColor=#ffffff onload=document.form1.userx.select() topMargin=120>

捌、<BODY>....</BODY> 內的 CGI 程式：
<!--user=dp00改成您申請到的資料-->
<Form Action="http://members.hostedscripts.com/password.cgi?user=dp00" Method=post name=form1 onsubmit="return chkinput()">
<!--user=dp00改成您申請到的資料-->

玖、實作範例及原始碼：
名稱請使用 test 密碼請使用 1111示範。
如果您想完整取得電子報內所有檔案資料，我們提供燒錄光碟片給您 Go 。
凡加入教學或教材會員者，均可獲得以下乙份完整的資料光碟。
詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、網頁圖窟。

拾、結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會HTML語法 ，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。