|
所謂的表單是指由使用者可以輸入內容的文件，像是問卷調查之類。
表單製作共分為，文字欄位、文字輸入方塊、下拉式表單、多選核取、單選核取及按鈕等六部份。這五部份必需要放置在標籤 <FORM>…</FORM>之中。
<FORM>
標籤<form></form>之中為我們所製作的表單格式，在from 之後則可加入 method 及 action 兩個屬性，由於涉及主機端
cgi 程式的撰寫，因為這裡我們則不詳述，一般而言，用戶是無法自行設計 cgi 程式上傳至主機來執行自己想要作的表單，在本節最後，我們則介紹一個簡單由表單來傳送
E-Mail 的功能示範。六種表單之外觀及使用方式如下：
|
文字欄位
|
<input type=text>
|
|
文字輸入方塊
|
<textarea>
</teatarea>
|
|
下拉式選項
|
<select>
<option>
</select>
|
|
多選核取方塊
|
<input type=checkbox>
|
|
單選核取方塊
|
<input type=radio>
|
|
按鈕
|
<input type=submit>
<input type=reset>
<input type=button>
|
文字欄位
<form>
在此輸入文字 <input type=text name=textField value=”預設文字” >
</form>
|
文字輸入方塊
<form>
在此輸入文字 :<br>
<textarea cols=60 rows=6 name=textBlock>
預設文字
</textarea>
</form> |
下拉式表單
<form>
您的學歷 :
<select>
<option>初中
<option>高中
<option>高職
<option>專科
<option>大學
<option>研究所
</select>
</form>
|
多選核取
<form>
<INPUT type=checkbox name=interst>商業顧問
<INPUT type=checkbox name=interst>經紀業務
<INPUT type=checkbox name=interst>房地產業
<INPUT type=checkbox name=interst>加盟業務
<INPUT type=checkbox name=interst>營運業務
</form>
|
單選核取
<form>
<INPUT type=radio name=job>資訊
<INPUT type=radio name=job>金融
<INPUT type=radio name=job>保險
<INPUT type=radio name=job>製造
<INPUT type=radio name=job>運輸
<INPUT type=radio name=job>服務
<INPUT type=radio name=job>貿易
<INPUT type=radio name=job>出版
</form>
|
按鈕
按鈕分為三類，分別如下
|
執行
|
<input type=submit>
|
執行由 action 後所指定的 cgi 程式
|
|
取消
|
<input type=reset>
|
還原表單內的資料為內定值
|
|
一般
|
<input type=button>
|
使用者自行設計的按鈕
|
表單的綜合實例
接下來我們設計了一個電子郵件的表單，當使用者按下送出後，會把表單的內容送到電子郵件中，而不需要經由任何收發電子郵件的程式來執行，是一個不用cgi 的寫法。HTML文件如下：
<FORM
METHOD="POST"
ACTION="mailto:yourmail?SUBJECT=xxxx"
enctype="text/plain" >
|
action=mailto 之後加上您自己的電子郵件，再來的 ?SUBJECT= 則是先設定好信件的主旨，這裡XXXX則請填入英文不含空格，否則傳輸會失敗。在範例
email.html 中我們的設計則是 action=mailto:webfaq@yahoo.com?SUBJECT=Mail_From_Carousel
接下來的enctype="text/plain" 則是指定傳輸為一般文字，未加此行則信件內容會經過編碼，而看不懂，像是：
|
username=%A5d%C3%B9%AF%C0&
|
接下來的表單格式之中，我們每項都指定 name 這是為了收到信件後能清楚的分辨項目，另外又指定 value 這主要的用途是在 radio 單選核取及
checkbox 多選核取這兩項，未指定 value 值時，只會傳回 on 的值，那麼也是分不清楚的。完整範例見 email.html
<P>To: 探索 DHTML/CSS</p>
<p>From:
<INPUT type=text NAME="username" size="20" value="您的大名">性別：<INPUT
type=radio name=sex value=女>女
<INPUT type=radio name=sex value=男>男</p>
<p>學歷:
<select name=edu>
<option>初中
<option>高中
<option>高職
<option>專科
<option>大學
<option>研究所
</select>
<p>興趣：
<INPUT type=checkbox name=interst value=電腦>電腦
<INPUT type=checkbox name=interst value=電影>電影
<INPUT type=checkbox name=interst value=網路>網路
<INPUT type=checkbox name=interst value=下棋>下棋
<INPUT type=checkbox name=interst value=電視>電視
<TEXTAREA NAME="comment" ROWS=8 COLS=60 wrap=physical>Hello~
</TEXTAREA>
<P><INPUT TYPE=submit VALUE="寄 出"><INPUT TYPE=reset
VALUE="重 寫"></p>
</FORM>
|
執行的結果在您的郵件上收到的則是如下
Date:Wed, 09 Sep 1998 16:21:16 +0800
From:Audi <webfaq@yahoo.com>
To:webfaq@yahoo.com
SUBJECT:Mail_From_Carousel
username=卡羅素
sex=男
edu=大學
interst=電腦
interst=網路
interst=下棋
comment=您好，這裡是「探索 DHTML/CSS」製作單位，希望本書能對您有幫助
|
|