Trang chủ » HTML và CSS » HTML » Cách sử dụng thẻ Label trong HTML đơn giản

Cách sử dụng thẻ Label trong HTML đơn giản

Thẻ Label trong HTML

Thẻ Label trong HTML sử dụng để định nghĩa nhãn dán cho phần tử thẻ input bao gồm: text, radio, name, password, file, hay textarea, … Xem thêm ở dưới nhé -_-

Mình sẽ làm 1 ví dụ mình họa về thẻ input có type là radio sử dụng label trong HTML:

<!DOCTYPE html>
<html>
<body>

<strong>Thẻ Label trong HTML</strong>

<p>Click vào các label (nhãn dán) để chọn các nút type="radio" thay vì click trực tiếp vào nó:</p>

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Với ví dụ trên thì khi bạn submit nó sẽ truyền dữ liệu sang file “/action_page.php” cung cấp thứ mục. Nếu bạn nào chưa biết cách sử dụng form thì mình sẽ hướng dẫn tại các bài sau. 

Nhưng bạn có thể thấy khi label trong HTML được sử dụng thì không chỉ hiển thị text, văn bản cho biết ô radio đó là tùy chọn gì còn nữa thì vì bạn click vào trực tiếp ô radio thì bạn có thể click vào label. Tại sao phải làm vậy?

Điều đầu tiên là khi bạn sử dụng tại 1 số vị trí được thiết kế ô radio không quá to sẽ mất thẩm mỹ chẳng hạn: thì bạn sử dụng thêm label vừa là trích dẫn cho người dùng hiểu tùy chọn radio đó làm gì và vừa dễ cho người dùng click nhất là khi sử dụng trên các thiết bị mobile.

Với đoạn code trên thì sẽ hiện thị ra màn hình như thế này:

Thẻ Label trong HTML

Click vào các label (nhãn dán) để chọn các nút type=”radio” thay vì click trực tiếp vào nó:



Định nghĩa và cách sử dụng

Thẻ label trong html được sử dụng cho các phần tử dưới đây: 

  • <input type=”checkbox”>
  • <input type=”color”>
  • <input type=”date”>
  • <input type=”datetime-local”>
  • <input type=”email”>
  • <input type=”file”>
  • <input type=”month”>
  • <input type=”number”>
  • <input type=”password”>
  • <input type=”radio”>
  • <input type=”range”>
  • <input type=”search”>
  • <input type=”tel”>
  • <input type=”text”>
  • <input type=”time”>
  • <input type=”url”>
  • <input type=”week”>
  • <meter>
  • <progress>
  • <select>
  • <textarea>

Việc sử dụng thẻ label trong html với các phần tử trên sẽ mang lại rất nhiều lợi ích cho bạn, một số điểm mình đã nhắc bên trên.

Mẹo và Lưu ý khi sử dụng thẻ Label trong HTML

Mẹo: Thuộc tính for của <label> phải sử dùng với thuộc tính id của phần tử liên quan để liên kết chúng với nhau. Một nhãn cũng có thể được liên kết với một phần tử bằng cách đặt phần tử vào bên trong phần tử <label>.

Bạn ghi nhớ điều này nhé nếu không sẽ rất loay hoay không hiểu tại sao thẻ Label của mình lại không hoạt động, để ý nhé!

Cảm ơn các bạn đã theo dõi bài viết về “Thẻ Label trong HTML” của mình tới đây. Chúc các bạn 1 ngày vui vẻ <3

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *