Tìm hiểu về Input dạng ẩn (Hidden Input) trong HTML

Trong lập trình web, đôi khi bạn cần gửi dữ liệu từ phía người dùng về máy chủ mà không muốn người dùng nhìn thấy hoặc chỉnh sửa dữ liệu đó. Đây chính là lúc thẻ <input type="hidden"> phát huy tác dụng.

Input dạng ẩn là gì?

Input dạng ẩn là một loại ô nhập liệu không hiển thị trên giao diện trình duyệt. Mặc dù người dùng không nhìn thấy nó, nhưng giá trị của nó vẫn được gửi đi cùng với các dữ liệu khác trong form khi người dùng nhấn nút "Gửi" (Submit).

Lưu ý quan trọng: Vì dữ liệu nằm trong mã nguồn HTML, người dùng có trình độ kỹ thuật vẫn có thể xem được bằng cách nhấn chuột phải chọn "Kiểm tra" (Inspect). Do đó, tuyệt đối không dùng input ẩn để lưu trữ các thông tin bảo mật như mật khẩu hay mã khóa bí mật.

Tại sao cần sử dụng Input ẩn?

Dưới đây là một số trường hợp phổ biến mà các lập trình viên thường dùng:

  • Lưu ID của sản phẩm hoặc người dùng: Để máy chủ biết chính xác bạn đang thao tác trên mục nào.

  • Lưu mã xác thực (CSRF Token): Để bảo mật form, tránh các yêu cầu giả mạo.

  • Lưu trạng thái: Ví dụ như trang hiện tại mà người dùng đang truy cập để điều hướng sau khi gửi form.

Ví dụ thực tế

Dưới đây là một ví dụ đơn giản về một form gửi thông tin liên hệ, trong đó có một trường ẩn để ghi nhận ID của trang web:


<form action="/submit-data" method="POST">
  <label for="name">Tên của bạn:</label>
  <input type="text" id="name" name="name">

  <!-- Đây là trường ẩn -->
  <input type="hidden" name="page_id" value="12345">

  <button type="submit">Gửi thông tin</button>
</form>

Bảng so sánh: Input thường và Input ẩn

Đặc điểm Input (text) Input (hidden) Hiển thị trên trình duyệt Có Không Người dùng chỉnh sửa Được Không (trực tiếp) Gửi dữ liệu về máy chủ Có Có

Các bước thực hiện

  1. Bước 1: Xác định dữ liệu cần gửi đi nhưng không cần người dùng can thiệp (ví dụ: ID đơn hàng).

  2. Bước 2: Đặt thẻ <input type="hidden"> bên trong thẻ <form>.

  3. Bước 3: Gán thuộc tính name để máy chủ nhận diện dữ liệu.

  4. Bước 4: Gán thuộc tính value để chứa dữ liệu bạn muốn truyền đi.

Tóm tắt

Input ẩn là công cụ hữu ích để truyền tải dữ liệu "ngầm" trong các biểu mẫu web. Nó giúp hệ thống vận hành trơn tru hơn mà không làm phiền người dùng với những thông tin kỹ thuật không cần thiết.

Kết luận

Bạn đã biết cách tạo và sử dụng <input type="hidden">. Hãy nhớ sử dụng nó đúng mục đích, ưu tiên sự tiện lợi nhưng luôn cẩn trọng với các vấn đề bảo mật dữ liệu nhạy cảm. Bạn có thể xem thêm ví dụ thực tế tại đây:

See the Pen HTML Form - Ô nhập liệu INPUT dạng ẩn by kellyfire611 (@kellyfire611) on CodePen.