BÀI 6: XÂY DỰNG FORM (BIỂU MẪU) HIỆN ĐẠI

Tháng Một 8, 2026
 |  Không có bình luận

6.1. Khởi tạo Form và Ô nhập liệu cơ bản

6.1.1. Thẻ bao <form>

  • Chức năng: Là cái vỏ bọc chứa tất cả các ô nhập liệu. Nếu không có thẻ này, nút “Gửi” sẽ không hoạt động.

  • Cú pháp:

    HTML
     
    <form action="xuly.php" method="POST">
    </form>

  • Giải thích thuộc tính:

    • action: Địa chỉ nơi dữ liệu sẽ được gửi đến (Bài này để trống hoặc # vì chưa học PHP).

    • method="POST": Gửi dữ liệu ngầm (bảo mật, dùng cho mật khẩu).

    • method="GET": Gửi dữ liệu hiện lên thanh địa chỉ (dùng cho tìm kiếm).

6.1.2. Ô nhập văn bản (type="text") và Mật khẩu (type="password")

  • Ví dụ thực hành: Làm form đăng nhập.

    HTML
     
    <label>Tên đăng nhập:</label>
<input type="text" placeholder="Nhập tên của bạn..."> <br>

<label>Mật khẩu:</label>
<input type="password" placeholder="Nhập mật khẩu...">

  • Giải thích:

    • placeholder: Dòng chữ mờ gợi ý (sẽ biến mất khi người dùng gõ phím).

    • type="password": Biến ký tự thành dấu chấm tròn (••••) để không bị lộ.

6.2. Các loại lựa chọn (Checkbox & Radio)

6.2.1. Nút chọn duy nhất (type="radio")

  • Đặc điểm: Chỉ được chọn 1 trong nhiều (Ví dụ: Giới tính Nam hoặc Nữ).

  • Quy tắc bắt buộc: Các ô radio phải có chung tên (name) thì mới có tác dụng loại trừ nhau.

  • Ví dụ:

    HTML
     
    <label>Giới tính:</label>
<input type="radio" name="gioi-tinh" value="nam" checked> Nam
<input type="radio" name="gioi-tinh" value="nu"> Nữ

    • Giải thích: Thuộc tính checked để mặc định chọn sẵn 1 cái.

6.2.2. Nút chọn nhiều (type="checkbox")

  • Đặc điểm: Được chọn nhiều cái cùng lúc (Ví dụ: Sở thích).

  • Ví dụ:

    HTML
     
    <label>Sở thích:</label>
<input type="checkbox"> Đá bóng
<input type="checkbox"> Nghe nhạc

6.3. Danh sách thả xuống (<select>)

  • Chức năng: Tiết kiệm diện tích khi có quá nhiều lựa chọn (Ví dụ: Chọn Tỉnh/Thành phố).

  • Cú pháp:

    HTML
     
    <label>Quê quán:</label>
<select>
    <option>Hà Nội</option>
    <option>TP. Hồ Chí Minh</option>
    <option>Đà Nẵng</option>
</select>

6.4. Các điều khiển HTML5 hiện đại (Rất quan trọng) HTML5 cung cấp các kiểu nhập liệu thông minh, đặc biệt hữu ích trên điện thoại (tự bật bàn phím số, tự hiện lịch).

  • Chọn ngày tháng (type="date"): Hiển thị lịch để chọn ngày.

    • <input type="date">

  • Nhập Email (type="email"): Tự động kiểm tra xem có ký tự @ hay không.

    • <input type="email" required>

  • Nhập số (type="number"): Chỉ cho nhập số, có nút tăng giảm.

    • <input type="number" min="1" max="100"> (Chỉ nhập từ 1 đến 100).

  • Hộp văn bản lớn (<textarea>): Dùng để viết nội dung dài (Ghi chú, Lời nhắn).

    • <textarea rows="5" cols="30"></textarea>

6.5. Nút bấm (Buttons)

  • <button type="submit">Đăng ký</button>: Nút gửi dữ liệu đi (mặc định).

  • <button type="reset">Nhập lại</button>: Xóa trắng form để nhập lại từ đầu.

BÀI TẬP

Bài tập 6.1: Tạo Form Đăng nhập (Mức độ dễ).

Hình mẫu bài tập

  • Yêu cầu: Tạo một khung đăng nhập gồm Username, Password và nút Đăng nhập.

  • Nâng cao: Sử dụng CSS (Box Model đã học ở Bài 3) để đóng khung form, căn giữa màn hình cho đẹp.

Cây thư mục

Bai61/
│
├── index.html # Trang chứa form đăng nhập
└── css/
└── style.css # File CSS định dạng giao diện

Gợi ý làm bài:

file index.html

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Form Đăng nhập</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="login-container">
    <h2>Đăng nhập</h2>
    <form>
      <label for="username">Username</label>
      <input type="text" id="username" name="username" placeholder="Nhập tên đăng nhập">

      <label for="password">Password</label>
      <input type="password" id="password" name="password" placeholder="Nhập mật khẩu">

      <button type="submit">Đăng nhập</button>
    </form>
  </div>
</body>
</html>

File css/style.css

/* Căn giữa toàn bộ form */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Khung form */
.login-container {
  background: #fff;
  padding: 30px;
  border-radius: 10px; /* Bo góc */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Bóng mờ */
  width: 300px;
}

/* Tiêu đề */
.login-container h2 {
  text-align: center;
  margin-bottom: 20px;
}

/* Label và input */
.login-container label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.login-container input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box; /* Box Model */
}

/* Nút đăng nhập */
.login-container button {
  width: 100%;
  padding: 10px;
  background: #007bff;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.login-container button:hover {
  background: #0056b3;
}
 

✨ Với đoạn code này:

  • Form đăng nhập có Username, Password và nút Đăng nhập.

  • CSS sử dụng Box Model để căn chỉnh, bo góc, thêm bóng mờ.

  • Toàn bộ form được căn giữa màn hình, tạo cảm giác chuyên nghiệp.

Bài tập 6.2: Tạo Phiếu Đăng ký thành viên (Mức độ trung bình)

  • Yêu cầu: Kết hợp tất cả các thẻ đã học để làm form đăng ký gồm:

    1. Họ và tên (Text, bắt buộc nhập required).

    2. Ngày sinh (Date).

    3. Giới tính (Radio: Nam/Nữ).

    4. Email (Type email).

    5. Mật khẩu (Password).

    6. Tỉnh thành (Select box).

    7. Nút Đăng ký (Màu xanh, bo tròn góc).

Bài tập 6.3: Form đặt hàng (Mức độ nâng cao)

  • Tình huống: Khách hàng đặt mua trà sữa.

  • Yêu cầu:

    1. Chọn loại trà sữa (Select box).

    2. Số lượng (Type number, min=1).

    3. Topping thêm (Checkbox: Trân châu, Thạch, Pudding – Khách có thể chọn hết).

    4. Ghi chú cho quán (Textarea).

    5. Sử dụng thẻ <fieldset> và <legend> để tạo khung bao quanh tiêu đề “Thông tin đặt hàng” cho chuyên nghiệp.

    • Gợi ý code:

      HTML

       
      <fieldset>
    <legend>Đơn đặt hàng</legend>
    </fieldset>

Câu hỏi ôn tập

  1. Câu hỏi: Tại sao khi làm phần chọn “Giới tính” (Radio button), nếu không đặt thuộc tính name giống nhau thì bị lỗi gì?

    • Trả lời: Nếu khác tên (name), người dùng sẽ chọn được cả “Nam” và “Nữ” cùng lúc. Phải cùng tên để trình duyệt hiểu đây là một nhóm chỉ được chọn 1.

  2. Câu hỏi: Sự khác biệt giữa input type="text" và textarea là gì?

    • Trả lời: input type="text" chỉ nhập được 1 dòng ngắn (tên, tiêu đề). textarea nhập được nhiều dòng (nội dung bài viết, ghi chú).

  3. Câu hỏi: Thuộc tính required có tác dụng gì?

    • Trả lời: Bắt buộc người dùng phải nhập dữ liệu vào ô đó. Nếu để trống mà bấm nút Gửi, trình duyệt sẽ hiện thông báo lỗi và chặn lại.

  4. Câu hỏi: Tại sao nên dùng type="number" cho ô nhập “Tuổi” hoặc “Số lượng”?

    • Trả lời: Giúp tránh lỗi người dùng nhập chữ cái vào. Ngoài ra, trên điện thoại, bàn phím số sẽ tự động hiện lên giúp nhập nhanh hơn.