HTML & CSS เบื้องต้น

Python Fullstack ต้องรู้ Frontend ด้วย

ถ้าสาย JS ใช้ภาษาเดียวทั้งสองฝั่ง สาย Python ต้องแตะ HTML/CSS/JS เล็กน้อยฝั่ง Frontend แต่ไม่ต้องกลัว — ขอแค่พื้นฐานพอให้สร้างหน้าเว็บโต้ตอบกับ API ของคุณได้

💡 ในบทนี้เราเน้น "พอใช้" — หากอยากลึกให้กลับไปอ่านโมดูล Frontend ของสาย JS ได้

HTML — โครงสร้าง

หน้าเว็บเริ่มจาก HTML:

<!DOCTYPE html>
<html lang="th">
  <head>
    <meta charset="UTF-8" />
    <title>ร้านค้า</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>🛒 ร้านค้าของฉัน</h1>
    <ul id="product-list"></ul>

    <form id="add-form">
      <input name="name" placeholder="ชื่อสินค้า" required />
      <input name="price" type="number" placeholder="ราคา" required />
      <button>เพิ่ม</button>
    </form>

    <script src="app.js"></script>
  </body>
</html>

แท็กที่ใช้บ่อย

แท็ก	ใช้ทำ
`<h1>`–`<h6>`	หัวข้อ
`<p>`	ย่อหน้า
`<a href>`	ลิงก์
`<img src>`	รูป
`<ul>`/`<li>`	ลิสต์
`<div>` / `<span>`	กล่องจัดกลุ่ม
`<input>` / `<form>` / `<button>`	รับข้อมูล

CSS — การตกแต่ง

body {
  font-family: sans-serif;
  max-width: 500px;
  margin: 40px auto;
  background: #f5f5f5;
}

h1 {
  color: #2563eb;
}

.card {
  background: white;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

input, button {
  padding: 8px;
  margin: 4px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

button {
  background: #2563eb;
  color: white;
  cursor: pointer;
}

จัดวางด้วย Flexbox

.row {
  display: flex;
  justify-content: space-between;   // กางสุดซ้าย-ขวา
  align-items: center;
}

JavaScript (นิดหน่อย) — โต้ตอบกับ API

เราใช้ fetch() เรียก API ของ FastAPI:

ดึงและแสดงสินค้า

async function loadProducts() {
  const res = await fetch("http://localhost:8000/products");
  const products = await res.json();

  const list = document.getElementById("product-list");
  list.innerHTML = "";
  for (const p of products) {
    const li = document.createElement("li");
    li.textContent = `${p.name} — ${p.price} บาท`;
    list.appendChild(li);
  }
}

loadProducts();

ส่งข้อมูลจากฟอร์ม

document.getElementById("add-form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const form = e.target;
  const name = form.name.value;
  const price = Number(form.price.value);

  await fetch("http://localhost:8000/products", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name, price }),
  });

  form.reset();
  loadProducts();
});

ทางเลือก: เทมเพลตฝั่งเซิร์ฟเวอร์

นอกจากเขียน HTML + JS แยก ยังมีวิธี render HTML จาก Python โดยตรง:

Jinja2 + Flask/Django — เขียน HTML ที่ฝัง logic ของ Python ได้
FastAPI + Jinja2 — ก็ทำได้

แต่แนวโน้มสมัยใหม่นิยม แยก Backend (API) กับ Frontend (เช่น React) ชัดเจน เพราะดูแลง่ายและขยายได้ดีกว่า

สรุป

ภาษา	หน้าที่
HTML	โครงสร้างเนื้อหา
CSS	ตกแต่ง สี/ขนาด/จัดวาง
JavaScript	โต้ตอบ + เรียก API
`fetch()`	เรียก API ของ FastAPI

บทหน้า: รวมทุกอย่างเป็น โปรเจกต์ Fullstack ของคุณ 🏆