Bài 28. Thực hành tổng hợp

 

Bài 28. Thực hành tổng hợp

🎯 1. Mục tiêu bài học

👉 Tạo được một trang web hoàn chỉnh có biểu mẫu

✔ Nhập thông tin
✔ Chọn dữ liệu
✔ Gửi dữ liệu

👉 Nhớ nhanh:
Trang web = Nội dung + Biểu mẫu

---

🧩 2. Cấu trúc cơ bản

<form>
  ... nội dung ...
</form>

👉 Ghi nhớ:
form = khung chứa toàn bộ biểu mẫu

---

🧱 3. Các thành phần chính

🔹 Nhập thông tin

• <input type="text"> → nhập chữ
• <input type="password"> → nhập mật khẩu

👉 Nhớ:
text = chữ | password = ẩn

---

🔹 Chọn dữ liệu

• <input type="radio"> → chọn 1
• <input type="checkbox"> → chọn nhiều

👉 Nhớ:
radio = 1 | checkbox = nhiều

---

🔹 Danh sách chọn

<select>
  <option>...</option>
</select>

👉 Dùng khi có nhiều lựa chọn (lớp, tỉnh…)

---

🔹 Nút bấm

• submit → gửi
• reset → xóa

👉 Nhớ:
submit = gửi | reset = xóa

---

⚙️ 4. Thuộc tính quan trọng

• action → nơi gửi dữ liệu
• method → cách gửi

👉 Nhớ:

• GET → đơn giản
• POST → an toàn hơn

---

💡 5. Ví dụ hoàn chỉnh (dễ hiểu nhất)

<form>
  Họ tên: <input type="text"><br>
  Mật khẩu: <input type="password"><br>

  Giới tính:
  <input type="radio" name="gt"> Nam
  <input type="radio" name="gt"> Nữ<br>

  Sở thích:
  <input type="checkbox"> Game
  <input type="checkbox"> Nhạc<br>

  <input type="submit" value="Gửi">
  <input type="reset" value="Xóa">
</form>

---

🧠 6. CÔNG THỨC HỌC NHANH

👉 Form → Input → Chọn → Gửi

---

🚀 7. SƠ ĐỒ NHỚ NHANH

• Form
• Input
• text
• password
• Lựa chọn
• radio (1)
• checkbox (nhiều)
• Danh sách
• select
• Nút 
• submit
• reset

• ---

• 🎯 8. TÓM TẮT 1 DÒNG

👉 Biểu mẫu web giúp nhập – chọn – gửi dữ liệu bằng thẻ form và input