Label for HTML là gì

Giới thiệu | Điều khoản | Bảo mật | Hướng dẫn | Ứng dụng | Liên hệ | Quảng cáo | Facebook | Youtube | DMCA

Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản: CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. Địa chỉ: 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại: 024 2242 6188. Email: [email protected]. Chịu trách nhiệm nội dung: Lê Ngọc Lam.

Bản quyền © 2003-2023 QuanTriMang.com. Giữ toàn quyền. Không được sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc QuanTriMang.com khi chưa được phép.

Trong bài này mình sẽ hướng dẫn cách sử dụng thẻ label trong HTML, đây là thẻ dùng để tạo nhãn cho các đối tượng trong form.

Label for HTML là gì

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Thẻ label là gì?

Thẻ label trong html có tác dụng đặt nhãn để mô tả cho thẻ input. Thực chất thẻ label không hiển thị bất cứ thứ gì đặc biệt cho người dùng. Tuy nhiên, khi click vào nội dung bên trong thẻ label, con trỏ chuột sẽ tự động nhảy vào phần tử mà thẻ label đó đại diện.

<label for="id"></label>

Lưu ý: Thuộc tính for của thẻ label phải giống với với id của thẻ input mà nó đại diện.

Bạn có thể sử dụng thẻ span, thẻ p, hay một thẻ bất kì để bao quanh thẻ label lại. Bạn cũng có thể sử dụng CSS để tùy chỉnh cách hiện thị cho nó.

Bài viết này được đăng tại [free tuts .net]

2. Cách sử dụng thẻ label trong HTML

Ví dụ: sử dụng thẻ label để tạo nhãn cho các thẻ input.

Code RUN

<!DOCTYPE html>
<html>
    <head>
        <title>Học lập trình miễn phí tại freetuts.net</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Học lập trình miễn phí tại freetuts.net</h1>

        <form action="/action_page.php">
            <label>Name:</label>
            <input type="text" name="name"><br />
            <label>Email:</label>
            <input type="text" name="email"><br />
        </form>
    </body>
</html>

3. Thuộc tính for của thẻ label

Như mình đã nói, thuộc tính for của thẻ label có tác dụng trỏ đến thẻ input mà nó đại diện. Giá trị của nó phải trùng với ID của thẻ input đó thì khi click vào label con trỏ sẽ tự động nhảy đến thẻ input.

Ví dụ khác

label với input dạng checkbox:

Nhãn 01:

Nhãn 02:

Hãy click vào Nhãn 01 và 02 để hiểu rõ hơn.

label với input dạng radio:

Nam:

Nữ:

Hãy click vào nhãn Nam và Nữ để hiểu rõ hơn (chú ý: giá trị của "name" trong 2 phải như nhau).

Hãy click vào nhãn Nam và Nữ để hiểu rõ hơn (chú ý: giá trị của "name" trong 2 phải như nhau).

Trình duyệt hỗ trợ

Label for HTML là gì

được hỗ trợ trong đa số các trình duyệt. Tuy nhiên không hỗ trợ trong trình duyệt Safari 2 trở xuống.

Thuộc tính

Cách sử dụng:

Thuộc tính bắt buộc

Thuộc tínhGiá trịVí dụMô tảfortên id inputfor="inputId"Giá trị for phải trùng với giá trị id trong < input />;.

Thuộc tính tùy chọn

Thuộc tínhGiá trịVí dụMô tảThuộc tính mới (Mới)formtên id formform="formId"Xác định < label > thuộc về form nào.

Thuộc tính Tổng quát và thuộc tính sự kiện Tất cả thuộc tính tổng quát và thuộc tính sự kiện được xác định trên phần lớn các thành phần HTML5

Thẻ label dùng để định nghĩa nhãn cho các thẻ input trong HTML. Tác dụng của label là làm cho thao tác nhập liệu trở nên dễ dàng hơn.

Code mẫu:

<label for="hoten">Họ tên:</label><input type="text" name="hoten" id="hoten">

Kết quả:

Họ tên:

Giờ bạn có thể nhấn vào chữ Họ tên để vào ô nhập liệu, hay nói cách khác, thẻ label làm tăng diện tích click chuột bắt đầu thao tác nhập.

Nếu không có thẻ label, khi click vào chữ Họ tên sẽ không có điều gì xảy ra, giống như ví dụ dưới đây:

Họ tên:


Cú pháp của thẻ label

Thẻ label yêu cầu thuộc tính for phải được điền giá trị, và giá trị trong thuộc tính id của input phải giống với giá trị trong thuộc tính for của label. Làm như thế để label biết được nó được dùng cho input nào.

Mẹo

Nếu bạn cho rằng cách dùng for và id lằng nhằng, thì bạn có thể không cần dùng nó mà vẫn cho kết quả tương tự, nhưng khi ấy bạn phải cho thẻ input nằm trong label, code mẫu:

Label làm gì?

Label (nghĩa đen: nhãn) là thành tố điều khiển đồ họa (control) hiển thị văn bản (text) trong biểu mẫu (form). Nó thường là một control tĩnh; không có tương tác. Label thường dùng làm nhan đề cho text box (hộp văn bản) đi kèm hoặc cho widget khác.

Thẻ Label trọng HTML để làm gì?

Thẻ label dùng để định nghĩa nhãn cho các thẻ input trong HTML. Tác dụng của label là làm cho thao tác nhập liệu trở nên dễ dàng hơn.

Label web là gì?

Label là gì? Đó một thuật ngữ được biết đến liên quan đến hoạt động thiết kế website cũng như sự vận hành của nó có ảnh hưởng trong các kết quả seo. Tuy nhiên, thuật ngữ Label được biết đến nhiều khi sử dụng nền tảng blog của blogspot.

Label trọng PHP là gì?

Định nghĩa và sử dụng Tag <label> định nghĩa nhãn cho thành phần <input />. Tag <label> không hiển thị bất cứ gì đặc biệt cho người dùng, tuy nhiên nó cung cấp một cải thiện cho người sử dụng chuột, nếu click chuột vào nhãn, sẽ đưa con trỏ chuột vào vùng <input />.