Nhãn trong HTML CSS là gì?

nội dung

Mã ví dụ

 Favorite Animal

 

Động vật yêu thích

Sử dụng nhãn đúng cách

Phần tử là một trong số ít phần tử chỉ tồn tại và có ý nghĩa trong mối quan hệ với phần tử khác. Trong trường hợp của , nhãn phải được liên kết với một trường biểu mẫu (thường là trong phần tử thuộc loại này hay loại khác

Để một hoạt động bình thường, nó phải bao gồm một thuộc tính

First Name

First Name

First Name

First Name

(Việc gửi biểu mẫu phụ thuộc vào

First Name

First Name

Do you agree to the terms and conditions?
 Agree

First Name

Tên đầu tiên

Do you agree to the terms and conditions?
 Agree

Bạn có đồng ý với các điều khoản và điều kiện?

Đồng ý không

Nhãn và khả năng sử dụng

Tất nhiên, có thể không sử dụng phần tử và chỉ đặt văn bản không được đánh dấu trên hoặc bên cạnh trường biểu mẫu. Nhưng đây không phải là một ý tưởng tốt. Có một nhãn được ghép nối không chỉ là ngữ nghĩa tốt mà còn là khả năng sử dụng tốt. Với nhãn được đánh dấu chính xác, người dùng có thể nhấp (hoặc chạm ngón tay) vào nhãn để đưa tiêu điểm vào phần tử hoặc chọn phần tử đó. Điều này hữu ích vừa phải trên máy tính để bàn và máy tính xách tay thông thường, nhưng trên điện thoại di động màn hình cảm ứng, nó tạo ra sự khác biệt lớn.

 Click this label to select.




 Can you click this label to select?

<

div class=”render”>Nhấp vào nhãn này để chọn

Bạn có thể nhấp vào nhãn này để chọn không?

Vì vậy, ngoài khả năng sử dụng cơ bản, bạn cũng muốn tích cực làm việc để giúp người mù và người khiếm thị có thể truy cập trang web của mình — hoặc bất kỳ ai khác có thể sử dụng trình đọc màn hình để duyệt internet. Sự liên kết của nhãn với trường biểu mẫu cho phép người dùng trình đọc màn hình biết điều gì là hiển nhiên đối với người dùng nhìn thấy được. những từ nào được gắn vào những trường mẫu nào

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 thẻ HTML xuất hiện. Thẻ ________ 29 _______ đượ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ẻ ________ 29 _______ 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.   Cách tạo và tạo kiểu cho các đường ngang trong HTML

Chẳng hạn, nếu bạn có 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ục 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.   Nhấn mạnh vào định dạng văn bản HTML. Đậm, nghiêng và gạch chân

Ở 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 truy cập 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.   Khoảng HTML. Hướng dẫn dành cho người mới bắt đầu

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

Nhãn trong CSS là gì?

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

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

Yếu tố nhãn là gì?