Bài viết này giải thích các kỹ thuật và nguyên tắc về cách các nhà phát triển có thể sử dụng phần tử này và mọi thứ liên quan đến phần tử đó. Hãy tiếp tục và tìm hiểu kỹ về nó để tìm hiểu cách sử dụng nó để tạo lợi thế cho mã của bạn
nội dung
- Đầu vào ẩn trong HTML là gì?
- Đầu vào ẩn hoạt động như thế nào?
- Thành phần. Cách áp dụng nó trong biểu mẫu HTML của bạn
- – Ví dụ mã hóa
- - Giải trình
- Các thành phần và thuộc tính của biểu mẫu
- Sử dụng các phần tử biểu mẫu ẩn HTML
- – Lấy địa chỉ IP của khách hàng tiềm năng
- – Theo dõi cập nhật hồ sơ cơ sở dữ liệu về nội dung có thể chỉnh sửa
- – Ví dụ mã hóa
- Cách cập nhật các giá trị
- Mối quan tâm về an toàn
- Phần kết luận
Đầu vào ẩn trong HTML là gì?
Đầu vào ẩn trong HTML là một phần tử được xác định bởi một trường đầu vào. Trường đầu vào thường được sử dụng để lưu trữ các bản ghi cơ sở dữ liệu ở dạng mã văn bản tùy ý mà người dùng cuối không thể nhìn thấy hoặc sửa đổi thông qua giao diện người dùng
Đầu vào ẩn hoạt động như thế nào?
Quá trình hoạt động thông qua DOMString chứa thuộc tính giá trị của dữ liệu ẩn trong thuộc tính giá trị của phần tử . Dưới đây là một ví dụ mã cơ bản của các phần tử biểu mẫu ẩn html để bạn có thể bắt đầu nắm bắt chức năng của nó.
Enter with Your Name
< . php”>
Enter Your Name:
Thuộc tính giá trị chỉ định giá trị mặc định của trường ẩn biểu mẫu HTML và thuộc tính giá trị đặt hoặc trả về giá trị của thuộc tính giá trị của trường đầu vào ẩn
Trước khi gửi biểu mẫu tới trình duyệt của người dùng, máy chủ sẽ đặt giá trị đầu vào ẩn có ID “postID” thành tên “postID” thành ID của bài đăng trong cơ sở dữ liệu của nó. Thông tin này sẽ được sử dụng khi trường biểu mẫu ẩn được trả về để xác định bản ghi cơ sở dữ liệu nào sẽ cập nhật với thông tin đã sửa đổi. Để quản lý chức năng này, không cần viết script trong nội dung
Thành phần. Cách áp dụng nó trong biểu mẫu HTML của bạn
Phần tử đầu vào bị ẩn trong HTML được áp dụng cho thuộc tính type bằng cách sử dụng giá trị ẩn của loại đầu vào. Nội dung tĩnh thường đi kèm với thuộc tính giá trị này, nhưng tác giả có quyền sử dụng tập lệnh nếu họ cho là đúng. Dưới đây là quy trình từ đầu đến cuối về cách thực hiện
- Đầu tiên, tạo một Tài liệu HTML với một thẻ đầu vào
- Tiếp theo, chèn thuộc tính type đi cùng với thẻ đầu vào
- Cuối cùng, thêm giá trị “hidden” vào thuộc tính type
Khi bạn cộng tất cả lại, cú pháp sẽ như thế này.
– Ví dụ mã hóa
To keep the input type hidden, developers would have to specify the hidden input field’s default value. The value property of the element stores a DOMString that contains the hidden data. Below is a coding example to give you a clear picture of using this field:
Chèn .
in the Form Field Below.
h1 {
color. xanh dương;
}
body {
text-align. trung tâm;
}
A Basic Tutorial on HTML Hidden Input
Insert the HTML Hidden Input
in the Form Field Below
Name:
- Giải trình
Trường ẩn biểu mẫu HTML hướng dẫn trình duyệt cung cấp mã hóa ký tự được sử dụng để gửi biểu mẫu dưới dạng giá trị cho trường khi thuộc tính tên nhận phiên bản không phân biệt chữ hoa chữ thường của giá trị “_charset_. ” Ngoài ra, thuộc tính giá trị phải được bỏ qua trong trường hợp này
Bây giờ, đây là thời điểm tốt để chỉ ra rằng vì các đầu vào ẩn không có giá trị thực để ràng buộc, nên chúng không thể đi cùng với Xác thực ràng buộc. Tương tự, bạn sẽ không thể tạo tiêu điểm cho các đầu vào ẩn, kể cả với JS
Các thành phần và thuộc tính của biểu mẫu
Trường ẩn tương tự như trường văn bản ở chỗ chúng cho phép nhà phát triển viết bất cứ thứ gì họ muốn. Trường ẩn được sử dụng cho nhiều chức năng, bao gồm ID trang, ID khách hàng, mật khẩu, v.v. Vì vậy, tập lệnh phía máy chủ có thể được sử dụng để thu thập dữ liệu trường ẩn, giống như bất kỳ dạng dữ liệu trường nào khác
Thuộc tính tên được sử dụng thường xuyên nhất để xác định các đối tượng để tham khảo. Điều này đặt một trường ẩn bên trong biểu mẫu HTML, trường này có thể được tham chiếu bằng cách sử dụng tên của nó là “hidfield” và có giá trị là “ID giỏ hàng. ” Nó có một ý nghĩa đặc biệt dành cho các đầu vào ẩn
Thông thường, thuộc tính tên hoạt động trên các đầ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ó tên đượ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ự được sử dụng để gửi biểu mẫu
Sử dụng các phần tử biểu mẫu ẩn HTML
Bây giờ, bạn sẽ nói gì nếu được yêu cầu xác định tiện ích của phần tử đầu vào ẩn?
Đầu vào ẩn được sử dụng rộng rãi để truyền dữ liệu riêng tư cùng với biểu mẫu, trong đó tương tác của người dùng là không mong muốn. Hơn nữa, các nhà phát triển có thể sử dụng chúng ở bất kỳ đâu trong biểu mẫu HTML của họ trên các trang web động. Một ví dụ rõ ràng về tiện ích là Unique Security Tokens. Hãy cùng khám phá những cách sử dụng khác của đầu vào ẩn
– Lấy địa chỉ IP của khách hàng tiềm năng
Khi khách hàng tiềm năng điền vào biểu mẫu yêu cầu trên trang web của nhà cung cấp dịch vụ, nhà cung cấp muốn sử dụng một đoạn PHP để lấy địa chỉ IP của họ. Cũng rất hữu ích khi biết URL của trang web giới thiệu được truy cập nhiều nhất của khách hàng tiềm năng. Với sự trợ giúp của đầu vào ẩn, nhà phát triển có thể tạo các trường biểu mẫu ẩn để thu thập dữ liệu nhưng không hiển thị dữ liệu đó
– Theo dõi cập nhật hồ sơ cơ sở dữ liệu về nội dung có thể chỉnh sửa
Đầu vào ẩn được sử dụng để theo dõi các mục nhập cơ sở dữ liệu và những gì phải thay đổi khi biểu mẫu chỉnh sửa được gửi
Nội dung có thể chỉnh sửa, chẳng hạn như danh mục sản phẩm hoặc bài đăng trên blog, được lấy từ cơ sở dữ liệu và được tải vào trường ẩn biểu mẫu HTML. Người dùng có thể thực hiện các thay đổi và gửi biểu mẫu sau khi sửa đổi nó và dữ liệu mới được truyền trở lại máy chủ để được cập nhật trong cơ sở dữ liệu
– Ví dụ mã hóa
Hãy cùng xem một ví dụ viết mã về việc sử dụng các phần tử biểu mẫu ẩn
Product Name
Product Name
An artisan wooden chair, upcycled from old sheesham furniture.
Update Product
Đầu vào ẩn lưu trữ ID của tài liệu đang được cập nhật. ID được tự động gửi lại máy chủ với nội dung bản ghi khi người dùng gửi biểu mẫu đã sửa đổi. Ngoài ra, nó cho thành phần phía máy chủ của trang web biết bản ghi nào cần được cập nhật bằng cách sử dụng dữ liệu được cung cấp trong trường ẩn biểu mẫu HTML
Cách cập nhật các giá trị
Nhà phát triển có thể đặt lại các giá trị trong trường nhập HTML bằng cách sử dụng công cụ dành cho nhà phát triển hoặc chức năng “Xem nguồn” của trình duyệt cụ thể
Đây là nơi phương thức tài liệu getElementById[] xuất hiện. Nó áp dụng khi trả về các phần tử có ID đã được chỉ định cho hàm. Hơn nữa, chức năng này là một phương thức HTML DOM phổ biến để thay đổi giá trị của một phần tử cụ thể hoặc truy xuất một phần tử cụ thể trong thiết kế web. Vì ID phần tử phải là duy nhất nếu được cung cấp, chúng là một cách thuận tiện để truy cập nhanh vào một phần tử
Mối quan tâm về an toàn
Phần lớn, các trường nhập ẩn không có tiêu chuẩn bảo mật tốt nhất. Điều này là do thực tế là đầu vào dạng ẩn lưu trữ thông tin trạng thái chương trình ở phía máy khách chứ không phải máy chủ. Điều này làm cho đầu vào dễ bị tổn thương hơn, vì bên thứ ba có thể chỉ cần sửa đổi nó
Mặt khác, đầu vào ẩn thậm chí có thể cải thiện tính bảo mật của trang web thông qua bí mật hoặc mã thông báo bảo mật. Chẳng hạn, khi người dùng đang thực hiện giao dịch ngân hàng trực tuyến và điền vào một biểu mẫu nhạy cảm, một bí mật sẽ rất hữu ích để xác thực danh tính của họ để hoàn tất giao dịch
Giá trị của đầu vào ẩn là nó bảo toàn bí mật được kết nối với dữ liệu và tự động bao gồm nó khi biểu mẫu được truyền đến máy chủ. Để thực sự bảo mật trang web của bạn, bạn phải sử dụng các bí mật được thiết kế tốt
Phần kết luận
Đi đến kết luận, đầu vào ẩn trong HTML là một cách chức năng để bao gồm dữ liệu mà người dùng không thể xem hoặc thay đổi với biểu mẫu khi nó được gửi đến máy chủ. Bài viết đã đề cập đến tất cả các khía cạnh của việc sử dụng nó, chúng ta hãy nhắc lại nhanh về tất cả các chủ đề chính được thảo luận
- Hiểu cơ chế, mục đích và các yếu tố cần thiết của việc thiết lập các trường biểu mẫu nhập liệu ẩn
- Application of the tag
- Các thuộc tính đi kèm với các phần tử biểu mẫu ẩn HTML
- Các lĩnh vực sử dụng cho đầu vào ẩn HTML
- Cách nhà phát triển có thể cập nhật trường ẩn biểu mẫu HTML
- Các vấn đề về an toàn và bảo mật liên quan đến đầu vào ẩn HTML
5/5 - [14 phiếu bầu]
- Tác giả
- Bài viết gần đây
Vị trí là tất cả
Vị trí là tất cả. Tài nguyên Go-To của bạn để Tìm hiểu & Xây dựng. CSS, JavaScript, HTML, PHP, C++ và MYSQL