MIS2000Lab.的「HTML5 認證考試, 從零開始」#3-- HTML Form 網頁表單 & 網頁裡的Script程式

摘要:MIS2000Lab.的「HTML5 認證考試, 從零開始」#3-- HTML Form 網頁表單 & 網頁裡的Script程式





 

 

本文同步發表於 http://ithelp.ithome.com.tw/question/10156981

請幫我連結過去,增點人氣、加點「點閱率」,感恩!
 
 
 
 
 
要做一個與使用者互動的網頁,例如:填寫會員資料、購買產品(購物車)、留言板等等。
 
一定會用到表單與相關的控制項,有別於前面介紹過的靜態網頁標籤,這裡是網頁程式的重點(動態網頁)。
 
 
 
HTML表單(<form>標籤)必須在最外圍,把所有表單元件包起來。
 
一個網頁可以有多個HTML的<form>...</form>標籤,可以有多個HTML表單。
(但ASP.NET Web Form表單只有一個,而且是runat="server")
 
 
 
在此使用圖片表示,可以展示HTML碼與成果,讓您同時對照。
 
有助於初學者學習。
 
=========================================
 
 
下圖是最基本的HTML Form表單,最後有一個送出(Submit)按鈕
 
<form>裡面的action表示要把表單的輸入值,送給 form_01_exec.aspx網頁來接收與處理。

 

以上圖為例,<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表單元件)。

 

文字輸入方塊
 
    單列的文字輸入,<input type=text>
 
    多列輸入,則是<textarea>

 

HTML Form的表單,裡面用到的按鈕
 
除了前面介紹過的送出(確認 / Submit)還有以下兩者:
 

 

清單控制項
 
主要有「單選」「複選」兩種
 
 
 
    <select>下拉式選單,可以是單選、也能作複選(multiple=true)
 
    但使用者必須按住「Ctrl」鍵,才能用滑鼠點選(複選)多個子選項
 

 

=========================================
 
網頁裡的Script程式
 
 
HTML網頁裡面如果要加入JavaScript程式或是jQuery,可以參照下面的寫法,也就是<script>標籤的使用。
 
 
第一種,直接撰寫script程式在網頁裡面,通常放在網頁表頭的<head>標籤裡面。
 
          也有寫在<body>裡面的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/。
 

本文同步發表於 http://ithelp.ithome.com.tw/question/10156981

請幫我連結過去,增點人氣、加點「點閱率」,感恩!
 
 
 
本文內容,將會在2014年底,碁峰出版社推出的HTML5新書裡面
 
本網站內的下一篇文章:
 
 
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材
 
9789863475750

HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

  • 出版商:碁峰
  • 出版日期:2015-04-09
  • 台幣定價:
  • $480
  • 售價:7.9 折 $379
  • 語言:繁體中文
  • 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

 
 
 
 
 
 
 

我將思想傳授他人, 他人之所得,亦無損於我之所有;

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson

線上課程,遠距教學 (Web Form 49hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程,遠距教學 (ASP.NET MVC 75hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

ASP.NET MVC線上課程 第一天 免費看 (5.5小時) 

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.台灣  或  school (at) mis2000lab.net


ASP.NET遠距教學、線上課程(Web Form + MVC)。 第一天課程, "完整" 試聽。 

................   facebook社團   https://www.facebook.com/mis2000lab   ......................

................  YouTube (ASP.NET) 線上教學影片  https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

 

Blog文章 "附的範例" 無法下載,請看 這裡 ...... https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)

......................................................................................................................................................

...................................................................................................................................................... 

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講

事先錄製好的影片,並非上課時側錄!   觀看影片時,有如我「一對一」跟您面對面講課

 

ASP.NET MVC 5 線上教學

累積時數約 75小時...... 第一天(5.5小時)完整內容,"免費"讓您評估