html語法教學分享

控制鈕及表單

上一頁        回HTML首頁        下一頁

　

表單的標記為

 

或   ，表單之內必須放置控制鈕 ，可以設計成單鍵按鈕、按鈕表單、文字方塊、密碼、單選選單、多選選單、及捲軸選單等。 其功能為提供使用者輸入資料，如問卷或投票，以增進網頁互動的能力。 其語法如下：

表單所收集到的資料，上傳到伺服器後，通常以 CGI 程式或 ASP處理，詳見 ASP 語法；或是若無伺服器架設時，也可以傳送到特定的電子郵址。

單鍵按鈕
按鈕表單
文字方塊表單
空白框
資料上傳

---

單鍵按鈕

最常見的控制鈕為單鍵按鈕 (button)，單鍵按鈕的功能，可以是簡單的連結圖片或是較複雜的連結到資料庫。其語法為指定控制鈕 的 type 屬性即可。單鍵按鈕的 相關屬性如下：

屬 性	用 途	屬 性 值
type	單鍵按鈕的類型	button/ submit/ reset
name	單鍵按鈕代號，將於 ASP 程式使用	(自訂)
value	單鍵按鈕上呈現的文字	(自訂)
size	單鍵按鈕寬度	(自訂)
style="..."	單鍵按鈕文字或邊框的設定	(自訂)

至於按鈕文字 (text) 及按鈕邊框 (border) 的設定，則可使用 style="..."，有關 style 的設定請參閱 CSS 樣式表的「文字的特效」與「表格的特效」二節。常見的單鍵按鈕使用方式如下：

用 途	HTML 語法	實 例
採用預設值的單鍵按鈕 ，例如： 按鈕長度與其文字長度有關。		預設的單鍵按鈕
改變形狀的按鈕，例如：	size=按鈕寬度            style="font-size: 按鈕文字點數;            color:按鈕文字顏色代碼;            font-family:按鈕文字字型;            font-style: bold/ italic;            border-style: ridge/ double;            border-width: 邊框寬度;            background-color:底色顏色代碼">	不同造型 的按鈕
瀏覽檔案	size=按鈕寬度>	開啟舊檔
重設按鈕，按下後所有選取的東西都會清除		重設按鈕
送出按鈕，按下後所有選取的東西都會送出		送出按鈕
有圖片的在按鈕上		圖片按鈕
圖片即按鈕	border=邊框寬度>	圖片按鈕

  back to top

---

按鈕表單

用 途	HTML 語法	實 例
空白複選單 選項一 選項二 選項三	框外文字            name="選項代號一"> 選項一            name="選項代號二"> 選項二            name="選項代號三"> 選項三 < /form >	複選單
預設為已勾選的複選單 選項一 選項二 選項三	框外文字            name="選項名稱一"  checked> 選項一            name="選項名稱二"  checked> 選項二            name="選項名稱三"  checked> 選項三	有預設值的勾選單
單選單，只能勾選一項目，且選了無法刪除。注意：所有的 Name 必需相同 選項一 選項二 選項三	框外文字            name="群組名稱"> 選項一            name="群組名稱"> 選項二            name="群組名稱"> 選項三	單選單
表單樣式變化 選項一 選項二 選項三	框外文字            name="群組名稱"> 選項一            name="群組名稱"> 選項二             name="群組名稱"> 選項三

打勾的清單

  back to top

---

文字方塊表單

用途	HTML語法	實例
下拉式選單 選項一 選項二 選項三 觀看全部選項則使用右側箭頭，螢幕每次只列出一項，且為預設選項。 預設選項即有加上 selected的選項，點選後螢幕呈現點選項	框外文字             name="群組名稱">                      selected> 選項一     選項二     選項三	下拉式選單
全列式選單 第一項 第二項 第三項 全部選項均列在螢幕上，預設選項出現底色(high-lighted)。 點選後，換成點選項呈底色	框外文字             name=群組名稱>                 selected> 選項一     選項二     選項三	全列式勾選單
全列式可複選選單，複選時需按滑鼠左鍵往下拖曳或同時按control及滑鼠左鍵 第一項 第二項 第三項	框外文字              name=群組名稱>               selected> 選項一     選項二     選項三	可多選的全列勾選單

  back to top

---

空白框

用途	HTML語法	實例
可供填寫的空白框	框外文字             name=本框名稱>	空白框
建立有預設文字的框	框外文字            value=框內文字 name=本框名稱>	有預設文字的框
建立可掩蓋密碼的框	框外文字            value=預設密碼，若無則為空白            name=本框名稱 >	輸入密碼
建立有捲軸的框	框外文字 <br>	建議事項 個人資料

  back to top

---

資料上傳

如果想將 form 的資料上傳，最簡單的方法就是利用 e-mail 來送出。但是 e-mail 資料無法處理大量資料，且無法執行進一步的分析或互動，若想讓 web 伺服器能自動處理 form 的輸入值，並迅速回報處理結果，則需 CGI 程式或 ASP 程式。詳見 ASP 動態網頁的「Request 語法」。

然而無論是 CGI 或 ASP 程式，要使選單具有上傳的功能，則需使用

的屬性。 的屬性如下：

屬 性	用 途	屬 性 值
action	資料上傳的位址	(自訂)
method	上傳資料的方式	post 或 get
name	表單的代號	(自訂)

若想在資料送出前做一些確認工作的話，則可以使用 JavaScript 程式，請參考 JavaScript 程式之 條件式語法。常見的資料上傳方式如下：

用 途	HTML 語法	實 例
將表單的資料上傳到某一電子郵址。	method=post>	以電子郵件處理滿意度問卷
將表單的資料上傳到某一電子郵址，並預設電子郵件標題。	action="mailto:電子郵件位址?subject='電子郵件標題'">
使用 ASP 程式擷取或分析上傳表單的資料。	method=post     name=表單代號>	以 ASP 程式處理滿意度問卷
使用 ASP 程式擷取或分析上傳表單的資料，上傳內容將在網址顯現。	method=get     name=表單代號>
使用 CGI 程式擷取或分析上傳表單的資料。	method=post      name=表單代號>

  back to top

---

© 2003 版權為柴惠敏所有，如需引

本著作係採用創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款授權.