★目前位置→第15章。製作表單
01.何謂Html 02.基本架構 03.常用標籤 04.字體大小 05.字的變化
06.項目格式 07.走馬燈    08.超連結 09.貼圖標籤 10.圖片連結
11.表格運用 12.插入音樂 13.body設定 14.分割視窗 15.製作表單

所謂的表單是指由使用者可以輸入內容的文件,像是問卷調查之類。

表單製作共分為,文字欄位、文字輸入方塊、下拉式表單、多選核取、單選核取及按鈕等六部份。這五部份必需要放置在標籤 <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」製作單位,希望本書能對您有幫助

HTML語法測試區

HTML語法練習