Ẩn trong html5

Phần tử đầu vào có thuộc tính loại có giá trị là "hidden" đại diện cho một giá trị không dành cho người dùng kiểm tra hoặc thao tác

Thuộc tính được phép #

ⓘ thuộc tính toàn cầu Bất kỳ thuộc tính nào được phép trên toàn cầu. ⓘ name = string #Phần tên của cặp tên/giá trị được liên kết với phần tử này nhằm mục đích gửi biểu mẫu. ⓘ bị vô hiệu hóa = "bị vô hiệu hóa" hoặc "" (chuỗi trống) hoặc trống #Chỉ định rằng phần tử đại diện cho một điều khiển bị vô hiệu hóa. ⓘ form = tham chiếu ID MỚI #Giá trị của thuộc tính id trên biểu mẫu để liên kết phần tử. ⓘ type = "hidden" #Chỉ định rằng phần tử đầu vào của nó đại diện cho một giá trị không dành cho người dùng kiểm tra hoặc thao tác. ⓘ value = string #Chỉ định giá trị cho phần tử đầu vào

Các ràng buộc và lời khuyên bổ sung #

• Đầu vào phần tử tương tác không được xuất hiện dưới dạng phần tử con của phần tử a
• Đầu vào phần tử tương tác không được xuất hiện dưới dạng phần tử con của phần tử nút
• Bất kỳ phần tử đầu vào nào hậu duệ của phần tử nhãn có thuộc tính for đều phải có giá trị ID khớp với giá trị ID đó
• Thuộc tính danh sách của phần tử “đầu vào” phải tham chiếu đến phần tử datalist
• Thuộc tính usemap trên phần tử đầu vào đã lỗi thời. Sử dụng phần tử img thay vì phần tử đầu vào cho bản đồ hình ảnh
• Thuộc tính căn chỉnh trên phần tử đầu vào đã lỗi thời. Sử dụng CSS thay thế

Bỏ sót thẻ #

Phần tử đầu vào là phần tử void. Một phần tử đầu vào phải có thẻ bắt đầu nhưng không được có thẻ kết thúc

Kiếm thu nhập với kỹ năng HTML của bạn

Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn.
Chúng tôi đang xây dựng thị trường việc làm tự do lớn nhất dành cho những người như bạn.

Thuộc tính hidden có thể được áp dụng cho bất kỳ phần tử nào và ẩn hiệu quả các phần tử tương tự như display: none trong CSS

Trình duyệt Chrome

1. 4 - 5 . Không được hỗ trợ
2. 6 - 107 . Được hỗ trợ
3. 108 . Được hỗ trợ
4. 109 - 111 . Được hỗ trợ

Bờ rìa

1. 12 - 107 . Được hỗ trợ
2. 108 . Được hỗ trợ

Cuộc đi săn

1. 3. 1 - 5 . Không được hỗ trợ
2. 5. 1 - 16. 1 . Được hỗ trợ
3. 16. 2 . Được hỗ trợ
4. 16. 3 - TP . Được hỗ trợ

firefox

1. 2 - 3. 6 . Không được hỗ trợ
2. 4 - 106 . Được hỗ trợ
3. 107 . Được hỗ trợ
4. 108 - 109 . Được hỗ trợ

Ô-pê-ra

1. 9 - 11 . Không được hỗ trợ
2. 11. 1 - 91 . Được hỗ trợ
3. 92 . Được hỗ trợ

I E

1. 5. 5 - 10 . Không được hỗ trợ
2. 11 . Được hỗ trợ

Chrome dành cho Android

1. 108 . Được hỗ trợ

Safari trên iOS

1. 3. 2 - 4. 3 . Không được hỗ trợ
2. 5 - 16. 1 . Được hỗ trợ
3. 16. 2 . Được hỗ trợ
4. 16. 3 . Được hỗ trợ

Internet Samsung

1. 4 - 18. 0 . Được hỗ trợ
2. 19. 0 . Được hỗ trợ

Opera Mini

1. tất cả . Được hỗ trợ

Opera di động

1. 10 - 11 . Không được hỗ trợ
2. 11. 1 - 12. 1 . Được hỗ trợ
3. 72 . Được hỗ trợ

Trình duyệt UC cho Android

1. 13. 4 . Được hỗ trợ

Trình duyệt Android

1. 2. 1 - 3 . Không được hỗ trợ
2. 4 - 4. 4. 4 . Được hỗ trợ
3. 108 . Được hỗ trợ

Firefox dành cho Android

1. 107 . Được hỗ trợ

Trình duyệt QQ

1. 13. 1 . Được hỗ trợ

Trình duyệt Baidu

1. 13. 18 . Được hỗ trợ

Trình duyệt KaiOS

1. 2. 5 . Được hỗ trợ

Trạng thái ẩn có thể dễ dàng bị ghi đè bằng thuộc tính CSS display được đặt thành bất kỳ thứ gì khác ngoài none

Như bạn có thể biết, có một số thuộc tính HTML được coi là toàn cầu vì chúng có thể được áp dụng cho bất kỳ phần tử HTML nào. Các ví dụ phổ biến bao gồm class, id, style và tabindex

Một cái đã được thêm vào vài năm trước trong HTML5 và có thể bạn đã quên, được sử dụng trên hai phần tử trong đoạn mã sau

Thuộc tính hidden là một Boolean, khi được chỉ định trên một phần tử

cho biết rằng phần tử chưa hoặc không còn liên quan trực tiếp đến trạng thái hiện tại của trang hoặc phần tử đó đang được sử dụng để khai báo nội dung sẽ được sử dụng lại bởi các phần khác của trang thay vì được người dùng truy cập trực tiếp

Dưới đây là demo sử dụng thuộc tính này. Sử dụng nút để chuyển đổi giá trị hidden trên các phần tử bị ảnh hưởng. Lưu ý rằng JavaScript không cần thiết để sử dụng thuộc tính này;

Xem Thuộc tính `hidden` toàn cầu của Pen HTML5 của Louis Lazaris (@impressivewebs) trên CodePen

Thuộc tính này hữu ích như thế nào?

Phần sau của định nghĩa trong thông số kỹ thuật rất thú vị vì điều này chỉ ra rằng bạn có thể đặt nội dung trong một trang bằng thuộc tính hidden, sau đó truy cập nội dung đó qua JavaScript để sử dụng ở nơi khác. Ví dụ, tôi đã làm điều này trước khi sử dụng phần tử ẩn hidden3, nhưng tôi thường ẩn phần tử đó bằng CSS bằng cách sử dụng thứ gì đó như display: none. Thuộc tính hidden giúp việc này dễ dàng hơn. Do đó, một phần tử có thuộc tính hidden là một phần của DOM nhưng người dùng không thể truy cập được

Đây là một ví dụ mà tôi đang lấy nội dung InternalHTML của phần tử ẩn bằng JavaScript

Xem Bút truy cập phần tử `hidden` bằng JavaScript của Louis Lazaris (@impressivewebs) trên CodePen

Có một số điều bạn nên biết khi sử dụng thuộc tính này, như được giải thích trong thông số kỹ thuật

• Bạn không nên sử dụng hidden để ẩn nội dung được cho là có thể truy cập được trên màn hình có kích thước, độ phân giải khác, v.v.
• Bạn không nên sử dụng hidden để ẩn các phần không nhìn thấy được của thành phần tab hoặc trình chuyển đổi nội dung tương tự (Chỉnh sửa. Lời khuyên này, xuất phát từ thông số kỹ thuật, đang bị tranh chấp. Xem chủ đề này để biết chi tiết)
• Các phần tử không ẩn không được siêu liên kết đến các phần tử ẩn
• Các phần tử được đánh dấu bằng hidden vẫn có khả năng hoạt động. Ví dụ: một điều khiển biểu mẫu hoặc thậm chí một phần tử class5 sẽ vẫn hoạt động

Thông số kỹ thuật cung cấp một số chi tiết về cách sử dụng hợp lệ và thuộc tính này được hỗ trợ đầy đủ trong các trình duyệt để ánh xạ khả năng truy cập. Nó ánh xạ tới class6, nhưng nó hoạt động khác với class6. Trong bài viết này, Steve Faulkner giải thích nhiều sự khác biệt. Tất nhiên, điều đáng chú ý nhất là thực tế là các phần tử có class6 vẫn hiển thị trong trình duyệt, nhưng sẽ không hiển thị cho công nghệ hỗ trợ – trong khi các phần tử có hidden không thể truy cập được ở bất kỳ đâu

Trong bài viết đó, Faulkner cũng giải thích cách sử dụng đúng thuộc tính hidden

Nếu bạn muốn ẩn nội dung với tất cả người dùng, hãy sử dụng thuộc tính HTML5 hidden (cùng với CSS id2 cho các trình duyệt chưa hỗ trợ hidden). Không cần sử dụng id4

Bạn có thể đảo ngược phần tử ẩn bằng CSS không?

<

p>Câu trả lời đơn giản là có, bạn có thể sử dụng CSS để hiển thị rõ ràng một phần tử có thuộc tính hidden. Khi bạn kiểm tra một phần tử ẩn trong công cụ dành cho nhà phát triển của trình duyệt, bạn sẽ nhận thấy rằng trình duyệt cung cấp cho phần tử giá trị CSS là display: none

Như bạn có thể thấy trình duyệt sử dụng bộ chọn thuộc tính để nhắm mục tiêu phần tử. Vì vậy, để ghi đè điều này, bạn phải đảm bảo rằng bạn sử dụng bộ chọn có tính đặc hiệu mạnh hơn. Trong bản demo sau, tôi đang cố ghi đè lên hidden bằng CSS trên hai phần tử. Một cái hoạt động và cái kia thì không

Xem Bút ghi đè thuộc tính `hidden` bằng CSS của Louis Lazaris (@impressivewebs) trên CodePen

Phần tử hidden3 vẫn bị ẩn vì bộ chọn loại phần tử không đủ mạnh để ghi đè CSS của trình duyệt. Tuy nhiên, phần tử đoạn được hiển thị vì tôi đang sử dụng bộ chọn lớp, bộ chọn này sẽ ghi đè bộ chọn thuộc tính của trình duyệt

Thuộc tính hidden được hỗ trợ trong tất cả các trình duyệt hiện đại và thậm chí có hỗ trợ trong IE11, vì vậy nó an toàn khi sử dụng trong hầu hết các dự án

Yếu tố ẩn là gì?

Việc sử dụng thuộc tính ẩn là gì?

Ý nghĩa ẩn trong mã là gì?

Làm cách nào để nhận giá trị đầu vào ẩn trong HTML?