- Trang chủ
- Tham khảo
- Tag html
- html5
Định nghĩa và sử dụng
- Tag định nghĩa nhãn cho thành phần .
- Tag 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 .
- Muốn sử dụng hiệu quả , cần thiết phải cho giá trị id của và giá trị for của , hai giá trị này phải trùng nhau.
Sự khác nhau giữa HTML4.01 và HTML5
- | ● Trong HTML5 có thêm thuộc tính form |
Cấu trúc
Định nghĩa và sử dụng
Tag định nghĩa nhãn cho thành phần .
Tag 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 .
Muốn sử dụng hiệu quả , cần thiết phải cho giá trị id của và giá trị for của , hai giá trị này phải trùng nhau.
Sự khác nhau giữa HTML4.01 và HTML5
-
● Trong HTML5 có thêm thuộc tính form
Nhãn 02:
Cấu trúc
Html viết:
Email:
Nữ:
Hiển thị trình duyệt:
Hãy click vào nhãn Email để hiểu rõ hơn.
Ví dụ khác
Tuy nhiên không hỗ trợ trong trình duyệt Safari 2 trở xuống.
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.
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]. | Trình duyệt hỗ trợ | đượ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
Nam: Nữ: [Mới] | |||
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ợ | đượ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
- Trang chủ
- Tham khảo
- Ví dụ tag label
LABEL
Label - input dạng text
Email:
Thuộc tính for của label và id của input phải cùng giá trị, click vào nhãn Email để hiểu rõ hơn.
Label - input dạng checkbox
Nhãn 01: Nhãn 02:
Nhãn 02:
Thuộc tính for của label và id của input phải cùng giá trị, click vào nhãn 01 và 02 để hiểu rõ hơn.
Label - input dạng radio
Nam: Nữ:
Nữ:
Thuộc tính for của label và id của input phải cùng giá trị, 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].
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.
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.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 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.
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.: 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ó.
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.: sử dụng thẻ label để tạo nhãn cho các thẻ input.
Bài viết này được đăng tại [free tuts .net]
Học lập trình miễn phí tại freetuts.netHọc lập trình miễn phí tại freetuts.net
Name:
Email:
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ụ: Sử dụng thuộc tính for cho thẻ label. Sử dụng thuộc tính for cho thẻ label.
Học lập trình miễn phí tại freetuts.netHọc lập trình miễn phí tại freetuts.net
Name:
Email:
Trình duyệt hỗ trợ thẻ label
- Chrome
- Firefox
- IE
- Safari
- Opera