<input type="hidden">

Giá trị

Thuộc tính value của phần tử <input> chứa chuỗi chứa dữ liệu ẩn bạn muốn đưa vào khi biểu mẫu được gửi lên máy chủ. Điều này cụ thể không thể được chỉnh sửa hoặc nhìn thấy bởi người dùng qua giao diện người dùng, mặc dù bạn có thể chỉnh sửa giá trị qua công cụ phát triển trình duyệt.

Thuộc tính bổ sung

Ngoài các thuộc tính chung cho tất cả các phần tử <input>, đầu vào hidden cung cấp các thuộc tính sau.

name

Đây thực sự là một trong các thuộc tính chung, nhưng nó có ý nghĩa đặc biệt cho đầu vào ẩn. Thông thường, thuộc tính name hoạt động trên đầu vào ẩn giống như trên bất kỳ đầu vào nào khác. Tuy nhiên, khi biểu mẫu được gửi, đầu vào ẩn có name được đặt thành _charset_ sẽ tự động được báo cáo với giá trị được đặt thành mã hóa ký tự dùng để gửi biểu mẫu.

Sử dụng đầu vào ẩn

Như đã đề cập ở trên, đầu vào ẩn có thể được sử dụng ở bất kỳ đâu khi bạn muốn bao gồm dữ liệu mà người dùng không thể nhìn thấy hoặc chỉnh sửa cùng với biểu mẫu khi nó được gửi lên máy chủ. Hãy xem một số ví dụ minh họa cách sử dụng.

Theo dõi nội dung đã chỉnh sửa

Một trong những cách sử dụng phổ biến nhất cho đầu vào ẩn là theo dõi bản ghi cơ sở dữ liệu nào cần được cập nhật khi biểu mẫu chỉnh sửa được gửi. Quy trình làm việc điển hình trông như thế này:

1. Người dùng quyết định chỉnh sửa một số nội dung họ có quyền kiểm soát, chẳng hạn như bài đăng blog hoặc mục sản phẩm. Họ bắt đầu bằng cách nhấn nút chỉnh sửa.
2. Nội dung cần chỉnh sửa được lấy từ cơ sở dữ liệu và tải vào biểu mẫu HTML để cho phép người dùng thực hiện thay đổi.
3. Sau khi chỉnh sửa, người dùng gửi biểu mẫu và dữ liệu được cập nhật được gửi lại máy chủ để cập nhật vào cơ sở dữ liệu.

Ý tưởng ở đây là trong bước 2, ID của bản ghi đang được cập nhật được giữ trong đầu vào ẩn. Khi biểu mẫu được gửi trong bước 3, ID tự động được gửi lại máy chủ cùng với nội dung bản ghi. ID cho phép thành phần phía máy chủ của trang biết chính xác bản ghi nào cần được cập nhật với dữ liệu đã gửi.

Bạn có thể xem ví dụ đầy đủ về điều này trong phần Ví dụ bên dưới.

Cải thiện bảo mật trang web

Đầu vào ẩn cũng được dùng để lưu trữ và gửi mã thông báo bảo mật hoặc bí mật, nhằm mục đích cải thiện bảo mật trang web. Ý tưởng cơ bản là nếu người dùng đang điền vào biểu mẫu nhạy cảm, chẳng hạn như biểu mẫu trên trang web ngân hàng để chuyển tiền sang tài khoản khác, bí mật họ được cung cấp sẽ chứng minh họ là ai họ nói, và họ đang sử dụng đúng biểu mẫu để gửi yêu cầu chuyển khoản.

Điều này sẽ ngăn người dùng độc hại tạo biểu mẫu giả, giả vờ là ngân hàng và gửi email biểu mẫu đó đến người dùng không nghi ngờ để lừa họ chuyển tiền đến nơi sai. Loại tấn công này được gọi là Cross Site Request Forgery (CSRF); hầu hết mọi framework phía máy chủ uy tín đều sử dụng bí mật ẩn để ngăn chặn các cuộc tấn công như vậy.

Kiểm tra hợp lệ

Đầu vào ẩn không tham gia vào kiểm tra ràng buộc; chúng không có giá trị thực sự cần ràng buộc.

Ví dụ

Hãy xem cách chúng ta có thể triển khai phiên bản biểu mẫu chỉnh sửa đã mô tả trước đó (xem Theo dõi nội dung đã chỉnh sửa), sử dụng đầu vào ẩn để nhớ ID của bản ghi đang được chỉnh sửa.

HTML của biểu mẫu chỉnh sửa có thể trông như thế này:

<form>
  <div>
    <label for="title">Post title:</label>
    <input type="text" id="title" name="title" value="My excellent blog post" />
  </div>
  <div>
    <label for="content">Post content:</label>
    <textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea>
  </div>
  <div>
    <button type="submit">Update post</button>
  </div>
  <input type="hidden" id="postId" name="postId" value="34657" />
</form>

Hãy cũng thêm một số CSS:

html {
  font-family: sans-serif;
}

form {
  width: 500px;
}

div {
  display: flex;
  margin-bottom: 10px;
}

label {
  flex: 2;
  line-height: 2;
  text-align: right;
  padding-right: 20px;
}

input,
textarea {
  flex: 7;
  font-family: sans-serif;
  font-size: 1.1rem;
  padding: 5px;
}

textarea {
  height: 60px;
}

Máy chủ sẽ đặt giá trị của đầu vào ẩn có ID postID thành ID của bài đăng trong cơ sở dữ liệu trước khi gửi biểu mẫu đến trình duyệt người dùng và sẽ sử dụng thông tin đó khi biểu mẫu được trả về để biết bản ghi cơ sở dữ liệu nào cần cập nhật với thông tin đã sửa đổi. Không cần scripting trong nội dung để xử lý điều này.

Kết quả trông như thế này:

Khi được gửi, dữ liệu biểu mẫu được gửi lên máy chủ sẽ trông như thế này:

title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657

Mặc dù đầu vào ẩn không thể nhìn thấy hoàn toàn, dữ liệu của nó vẫn được gửi.

Tóm tắt kỹ thuật

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Hướng dẫn biểu mẫu HTML
• <input> và giao diện HTMLInputElement mà nó dựa trên