上一篇文章 http://ithelp.ithome.com.tw/question/10156839

要做一個與使用者互動的網頁，例如：填寫會員資料、購買產品（購物車）、留言板等等。

一定會用到表單與相關的控制項，有別於前面介紹過的靜態網頁標籤，這裡是網頁程式的重點（動態網頁）。

HTML表單（<form>標籤）必須在最外圍，把所有表單元件包起來。

一個網頁可以有多個HTML的<form>...</form>標籤，可以有多個HTML表單。
（但ASP.NET Web Form表單只有一個，而且是runat="server"）

在此使用圖片表示，可以展示HTML碼與成果，讓您同時對照。

有助於初學者學習。

=========================================

下圖是最基本的HTML Form表單，最後有一個送出（Submit）按鈕

<form>裡面的action表示要把表單的輸入值，送給 form_01_exec.aspx網頁來接收與處理。

[img=415,306]http://ithelp.ithome.com.tw/upload/images/20140928/201409281917025427ee2e3ac48_resize_600.jpg[/img]

以上圖為例，<form>的屬性如下：
 action，接收並處理這些資訊的「網頁URL」。
 method，常用的有get與post。所謂的Http Verbs一共有九種：OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT、DEBUG（以上僅供參考）。
 enctype，需搭配HTTP POST使用，有application/x-www-form-urlencoded、multipart/form-data、text/plain這幾種屬性值。
 target，有_blank、_top、_parent、_self（預設值）四種。
 accept-charset，語系編碼，如utf-8、zh-tw等等。accept屬性在HTML5已經不使用。

=========================================
HTML Form常見的表單元件如下，

以Visual Studio為開發工具，VS 2013即支援 HTML5與相關的技術（jQuery / JavaScript等等）

透過Visual Studio左側的「工具箱」底下的「HTML」分類就能找到

（下圖左側可以看見各種HTML表單元件）。

[img=415,288]http://ithelp.ithome.com.tw/upload/images/20140928/201409281918155427ee77d9c5a_resize_600.jpg[/img]

文字輸入方塊

單列的文字輸入，<input type=text>

多列輸入，則是<textArea>

[img=415,306]http://ithelp.ithome.com.tw/upload/images/20140928/201409281919325427eec428650_resize_600.jpg[/img]

HTML Form的表單，裡面用到的按鈕

除了前面介紹過的送出（確認 / Submit）還有以下兩者：

[img=415,360]http://ithelp.ithome.com.tw/upload/images/20140928/201409281922235427ef6f17e1e_resize_600.jpg[/img]

清單控制項

主要有**「單選」「複選」**兩種

<select>下拉式選單，可以是單選、也能作複選（multiple=true）

但使用者必須按住「Ctrl」鍵，才能用滑鼠點選（複選）多個子選項

[img=415,306]http://ithelp.ithome.com.tw/upload/images/20140928/201409281923135427efa1cc5ad_resize_600.jpg[/img]

=========================================

網頁裡的Script程式

HTML網頁裡面如果要加入JavaScript程式或是jQuery，可以參照下面的寫法，也就是<script>標籤的使用。

第一種，直接撰寫script程式在網頁裡面，通常放在網頁表頭的標籤裡面。

也有寫在裡面的script程式。

第二種寫法，把script程式寫在另一個my_JavaScriptFile.js檔案（純文字檔）裡面，

直接引用這個程式檔案到網頁裡面。
<script type="text/javascript" src="my_JavaScript.js"></script>

第三種寫法，引用其他網站寫好的script程式檔。

例如jQuery檔案常以這種方式引用，以節省並分散網站流量。
<script type="text/javascript"
src="http://ajax.contoso.com/ajax/jQuery/jquery-1.7.2.js">
</script>

文章最後要提醒您，HTML的標籤很多，其中的屬性更是不勝枚舉。

雖然不需要死背，但也建議您要購買一本HTML的專業書籍放在手邊查詢，才能獲得完整的資訊。

本文介紹的HTML標籤，您都可以在這個網站裡面找到更詳細的說明與試用Demo，

請看http://www.w3schools.com/TAGS/default.asp。

想要查詢最新版的HTML5標籤，可以參閱W3C官方網站的說明，http://www.w3.org/TR/html5/。

下一篇文章：超簡易入門 CSS

http://ithelp.ithome.com.tw/question/10157050

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期：2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110