สำรวจหน้าร้าน: ทัวร์ไฟล์ Index.html

ไฟล์นี้คือ "หน้าตา" ของ Web App ของเรา มาดูกันว่าแต่ละส่วนประกอบทำหน้าที่อะไร


<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- Bootstrap 5 CSS -->
    <link href="..." rel="stylesheet">
  </head>
  <body>
    <div class="container mt-5">
      <h1>Medication Safety Reporting Form</h1>
      <form id="reportForm">
        <!-- Input fields go here -->
        <div class="mb-3">
          <label for="EventDate">...</label>
          <input type="date" id="EventDate" name="EventDate">
        </div>
        <!-- More fields like select, textarea -->
        <button type="submit">Submit Report</button>
      </form>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="..."></script>
    <script>
      // JavaScript code for form submission
      document.getElementById("reportForm").addEventListener(...)
    </script>
  </body>
</html>

ส่วน <form>

นี่คือ "กระดาษฟอร์ม" จริงๆ
เป็นที่อยู่ของช่องกรอกข้อมูล (`input`, `select`) และปุ่ม Submit ทั้งหมด

ส่วน <script>

คือ "สายไฟ" ที่เราเพิ่งติดตั้ง
ทำหน้าที่เชื่อมปุ่ม Submit กับฟังก์ชัน `saveData` ที่หลังบ้าน ทำให้ข้อมูลถูกส่งไปได้

ย้อนกลับ (Code.gs) เริ่มแก้ไขโค้ดกัน