ASP.NET專題實務 WebForm + MVC線上教學影片 -- MIS2000Lab.

MIS2000 Lab.已推出20餘本電腦書，曾任資策會專任講師與微軟MVP。自.NET 1.x起，已出版15本ASP.NET (Web Form)書籍，也有遠距教學 線上教程 教學影片

2014-09-28

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 約 51hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

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

 

寫信給我，不要私訊 --  mis2000lab (at) yahoo.com.tw  或  school (at) mis2000lab.net

 (1) 第一天 ASP.NET MVC5 完整影片（5.5小時 / .NET 4.x版）免費試聽。影片 https://youtu.be/9spaHik87-A 

 (2) 第一天 ASP.NET Core MVC 完整影片（3小時 / .NET Core 6.0~8.0）免費試聽。影片 https://youtu.be/TSmwpT-Bx4I 

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm  。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b  


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 MVC  => .NET Core MVC 線上教學  ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了！MIS2000Lab.主講   事先錄好的影片，並非上課側錄！   觀看時，有如「一對一」面對面講課。

 

 

 

贊助商連結

BloggerAds

本頁段落