商用網站架設實務

LESSON-03 · 零基礎學生教材

HTML 基礎：多頁面與聯絡表單

完成四頁互相可達的 HTML-only 網站骨架；contact.html 有一個真正包住三組欄位的 form，欄位具備 label、id、name、type、required 與 submit 行為。

StarterCheckpointSolution

先理解：這堂課解決什麼問題？

商家不只需要首頁，訪客還要能進入服務、關於與聯絡頁並留下需求。

本堂要完成：完成四頁互相可達的 HTML-only 網站骨架；contact.html 有一個真正包住三組欄位的 form，欄位具備 label、id、name、type、required 與 submit 行為。

學習邊界：先完成「用相對路徑與表單欄位完成多頁網站骨架」，不提前引入尚未教過的框架或建置工具。

第一次上課環境：從四個 HTML 檔案開始

  1. 編輯器：建立並儲存純文字檔案；先確認副檔名是 .html，不是 .html.txt。
  2. 資料夾：建立 commercial-site/，裡面放 index.html、services.html、about.html 與 contact.html，本堂不新增 CSS、JavaScript 或框架。
  3. 瀏覽器：先開啟 index.html；每次儲存後回到瀏覽器重新整理，才會看到最新結果。
  4. DevTools：在頁面按右鍵選「檢查」，本堂先用 Elements 看導覽與 form 階層，再用 Network 看 HTML 是否 200 或 404。

素材選修預告：assets/ 本堂只知道它是素材資料夾，不建立也不引用本地素材。

先做最小實驗：先看見結果

這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。

開啟本堂最小實驗

  1. 入口：開啟 examples/minimal/index.html。
  2. 操作：先點擊首頁的服務、關於與聯絡連結，再在 contact.html 依序測試空白送出、錯誤 Email 與完整送出。
  3. 預期：四頁 URL 都能開啟；空白或錯誤 Email 會被瀏覽器原生驗證阻止；完整送出後網址列出現 name、email、message。
  4. 重設：回到 examples/minimal/index.html；表單頁重新整理即可清除目前輸入。

學生練習流程

依序完成每一張卡；目前只聚焦一個步驟，先操作，再用可觀察證據確認結果。

  1. 1

    最小實驗

    第一次開啟 HTML：在編輯器建立 commercial-site/ 與四個 HTML 檔案，用瀏覽器開啟 index.html；儲存後重新整理。
  2. 2

    最小實驗 2

    先開啟 examples/minimal/index.html，逐一點擊四頁導覽，最後在 contact.html 測試原生表單驗證。
  3. 3

    名詞

    回到名詞卡，依序拆解相對路徑、a／href、form、label、for／id、name、type／required、button／submit、action／method。
  4. 4

    Starter

    把 Starter 複製到自己的工作資料夾：在四頁加入導覽，再完成 contact.html 的 form、三組欄位與 submit；每一步都要看到指定結果。
  5. 5

    Checkpoint

    開啟 Checkpoint，點擊故意寫成 service.html 的主要行動連結，從 Network 確認唯一 404。
  6. 6

    驗收

    把 href 修回 services.html，確認 Network 變成 200；最後用 Elements、Tab、原生驗證與網址列留下證據。
  7. 7

    變體驗收

    完成預約諮詢變體，保留四個 HTML 檔案、form、label、name 與相對路徑責任，不新增 CSS、JavaScript 或框架，並閱讀下一堂銜接：CSS 選擇器：下一堂會用 class 與元素關係替這些結構加上樣式。

檔案地圖：每個位置負責什麼？

先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。

先學會這些詞

先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。

本堂 13 個詞先選一組，再展開需要的名詞卡；每次只保留目前的學習焦點。

表單結構

7 個詞
formform element 白話意思：包住一組欄位，說明這些資料要一起送出。 展開查看正式定義、範例與驗收證據
正式定義
HTML 中定義表單控制項範圍與送出設定的元素。
什麼時候用
要收集姓名、Email 或需求內容時。
最小範例
<form action="contact.html" method="get">...</form>。
可觀察證據
Elements 看到 input、textarea 與 button 都位於 form 內。
容易混淆
和 div 混淆；form 不只是外觀容器，還定義欄位與送出責任。
inputinput element 白話意思：讓訪客輸入一行資料的欄位。 展開查看正式定義、範例與驗收證據
正式定義
依 type 屬性表示單行文字、Email 等表單控制項的 HTML 元素。
什麼時候用
收集姓名或 Email 等短資料時。
最小範例
<input id="email" name="email" type="email">。
可觀察證據
Elements 顯示欄位，Tab 可以把焦點移到它。
容易混淆
和 textarea 混淆；input 適合單行資料，textarea 適合較長的多行內容。
textareatextarea element 白話意思：讓訪客輸入多行文字的欄位。 展開查看正式定義、範例與驗收證據
正式定義
表示可輸入多行純文字內容的 HTML 表單元素。
什麼時候用
收集需求、備註或較長說明時。
最小範例
<textarea id="message" name="message"></textarea>。
可觀察證據
Elements 看到 textarea，輸入多行文字後仍在同一欄位內。
容易混淆
和 input 混淆；textarea 有開始與結束標籤，內容可跨多行。
labellabel element 白話意思：告訴訪客這個欄位要填什麼。 展開查看正式定義、範例與驗收證據
正式定義
描述表單控制項的 HTML 元素；透過 for 與 id 建立明確關聯。
什麼時候用
每個 input 或 textarea 都需要清楚欄位名稱時。
最小範例
<label for="name">姓名</label>。
可觀察證據
點擊「姓名」文字後，焦點進入 name 欄位。
容易混淆
和 placeholder 混淆；label 是欄位名稱，placeholder 只是欄位內的提示文字。
for／idlabel association 白話意思：label 的 for 要和欄位的 id 完全相同。 展開查看正式定義、範例與驗收證據
正式定義
以 label[for] 與表單控制項 id 建立程式可理解的欄位關聯。
什麼時候用
要讓滑鼠、鍵盤與輔助技術知道欄位名稱對應哪個控制項時。
最小範例
for="email" 對應 <input id="email">。
可觀察證據
點擊 label 後正確欄位取得 focus，Elements 可逐字比對兩個值。
容易混淆
和 name 混淆；id 負責辨認元素，name 負責送出資料欄位名稱。
namename attribute 白話意思：送出表單時，瀏覽器用它當資料欄位名稱。 展開查看正式定義、範例與驗收證據
正式定義
表單控制項用來建立成功控制項名稱／值配對的 HTML 屬性。
什麼時候用
希望送出後 URL 或後端能知道每個值屬於哪個欄位時。
最小範例
<input id="name" name="name">。
可觀察證據
使用 GET 送出後，網址列出現 ?name=...。
容易混淆
和 id 混淆；沒有 name 的欄位通常不會成為表單送出的欄位。
type／requiredinput type and required 白話意思：type 告訴瀏覽器資料種類，required 表示不能留白。 展開查看正式定義、範例與驗收證據
正式定義
控制表單控制項型別與原生約束驗證的 HTML 屬性。
什麼時候用
需要讓 Email 格式與必填欄位先由瀏覽器檢查時。
最小範例
<input type="email" required>。
可觀察證據
空白或錯誤 Email 送出時，瀏覽器顯示原生驗證提示。
容易混淆
和 placeholder 混淆；placeholder 不會讓欄位變成必填，也不會檢查 Email 格式。

送出與驗證

3 個詞
button／submitbutton type=submit 白話意思：讓訪客按下按鈕送出 form。 展開查看正式定義、範例與驗收證據
正式定義
type 為 submit 的 button 會觸發所屬 form 的原生提交流程。
什麼時候用
表單欄位完成後需要提供明確送出入口時。
最小範例
<button type="submit">送出諮詢</button>。
可觀察證據
Elements 看到 button 位於 form 內；空白送出會先觸發驗證。
容易混淆
和 a 混淆；a 用來前往另一個 URL，submit button 用來送出 form。
action／methodform action and method 白話意思：action 是送去哪裡，method 是用什麼方式送。 展開查看正式定義、範例與驗收證據
正式定義
form 定義提交目標 URL 與 HTTP 方法的 HTML 屬性；本課使用 GET 觀察 URL。
什麼時候用
需要清楚定義靜態表單送出後的可觀察結果時。
最小範例
<form action="contact.html" method="get">。
可觀察證據
填寫完成送出後，網址列出現 contact.html 與欄位 query string。
容易混淆
和 href 混淆；href 是連結目的地，action 是表單提交目的地。
原生驗證native form validation 白話意思：瀏覽器不用 JavaScript 就能先檢查表單。 展開查看正式定義、範例與驗收證據
正式定義
瀏覽器依 required、type 等 HTML 約束阻止不符合條件的表單提交。
什麼時候用
本課只使用 HTML、不接後端也要驗證必要欄位時。
最小範例
type="email" required 會要求 Email 格式且不可空白。
可觀察證據
空白或錯誤格式送出時，瀏覽器顯示驗證提示並保留目前頁面。
容易混淆
和 JavaScript 驗證混淆；本課先看瀏覽器內建行為，不自己寫事件程式。

頁面連結與驗收

3 個詞
a／hrefanchor and href 白話意思：a 是可以點擊的連結，href 說明要前往哪一頁。 展開查看正式定義、範例與驗收證據
正式定義
anchor 元素透過 href 指定超連結目的地；同層頁面可使用相對路徑。
什麼時候用
讓四個 HTML 頁面互相可達時。
最小範例
<a href="services.html">查看服務方案</a>。
可觀察證據
Tab 可以聚焦連結，點擊後網址與 Network 顯示 services.html。
容易混淆
和 form action 混淆；a 導覽頁面，form action 送出欄位資料。
相對路徑relative path 白話意思：從目前 HTML 所在資料夾找另一個檔案。 展開查看正式定義、範例與驗收證據
正式定義
以目前文件 URL 為基準解析連結或資源位置的路徑表示法。
什麼時候用
四頁 HTML 在同一資料夾互相導覽時。
最小範例
href="services.html" 會從目前資料夾尋找 services.html。
可觀察證據
Network 可看到目標 URL 與 200；錯寫成 service.html 時會看到 404。
容易混淆
和檔名本身混淆；檔名正確但資料夾層級錯誤仍會找不到。
Elements／DOMElements panel and DOM 白話意思：Elements 看瀏覽器目前的 HTML 樹，DOM 是瀏覽器解析出的文件樹。 展開查看正式定義、範例與驗收證據
正式定義
DOM 是瀏覽器依 HTML 建立的文件物件模型；Elements 是 DevTools 檢查 DOM 的面板。
什麼時候用
確認導覽、form 巢狀關係與欄位數量時。
最小範例
展開 body，查看 nav、main、form、label 與控制項的階層。
可觀察證據
Elements 的 DOM 階層與原始 HTML 責任一致。
容易混淆
和編輯器裡的原始文字混淆；Elements 顯示的是瀏覽器解析後的目前狀態。

最小例子：先看懂，再複製

這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。

​
<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <title>首頁｜安心服務</title>
</head>
<body>
  <h1>安心服務</h1>
</body>
</html>

Live Lab：逐段讀碼與驗證

每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。

  1. Step 1

    先建立四頁 HTML 文件

    目的
    先讓瀏覽器可以分別開啟首頁、服務、關於與聯絡頁。
    修改位置
    index.html、services.html、about.html、contact.html
    建立四個可直接開啟的頁面，先確認每頁有自己的 title 與 h1。
    預期結果
    四個檔案都能開啟，且本堂焦點是「用相對路徑與表單欄位完成多頁網站骨架」。
    驗收證據
    檔案樹、四個網址與每頁的 title／h1。
    卡住先查
    只檢查檔案副檔名是否真的是 .html，以及目前瀏覽器開啟的檔案名稱。
  2. Step 2

    在四頁加入共用導覽

    目的
    讓每個頁面都能用相同的相對路徑前往其他頁。
    修改位置
    四個 HTML 的 header 區塊
    把同一份 nav 貼到四個 HTML 的 header 內。
    預期結果
    從任一頁點擊導覽都能到達其他三頁，不需要 JavaScript。
    驗收證據
    Tab focus、網址列、Network 的 HTML 200。
    卡住先查
    先比對四個 href 與檔案樹的實際檔名。
  3. Step 3

    建立聯絡表單與三個欄位

    目的
    把聯絡頁的 form 範圍、label 關聯與三個輸入責任建立起來。
    修改位置
    contact.html 的 contact-form 區塊
    加入 form、姓名、Email 與需求欄位，並逐一配對 for／id。
    預期結果
    Elements 看到一個 form 與三組欄位；點擊每個 label 會把焦點移到正確控制項。
    驗收證據
    Elements 的巢狀階層、for／id 對照與 Tab 順序。
    卡住先查
    先只檢查姓名欄位的 for="name" 是否對應 id="name"。
  4. Step 4

    加入原生驗證與送出按鈕

    目的
    讓瀏覽器知道哪些欄位必填，並產生可觀察的 GET 送出結果。
    修改位置
    contact.html 的 form-submit 區塊
    替三個欄位加入 required，並把 submit button 放進 form。
    預期結果
    空白或錯誤 Email 會被瀏覽器阻止；填寫完成後 URL 出現 name、email、message。
    驗收證據
    原生驗證提示、button 的 type、form action／method 與網址列 query string。
    卡住先查
    先查看 button 是否位於 form 內，再逐一確認三個欄位都有 name 與 required。
  5. Step 5

    用 Network 找到相對路徑 404

    目的
    從實際請求證據分辨檔名錯誤與 HTML 結構錯誤。
    修改位置
    index.html 的 primary-action
    在 Network 找到 service.html／404，再把 href 修回 services.html。
    預期結果
    先觀察 service.html 的 404，修正後 services.html 回應 200。
    驗收證據
    Network 404→200、網址列與 index.html 的 href。
    卡住先查
    只複製 Network 的錯誤 URL，逐字與檔案樹比對。
  6. Step 6

    整理四頁與表單驗收證據

    目的
    把檔案、DOM、路徑與原生驗證結果整理成可重現的交付證據。
    修改位置
    四個 HTML 與 contact.html
    依序完成導覽、表單巢狀、for／id、name、required、Email 格式與 GET URL 檢查。
    預期結果
    能用畫面、Elements、Network、Tab 與網址列說明每一個結果。
    驗收證據
    四頁 URL、Network 200、Elements form DOM、Tab focus 與 query string。
    卡住先查
    只先查一項：目前的 contact.html 是否真的有一個 form 包住所有控制項。
操作層級Live Lab 段落導覽：切換六個實驗步驟

讀碼順序：先找入口，再找被引用的檔案，最後用畫面、DOM、Console、Network 或資料結果驗證。

互動問答

先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。

Q1概念理解 「form（form element）」在本堂要解決什麼問題？ 本題線索：form；回到名詞卡與 Elements 看到 input、textarea 與 button 都位於 form 內。 展開解析收合解析

白話解析：

包住一組欄位，說明這些資料要一起送出。 正式來說，HTML 中定義表單控制項範圍與送出設定的元素。

對照位置：

回到名詞卡「form」，再看 Elements 看到 input、textarea 與 button 都位於 form 內。

預期觀察：

你應該能用自己的話說出：要收集姓名、Email 或需求內容時。

常見錯誤：

不要只回答「它是form」；那是重複名詞，不是說明責任。

立即驗證：

開啟 examples/minimal/index.html，依序做「先點擊首頁的服務、關於與聯絡連結，再在 contact.html 依序測試空白送出、錯誤 Email 與完整送出。」並記下畫面或工具證據。

Q2程式碼閱讀 修改指定規則後，你預測畫面會看到什麼？ 本題線索：index.html、services.html、about.html、contact.html；要修改：建立四個可直接開啟的頁面，先確認每頁有自己的 title 與 h1。；觀察：檔案樹、四個網址與每頁的 title／h1。 展開解析收合解析

白話解析：

先看檔案責任，再預測結果。這一步的目的：先讓瀏覽器可以分別開啟首頁、服務、關於與聯絡頁。

對照位置：

對照 Live Lab Step 1，位置是 index.html、services.html、about.html、contact.html；範例內容：<!doctype html> <html lang="zh-Hant"> <head> <meta charset="utf-8"> <title>首頁｜安心服務</title> </head> <body> <h1>安心服務</h1> </body> </html>

預期觀察：

四個檔案都能開啟，且本堂焦點是「用相對路徑與表單欄位完成多頁網站骨架」。

常見錯誤：

如果只改了檔案但沒有結果，先不要重寫全部；只檢查檔案副檔名是否真的是 .html，以及目前瀏覽器開啟的檔案名稱。

立即驗證：

實際操作後檢查 檔案樹、四個網址與每頁的 title／h1。。

Q3概念比較 「form」和「input」在本堂的責任有什麼不同？ 本題線索：比較 form 與 input；操作位置：四個 HTML 的 header 區塊 展開解析收合解析

白話解析：

form：包住一組欄位，說明這些資料要一起送出。；input：讓訪客輸入一行資料的欄位。

對照位置：

對照兩張名詞卡的正式定義：HTML 中定義表單控制項範圍與送出設定的元素。／依 type 屬性表示單行文字、Email 等表單控制項的 HTML 元素。

預期觀察：

你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。

常見錯誤：

不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。

立即驗證：

在 四個 HTML 的 header 區塊 做「把同一份 nav 貼到四個 HTML 的 header 內。」，再用 Tab focus、網址列、Network 的 HTML 200。 比較前後差異。

Q4除錯驗收 如果完成操作後結果不對，你會先從哪一個證據開始查？ 本題線索：四個 HTML 與 contact.html；第一個檢查位置：四頁 URL、Network 200、Elements form DOM、Tab focus 與 query string。 展開解析收合解析

白話解析：

先描述症狀，再提出一個最小假設。本堂常見錯誤是：只截圖畫面，不記錄檔名、URL、狀態碼或 DOM 結構。

對照位置：

對照最後一段 Live Lab：四個 HTML 與 contact.html；檢查方式：只先查一項：目前的 contact.html 是否真的有一個 form 包住所有控制項。

預期觀察：

你要能指出一個具體位置，而不是一次修改很多檔案。

常見錯誤：

不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。

立即驗證：

重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。

除錯對照表：先看證據，再改一處

看到的症狀第一個證據先檢查什麼
導覽打不開網址列與 Network確認 href 與四個 HTML 檔名逐字一致。
看到 404Network 的完整 URL／狀態碼比對 service.html 與檔案樹實際的 services.html。
點 label 沒有焦點Elements 的 for／id確認 label 的 for 和控制項 id 完全相同。
表單沒有送出Elements 的 DOM確認一個 form 包住所有欄位，button type 是 submit。

常見誤解

本堂任務與驗收

完成四頁互相可達的 HTML-only 網站骨架；contact.html 有一個真正包住三組欄位的 form，欄位具備 label、id、name、type、required 與 submit 行為。

官方延伸閱讀