Bài 24: Form control – tạo input, button, checkbox chuẩn giao diện Tailwind

Đây là một bài học thiết thực, gần như “cơm bữa” trong bất kỳ dự án nào, từ trang giới thiệu đến hệ thống phức tạp. Hôm nay bạn sẽ học cách tạo và tùy biến form control bằng Tailwind CSS.

Form là cầu nối giữa người dùng và website – nơi họ đăng ký, đăng nhập, tìm kiếm, đặt hàng, gửi phản hồi…
Tuy nhiên, việc thiết kế form đẹp, dễ dùng và thân thiện không phải lúc nào cũng đơn giản – nhất là khi bạn dùng CSS thuần hoặc framework nặng nề.

Với Tailwind CSS, bạn sẽ thấy mình kiểm soát giao diện form từng chút một mà vẫn giữ code ngắn gọn và sạch sẽ.
Bài hôm nay sẽ giúp bạn:

• Thiết kế form cơ bản gồm input, select, checkbox, button
• Tùy chỉnh giao diện và trạng thái (focus, disabled, hover…)
• Làm form responsive và dễ đọc

---

Input – khung nhập liệu cơ bản

Đây là dạng form phổ biến nhất, dùng để nhập tên, email, số điện thoại…

📋 Copy<label class="block text-gray-700 mb-1">Email</label>
<input type="email"
       class="w-full px-4 py-2 border border-gray-300 rounded 
              focus:outline-none focus:ring-2 focus:ring-blue-500" />

Giải thích:

• px-4 py-2: padding nội dung trong input
• border border-gray-300: viền nhẹ
• rounded: bo góc nhẹ
• focus:outline-none focus:ring-2: hiệu ứng rõ nét khi người dùng focus

Bạn có thể thay focus:ring-blue-500 thành bất kỳ màu nào tuỳ theo thương hiệu.

---

Button – nút bấm hành động

📋 Copy<button class="bg-blue-600 text-white px-4 py-2 rounded 
                hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 
                transition">
  Gửi phản hồi
</button>

Đây là một button cơ bản:

• Có màu nền (bg-blue-600) và chữ trắng
• Bo góc, padding hợp lý
• Hover đổi màu nhẹ
• Focus có viền sáng (focus:ring-*)

Bạn có thể thêm disabled:opacity-50 hoặc cursor-not-allowed để hiển thị trạng thái không tương tác.

---

Select – menu chọn

📋 Copy<label class="block text-gray-700 mb-1">Chọn quốc gia</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded 
                focus:outline-none focus:ring-2 focus:ring-green-500">
  <option>Việt Nam</option>
  <option>Thái Lan</option>
  <option>Indonesia</option>
</select>

Tailwind không can thiệp quá sâu vào phần tử select, nhưng vẫn cho phép bạn style như input.

---

Checkbox – lựa chọn nhiều hoặc bật/tắt

📋 Copy<label class="inline-flex items-center space-x-2">
  <input type="checkbox"
         class="text-blue-600 rounded focus:ring-blue-500" />
  <span class="text-gray-700">Tôi đồng ý với điều khoản</span>
</label>

Điểm hay là bạn có thể:

• Thêm focus:ring-* cho hiệu ứng chọn
• Đặt icon riêng nếu cần (có thể dùng plugin form hoặc style tùy chỉnh)

---

Layout form đầy đủ

📋 Copy<form class="max-w-md mx-auto bg-white p-6 rounded shadow space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Tên của bạn</label>
    <input type="text"
           class="w-full px-4 py-2 border border-gray-300 rounded 
                  focus:outline-none focus:ring-2 focus:ring-indigo-500" />
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
    <input type="email"
           class="w-full px-4 py-2 border border-gray-300 rounded 
                  focus:outline-none focus:ring-2 focus:ring-indigo-500" />
  </div>

  <div>
    <label class="inline-flex items-center">
      <input type="checkbox" class="text-indigo-600 focus:ring-indigo-500" />
      <span class="ml-2 text-gray-700">Tôi đồng ý nhận email từ bạn</span>
    </label>
  </div>

  <button type="submit"
          class="w-full bg-indigo-600 text-white py-2 rounded 
                 hover:bg-indigo-700 transition">
    Gửi thông tin
  </button>
</form>

Form trên có:

• Khoảng cách dòng tốt (space-y-4)
• Responsive đẹp (max-w-md mx-auto)
• Hiệu ứng đầy đủ: hover, focus, bo góc, shadow

---

Mẹo khi làm form với Tailwind

• Dùng focus:ring-* thay cho border-color để hiệu ứng focus rõ và mềm hơn
• Tránh làm form quá hẹp – luôn để w-full + max-w-md hoặc lg
• Tách form thành từng khối logic (nhóm input, checkbox, nút) bằng space-y-*
• Nếu cần nhiều loại input nâng cao (radio, textarea, file…), Tailwind có thể kết hợp với plugin @tailwindcss/forms

---

So sánh với CSS truyền thống

Thành phần	CSS thuần	Tailwind CSS
Input	border: 1px solid #ccc; padding: 8px...	border border-gray-300 px-4 py-2 rounded focus:*
Button	Hover, focus viết riêng	hover:bg-*, focus:ring-*, transition
Checkbox	Style bằng nhiều selector	text-blue-600, focus:ring-*, rounded

---

Tổng kết kiến thức

Thành phần	Class hữu dụng
Input	w-full, px-4 py-2, focus:ring-*
Button	bg-*, hover:bg-*, focus:ring-*, rounded
Checkbox	text-color, focus:ring-*, inline-flex
Layout	max-w-*, space-y-*, shadow, rounded

---

Tóm tắt bài học

• Tailwind giúp bạn tạo form đẹp, dễ dùng, responsive chỉ bằng cách ráp class.
• Bạn có thể tinh chỉnh từng chi tiết nhỏ: padding, màu, bo góc, hiệu ứng focus…
• Không cần viết CSS riêng, bạn vẫn kiểm soát toàn bộ giao diện form theo ý muốn.

---

Bài tiếp theo

Sau khi biết cách tạo form, bạn có thể sẽ muốn ẩn/hiện các khối nội dung theo từng kích thước màn hình, hoặc ẩn những gì không cần trên mobile.

Trong bài 25, bạn sẽ học:

• Các class ẩn/hiện như hidden, block, md:hidden, lg:block…
• Cách kiểm soát visibility linh hoạt theo breakpoint
• Mẹo làm UI gọn gàng trên mọi thiết bị

---

Hẹn bạn trong bài 25: Responsive visibility và breakpoint nâng cao trong Tailwind CSS.