Day-12 HTML網頁設計的範例-2

2025 iThome 鐵人賽

DAY 12

生成式 AI

30天製作生成式AI的互動網頁專案系列第 12 篇

17th鐵人賽

max

2025-09-10 21:47:58

52 瀏覽

分享至

今天來講解一下昨天發的網頁設計的範例的部分程式碼講解與分析。

這段程式碼是一個基礎的 HTML 範例，主要用來建立一個可以讓使用者輸入問題並提交至後端處理的網頁。首先在 head 區塊中設定了語言屬性為英文 (lang="en") 以及字元編碼為 UTF-8，確保頁面能正確顯示中文與其他特殊符號。標題 title 設為 "Submit Form"，當頁面在瀏覽器中打開時，這個文字會出現在標籤列上。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Submit Form</title>
</head>

進入 body 部分，首先使用一個 div 置中顯示標題 h1，內容為「PHI-4網頁問答測試」，說明此頁面的用途。接著另一個 div 裡面放置 form 表單，id="userForm" 可供 JavaScript 操作，action="/page1" 代表表單送出後會將資料提交到後端 /page1 的路由，method="post" 表示使用 POST 方法傳送資料，適合用於提交文字或隱私相關內容。在表單中有一個 label 標籤和一個 input 輸入框，使用者可以在輸入框內輸入問題，並透過 button type="submit"送出 button 將內容提交。這裡的 required 屬性確保使用者必須輸入文字才能送出，避免傳送空白資料。

<body>
    <div style="width: 100vw;text-align: center;">
    <h1>PHI-4網頁問答測試</h1>
    </div>
    <div style="width: 100vw;text-align: center;">
      <form id="userForm" action="/page1" method="post" >
          <label for="Q" style="width: 30%;width: 30%;height : 20%;">提問：</label>
          <input type="text" id="Q" name="Q" style="width:70%;height : 10%;" required><br><br>
          <button type="submit" style="width:30%;height : 10%;">送出</button>
          </form>
    </div>

之後頁面顯示 h2PHI-4回應：/h2 作為回應區的標題。底下的 div 透過 id="response" 作為回應內容的容器，並使用淡藍色背景 (background-color: #ABBAEA;) 讓顯示更清楚。由於 id 已設定，後端或 JavaScript 可以將模型的回答動態填入這個區域。

<h2>PHI-4回應：</h2>
    <div style="width: 80%;text-align: center;margin: auto;">
      <div style="background-color: #ABBAEA;" id="response"></div>
    </div>

整體來說，這段程式碼結構簡單清晰，核心功能是提供一個輸入框，讓使用者提交問題，並在下方區域顯示 PHI-4 的回應。未來可以再結合 CSS 美化介面，或使用 JavaScript 進行非同步請求（AJAX/Fetch），讓體驗更加流暢。

<script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('userForm');  // 確保這裡選擇到正確的表單
            const responseDiv = document.getElementById('response');

            form.addEventListener('submit', function (event) {
                event.preventDefault(); // 阻止預設提交（刷新）

                const formData = new FormData(form); // 將表單資料收集

                fetch('/page1', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.text())
                .then(data => {
                    responseDiv.innerText = data;  // 顯示伺服器回應
                })
                .catch(error => {
                    responseDiv.innerText = '錯誤：' + error;  // 顯示錯誤
                });
            });
        });
    </script>