Rate this post

Trong HTML, thẻ <label> được sử dụng để tạo một nhãn cho một phần tử đầu vào, thường là một ô nhập liệu (như một ô nhập văn bản, nút radio hoặc checkbox) . Nhãn này sẽ giúp người dùng hiểu rõ hơn về mục đích của phần tử đầu vào đó.

Các bài viết liên quan:

Ví dụ:

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Trong ví dụ trên, thẻ <label> được sử dụng để tạo một nhãn cho phần tử đầu vào là ô nhập email.

Thuộc tính “for” của thẻ label sẽ liên kết với thuộc tính “id” của phần tử đầu vào, giúp cho người dùng khi click vào nhãn sẽ tự động focus vào phần tử đầu vào đó.

Cách sử dụng thẻ label này sẽ giúp tăng tính truy cập và giao diện thân thiện hơn cho người dùng, giúp họ dễ dàng nhập dữ liệu vào các phần tử đầu vào. Nó cũng có thể giúp giảm tối đa sự nhầm lẫn trong quá trình nhập dữ liệu và giúp cho các thiết bị đọc màn hình (screen readers) dễ dàng đọc và hiểu thông tin.

Các thuộc tính của label

Các thuộc tính chính của thẻ <label> trong HTML bao gồm:

  • for: thuộc tính này xác định phần tử đầu vào mà nhãn này đang liên kết với. Giá trị của thuộc tính này phải trùng với giá trị của thuộc tính id của phần tử đầu vào.
  • form: thuộc tính này xác định form mà nhãn này thuộc về.
  • accesskey: thuộc tính này xác định một phím tắt để truy cập nhãn.
  • contenteditable: thuộc tính này xác định nếu nội dung của thẻ có thể chỉnh sửa hay không.
  • contextmenu: thuộc tính này xác định menu ngữ cảnh cho thẻ.
  • dir: thuộc tính này xác định hướng văn bản của thẻ.
  • hidden: thuộc tính này xác định nếu thẻ là hidden hay không.
  • id: thuộc tính này xác định một id duy nhất cho thẻ.
  • lang: thuộc tính này xác định ngôn ngữ của thẻ.
  • spellcheck: thuộc tính này xác định nếu kiểm tra chính tả được bật hay tắt.
  • style: thuộc tính này xác định kiểu của thẻ bằng CSS.
  • tabindex: thuộc tính này xác định vị trí của thẻ trong chuỗi tab.
  • title: thuộc tính này xác định một tiêu đề cho thẻ, hiển thị khi người dùng di chuột qua.
  • translate: thuộc tính này xác định nếu nội dung của thẻ có được dịch hay không.

Cần lưu ý rằng các thuộc tính của thẻ label có thể chỉ được sử dụng trong phiên bản HTML5 và có thể không được hỗ trợ trong các phiên bản cũ hơn.

ví dụ sử dụng label trong html

Ví dụ:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="Submit">
</form>

Trong ví dụ này, ta sử dụng thẻ <label> để tạo một nhãn cho các phần tử đầu vào là ô nhập Name, Email và Password. Các thuộc tính for của label được liên kết với thuộc tính id của các phần tử đầu vào, giúp cho người dùng khi click vào nhãn sẽ tự động focus vào phần tử đầu vào đó.

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 *

Contact Me on Zalo
Call now