Nhãn được sử dụng để làm gì trong HTML?

Thuộc tính HTML là tập hợp các từ cung cấp thêm thông tin về phần tử và cũng giúp ích trong một số tác vụ nhất định. Các thuộc tính chỉ được đặt bên trong thẻ mở. Để thuận tiện cho chúng ta, tôi chia các thuộc tính thành hai loại

• Thuộc tính toàn cầu

  Thuộc tính toàn cầu là tập hợp các thuộc tính được hỗ trợ trên toàn cầu, có nghĩa là các thuộc tính này có thể được sử dụng với bất kỳ phần tử HTML nào. Do đó, các thuộc tính này cũng có sẵn cho thẻ. Điều đáng chú ý là mặc dù được hỗ trợ, các thuộc tính này có thể không hoạt động trên một số phần tử

• Thuộc tính cụ thể

  Thuộc tính cụ thể là các thuộc tính chỉ dành riêng cho một số phần tử nhất định. Điều đó có nghĩa là các thuộc tính này được sử dụng cụ thể trong một số phần tử cho một số nhiệm vụ cụ thể

Các thuộc tính cụ thể cho thẻ là

• vì. Như từ gợi ý, nó đề cập đến phần tử mà nó được tạo, sử dụng thuộc tính id của nó
• hình thức. Nó đề cập đến biểu mẫu HTML mà nhãn này thuộc về

Thẻ được sử dụng để làm gì?

Hãy cho chúng tôi hiểu ứng dụng của thẻ với sự trợ giúp của phép loại suy trong thế giới thực. Bất cứ khi nào chúng tôi đến cửa hàng vải, chúng tôi thấy các thẻ giá (hoặc nhãn giá) trên quần áo thể hiện giá của mặt hàng đó, chẳng hạn như một chiếc áo sơ mi. Theo cách tương tự, chúng tôi có các nhãn được liên kết với các phần tử nhất định, cho chúng tôi biết thông tin nào cần được nhập vào phần tử đó giống như nếu nhãn đi kèm với thẻ, nó cho chúng tôi biết thông tin nào cần được nhập vào đó. Thẻ thường được sử dụng với các phần tử biểu mẫu, chủ yếu là với thẻ

Hãy cho chúng tôi xem một số ví dụ để hiểu rõ hơn về điều tương tự

    Name: 

Sản lượng dự kiến
Giải trình
Trong ví dụ này, chúng tôi có một thẻ có loại bằng văn bản được đặt bên trong thẻ có nhãn Tên.  . Như bạn có thể thấy ở đầu ra, chúng tôi nhận được một hộp nhập liệu trống với Tên. như một nhãn liên kết với nó. Đây là một ví dụ đơn giản mà chúng ta đã tránh các thuộc tính như for và id. Hãy cho chúng tôi xem một ví dụ sử dụng các thuộc tính này
Sử dụng thẻ đầu vào bên ngoài thẻ nhãn
Mã số

    Phone Number:
    

Sản lượng dự kiến
Giải trình
Trong ví dụ này, chúng ta có một thẻ có kiểu bằng số được đặt bên ngoài thẻ có nhãn Tên.  . Chúng tôi đã bọc cả hai thẻ này trong một
thẻ vì nó làm tăng khả năng đọc và cũng có thể hữu ích trong các ứng dụng CSS. Như bạn có thể thấy ở đầu ra, chúng tôi nhận được một hộp nhập liệu trống với Tên. như một nhãn liên kết với nó. Trong ví dụ này, chúng tôi đã sử dụng các thuộc tính như for và id. Thuộc tính for của thẻ có giá trị phone bằng với giá trị của thuộc tính id của thẻ. Đây là cách chúng tôi gắn nhãn với thẻ đầu vào mà không đặt thẻ đầu vào bên trong thẻ
Nút radio có nhãn
Thẻ nhãn trong Html chủ yếu được sử dụng trong các biểu mẫu HTML. Chúng ta hãy xem một ví dụ tương tự



Mã số

    
Graduation Status:
    
        Student
        
    

    
 

    
        Under-Graduate
        
    

    
 

    
        Post-Graduate
        
    

Sản lượng dự kiến
Giải trình
Trong ví dụ này, chúng ta có một
tag having some tags with  tags placed inside them. Here all the  tags have type=radio, which is required when we have to select only one option from the available ones.

Mối quan tâm về khả năng tiếp cận

Có một số điều chúng ta không nên làm để tránh những lo ngại về khả năng tiếp cận

• Không bao giờ đặt thẻ bên trong thẻ
• Không bao giờ đặt các phần tử tương tác như phần tử neo hoặc phần tử nút bên trong thẻ

Hỗ trợ trình duyệt

Vì thẻ nhãn rất cần thiết trong việc tạo biểu mẫu nên nó được hỗ trợ bởi hầu hết tất cả các trình duyệt hiện có, chẳng hạn như Google Chrome, Mozilla Firefox, Safari, v.v.

Thẻ nhãn HTML được sử dụng để xác định chú thích cho một thành phần trong biểu mẫu HTML. Nó được truy cập bằng thẻ và được liên kết với một biểu mẫu web cụ thể. Khi được nhấp vào, chúng cho phép người dùng tương tác với biểu mẫu.  

Khi bạn đang tạo biểu mẫu trong HTML, bạn có thể quyết định rằng bạn muốn thêm chú thích vào các trường bên trong biểu mẫu. Chẳng hạn, bạn có thể muốn một trường biểu mẫu yêu cầu tên của khách hàng có chú thích Forename:

Tìm trận đấu Bootcamp của bạn

• Career Karma kết hợp bạn với các bootcamp công nghệ hàng đầu
• Truy cập học bổng độc quyền và các khóa học chuẩn bị

Bằng cách tiếp tục, bạn đồng ý với Điều khoản dịch vụ và Chính sách quyền riêng tư của chúng tôi và bạn đồng ý nhận các ưu đãi và cơ hội từ Career Karma qua điện thoại, tin nhắn văn bản và email

Đó là nơi mà thẻ HTML xuất hiện. Thẻ được sử dụng để xác định chú thích cho thành phần điều khiển biểu mẫu trong biểu mẫu HTML. Mỗi nhãn được liên kết với một phần tử cụ thể trong biểu mẫu

Hướng dẫn này sẽ thảo luận, có tham khảo các ví dụ, cách sử dụng thẻ nhãn HTML để thêm nhãn vào biểu mẫu. Sau khi đọc xong hướng dẫn này, bạn sẽ trở thành chuyên gia trong việc tạo nhãn biểu mẫu bằng HTML

Nhãn HTML

Thẻ thêm nhãn vào thành phần biểu mẫu cụ thể trong biểu mẫu. Mỗi thẻ nhãn được liên kết với một phần tử biểu mẫu thông qua thuộc tính HTML for

Có một vài lý do tại sao việc sử dụng thẻ lại quan trọng. Đầu tiên, nhãn được liên kết với một trường biểu mẫu cụ thể trên trang web. Điều này có nghĩa là, nếu trình đọc màn hình gặp trường biểu mẫu, nội dung của nhãn bạn chỉ định sẽ được đọc cho người dùng. Điều này làm cho trang web của bạn dễ truy cập hơn

Ngoài ra, khi thẻ được liên kết với trường biểu mẫu, người dùng có thể nhấp vào văn bản trong nhãn để kích hoạt biểu mẫu. Điều này giúp người dùng bắt đầu tương tác với trường biểu mẫu dễ dàng hơn vì họ không phải nhấp trực tiếp vào phần tử.  

» THÊM.   HTML thả xuống

Chẳng hạn, nếu bạn có một phần tử hộp kiểm không có thẻ , người dùng sẽ phải nhấp trực tiếp vào bên trong hộp kiểm để kích hoạt phần tử đó. Tuy nhiên, nếu bạn đã chỉ định thẻ , người dùng cũng có thể nhấp vào nhãn để kích hoạt hộp kiểm

Cú pháp nhãn HTML

Cú pháp của thẻ HTML như sau

Label contents

Thuộc tính for được sử dụng để liên kết nhãn với một phần tử

Label contents
	

Label contents
	

Label contents
	

Bạn cũng có thể đặt trường

Label contents
	

Label contents
	

Thẻ HTML hỗ trợ tất cả các thuộc tính toàn cầu trong HTML. Ngoài ra, thẻ được hỗ trợ trong tất cả các trình duyệt chính

Ví dụ về nhãn HTML

Giả sử chúng tôi đang tạo một trường biểu mẫu web yêu cầu người dùng cung cấp địa chỉ email của họ

Chúng tôi muốn trường biểu mẫu xuất hiện với nhãn

What is your email address?

cho thuộc tính

Chúng ta có thể sử dụng đoạn mã sau để thêm nhãn này vào trường đầu vào bằng thuộc tính for

What is your email address?

Mã của chúng tôi trả về như sau

Hãy chia nhỏ mã của chúng tôi

Ở dòng đầu tiên, chúng tôi đã sử dụng thẻ để thêm nhãn

What is your email address?

What is your email address?

	

What is your email address?

	

Ở cuối dòng, chúng tôi đã sử dụng thẻ

What is your email address?

	

» THÊM.   Tìm hiểu HTML. Các khóa học, sách và tài nguyên tốt nhất để học HTML

Ở dòng tiếp theo, chúng tôi đã tạo một trường nhập văn bản bằng cách sử dụng thẻ

Label contents
	

What is your email address?

	

Nhãn lồng nhau

Ngoài ra, chúng tôi có thể sử dụng thẻ

Label contents
	

What is your email address?

	

mã của chúng tôi trả về

Biểu mẫu của chúng tôi trực quan giống như ví dụ đầu tiên của chúng tôi. Tuy nhiên, trong ví dụ này, chúng tôi không sử dụng thuộc tính for để liên kết nhãn của chúng tôi với biểu mẫu của chúng tôi. Thay vào đó, chúng tôi đặt thẻ

Label contents
	

Khả năng truy cập nhãn HTML

Có một số lưu ý về khả năng tiếp cận mà bạn nên ghi nhớ khi thiết kế nhãn sử dụng thẻ

Đầu tiên, các tiêu đề không nên được đặt trong thẻ . Điều này là do các thành phần tiêu đề bên trong thẻ có thể ảnh hưởng đến công nghệ đọc màn hình và các công cụ khác được sử dụng để thúc đẩy khả năng truy cập web. Vì vậy, nếu bạn muốn thêm tiêu đề vào nhãn biểu mẫu, bạn nên làm như vậy bên ngoài bất kỳ thẻ nào

Thứ hai, bạn không nên đặt bất kỳ nút hoặc liên kết nào bên trong thẻ . Điều này là do các yếu tố tương tác bên trong thẻ có thể khiến người dùng khó hiểu cách thức hoạt động của biểu mẫu web. Ví dụ: nếu một nút có sẵn bên trong một , nó có thể khiến người dùng nghĩ rằng họ cần nhấp vào nút đó để tương tác với biểu mẫu web

» THÊM.   Ký hiệu HTML. Sử dụng thực thể ký tự HTML

Phần kết luận

Thẻ HTML được sử dụng để tạo nhãn biểu mẫu. Các nhãn này được liên kết với một biểu mẫu web cụ thể và khi được nhấp vào, cho phép người dùng tương tác với một biểu mẫu.  

"Career Karma bước vào cuộc đời tôi khi tôi cần nó nhất và nhanh chóng giúp tôi phù hợp với bootcamp. Hai tháng sau khi tốt nghiệp, tôi đã tìm được công việc mơ ước phù hợp với giá trị và mục tiêu của mình trong cuộc sống. "

Venus, Kỹ sư phần mềm tại Rockbot

Hướng dẫn này đã trình bày chi tiết, có tham chiếu đến các ví dụ, cách sử dụng thẻ HTML để thêm nhãn vào thành phần biểu mẫu, cũng như các vấn đề về khả năng truy cập được liên kết với thẻ . Bây giờ bạn đã có kiến ​​thức cần thiết để bắt đầu làm việc với các nhãn trong HTML như một chuyên gia

Về chúng tôi. Career Karma là một nền tảng được thiết kế để giúp người tìm việc tìm kiếm, nghiên cứu và kết nối với các chương trình đào tạo việc làm để thăng tiến trong sự nghiệp của họ. Tìm hiểu về ấn phẩm CK

Tại sao nhãn được sử dụng trong HTML?

Nhãn dùng để làm gì?

Khi nào tôi nên sử dụng nhãn HTML?

Nhãn có cần thiết trong HTML không?