iT邦幫忙

DAY 3
3

上一篇文章 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


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#2--開發工具 與 我的第一個HTML5網頁
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#4--超入門的CSS 與 selector
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30

尚未有邦友留言

立即登入留言