Thẻ label

Thẻ label xác định nhãn cho trường nhập liệu kiểu input, textarea, select và như vậy.

Nhãn được liên kết với một trường nhập liệu cụ thể bằng cách sử dụng thuộc tính for. Trong đó cần chỉ định giá trị của thuộc tính id của trường nhập liệu mà nhãn được liên kết. Ngoài ra nhãn cũng được liên kết với phần tử nếu đặt phần tử đó bên trong thẻ label. Trong trường hợp này không cần chỉ định thuộc tính for. Hãy xem các ví dụ để hiểu rõ hơn.

Khi nhấp vào nhãn, các hộp kiểm hoặc nút radio được liên kết với nó sẽ thay đổi trạng thái từ được chọn sang không được chọn và ngược lại. Nhãn trong trường hợp này là để thuận tiện: rất khó để đưa con trỏ vào các phần tử biểu mẫu nhỏ, trong khi với một nhãn dài có văn bản - thì dễ dàng hơn nhiều.

Trường nhập văn bản được liên kết với nhãn kiểu input và textarea sẽ nhận được tiêu điểm nhập liệu. Tiêu điểm - là khi con trỏ nhấp nháy trong trường nhập liệu, trong trường hợp này, nếu bạn viết gì đó trên bàn phím - văn bản sẽ được nhập vào trường này (xem lớp giả focus để hiểu sâu hơn về tiêu điểm).

Có thể sử dụng nhãn label để mô phỏng hộp kiểm hoặc nút radio. Điều này cần thiết để tạo checkbox hoặc radio với thiết kế riêng (điều mà trong CSS bị cấm, nhưng với các thủ thuật khéo léo thì có thể thực hiện được).

Thuộc tính

Thuộc tính	Mô tả
for	Trong thuộc tính này cần chỉ định giá trị của thuộc tính id của trường nhập liệu mà nhãn label được liên kết.
accesskey	Xác định phím tắt, sử dụng để chuyển đến phần tử biểu mẫu được liên kết với nhãn (thông qua thuộc tính for). Xem chi tiết tại thuộc tính accesskey.

Ví dụ . Hộp kiểm

Hãy liên kết nhãn với hộp kiểm checkbox bằng cách sử dụng thuộc tính for. Hãy nhấp vào nhãn và bạn sẽ thấy trạng thái của hộp kiểm thay đổi từ được chọn sang không được chọn và ngược lại:

:

Ví dụ . Bên trong label

Bây giờ hãy không liên kết nhãn thông qua thuộc tính for, mà đặt phần tử trực tiếp bên trong thẻ label, trong trường hợp này khi nhấp vào văn bản của label cũng sẽ kích hoạt phần tử:

:

Ví dụ . Trường nhập văn bản

Hãy liên kết nhãn với thẻ input bằng cách sử dụng thuộc tính for. Nhấp vào nhãn sẽ làm cho trường nhập liệu nhận được tiêu điểm. Khi đó văn bản chứa trong trường (được thêm bằng thuộc tính value) sẽ được chọn. Nếu bắt đầu gõ bất cứ thứ gì trên bàn phím - văn bản này sẽ bị xóa. Có thể loại bỏ vùng chọn mà không xóa văn bản bằng cách nhấp chuột vào trường nhập liệu: tiêu điểm khi đó sẽ không biến mất, nhưng vùng chọn sẽ mất đi:

:

Xem thêm