Cách lấy nhãn cho giá trị thuộc tính trong JavaScript

Kiếm thu nhập với kỹ năng HTML của bạn

Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn
Chúng tôi đang xây dựng thị trường làm việc tự do tự phục vụ lớn nhất cho những người như bạn

Liên kết một với một điều khiển biểu mẫu, chẳng hạn như

<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
0 hoặc
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
1 mang lại một số lợi thế lớn

  • Văn bản nhãn không chỉ được liên kết trực quan với kiểu nhập văn bản tương ứng của nó; . Điều này có nghĩa là, ví dụ: trình đọc màn hình sẽ đọc nhãn khi người dùng tập trung vào thông tin nhập vào biểu mẫu, giúp người dùng công nghệ hỗ trợ dễ dàng hiểu dữ liệu nào sẽ được nhập
  • Khi người dùng nhấp hoặc chạm/chạm vào nhãn, trình duyệt sẽ chuyển tiêu điểm đến đầu vào được liên kết của nó (sự kiện kết quả cũng được nâng lên cho đầu vào). Vùng trúng đích tăng lên để tập trung đầu vào mang lại lợi thế cho bất kỳ ai đang cố gắng kích hoạt nó — kể cả những người sử dụng thiết bị màn hình cảm ứng

Để liên kết rõ ràng một phần tử với một phần tử

<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
0, trước tiên bạn cần thêm thuộc tính
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
4 vào phần tử
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
0. Tiếp theo, bạn thêm thuộc tính
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
6 vào phần tử , trong đó giá trị của
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
6 giống với giá trị của
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
4 trong phần tử
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
0

Ngoài ra, bạn có thể lồng trực tiếp

<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
0 vào bên trong , trong trường hợp đó, các thuộc tính
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
6 và
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
4 là không cần thiết vì liên kết là ẩn

<label>
  Do you like peas?
  <input type="checkbox" name="peas" />
label>

Điều khiển biểu mẫu mà một nhãn đang gán nhãn được gọi là điều khiển có nhãn của phần tử nhãn. Nhiều nhãn có thể được liên kết với cùng một điều khiển biểu mẫu

<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>

Các phần tử có thể được liên kết với một phần tử bao gồm

<label>Click me <input type="text" />label>
6,
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
0 (ngoại trừ
<label>Click me <input type="text" />label>
8),
<label>Click me <input type="text" />label>
9,
<label for="username">Click me to focus on the input fieldlabel>
<input type="text" id="username" />
0,
<label for="username">Click me to focus on the input fieldlabel>
<input type="text" id="username" />
1,
<label for="username">Click me to focus on the input fieldlabel>
<input type="text" id="username" />
2 và
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
1

Phần tử này bao gồm các thuộc tính toàn cục

Giá trị của thuộc tính

<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
6 phải là một giá trị duy nhất cho phần tử liên quan đến biểu mẫu trong cùng tài liệu với phần tử . Vì vậy, bất kỳ phần tử
<label for="username">Click me to focus on the input fieldlabel>
<input type="text" id="username" />
8 đã cho nào cũng có thể được liên kết với chỉ một điều khiển biểu mẫu

Ghi chú. Để đặt thuộc tính

<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
6 theo chương trình, hãy sử dụng
<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the <a href="terms-and-conditions.html">Terms and Conditionsa>
label>
0

Phần tử đầu tiên trong tài liệu có thuộc tính

<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
4 khớp với giá trị của thuộc tính
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
6 là điều khiển được gắn nhãn cho phần tử
<label for="username">Click me to focus on the input fieldlabel>
<input type="text" id="username" />
8 này — nếu phần tử có
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
4 đó thực sự là một. Nếu nó không phải là phần tử có thể gắn nhãn thì thuộc tính
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
6 không có tác dụng. Nếu có các yếu tố khác cũng khớp với giá trị
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
4, thì sau này trong tài liệu, chúng không được xem xét

Nhiều phần tử

<label for="username">Click me to focus on the input fieldlabel>
<input type="text" id="username" />
8 có thể được gán cùng một giá trị cho thuộc tính
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
6 của chúng;

Ghi chú. Phần tử có thể có cả thuộc tính

<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
6 và phần tử điều khiển được chứa, miễn là thuộc tính
<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
6 trỏ đến phần tử điều khiển được chứa

Không có cân nhắc về kiểu dáng đặc biệt cho các phần tử — về mặt cấu trúc, chúng là các phần tử nội tuyến đơn giản và do đó có thể được tạo kiểu theo cách giống như phần tử

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions
label>
<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditionsa>
p>
4 hoặc
<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions
label>
<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditionsa>
p>
5. Bạn có thể áp dụng kiểu dáng cho chúng theo bất kỳ cách nào bạn muốn, miễn là bạn không làm cho văn bản trở nên khó đọc

<label>Click me <input type="text" />label>

<label for="username">Click me to focus on the input fieldlabel>
<input type="text" id="username" />

Không đặt các yếu tố tương tác như neo hoặc nút bên trong

<label for="username">Click me to focus on the input fieldlabel>
<input type="text" id="username" />
8. Làm như vậy khiến mọi người khó kích hoạt đầu vào biểu mẫu được liên kết với
<label for="username">Click me to focus on the input fieldlabel>
<input type="text" id="username" />
8

Đừng

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the <a href="terms-and-conditions.html">Terms and Conditionsa>
label>

Làm

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions
label>
<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditionsa>
p>

Đặt các yếu tố tiêu đề trong một can thiệp vào nhiều loại công nghệ hỗ trợ, bởi vì các tiêu đề thường được sử dụng như. Nếu văn bản của nhãn cần được điều chỉnh trực quan, hãy sử dụng các lớp CSS được áp dụng cho phần tử để thay thế

Nếu một biểu mẫu hoặc một phần của biểu mẫu cần tiêu đề, hãy sử dụng phần tử

<label for="your-name">
  <h3>Your nameh3>
  <input id="your-name" name="your-name" type="text" />
label>
0 được đặt trong một
<label for="your-name">
  <h3>Your nameh3>
  <input id="your-name" name="your-name" type="text" />
label>
1

Đừng

<label for="your-name">
  <h3>Your nameh3>
  <input id="your-name" name="your-name" type="text" />
label>

Làm

<label class="large-label" for="your-name">
  Your name
  <input id="your-name" name="your-name" type="text" />
label>

Phần tử

<label for="username">Enter your username:label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?label>
0 có khai báo
<label for="your-name">
  <h3>Your nameh3>
  <input id="your-name" name="your-name" type="text" />
label>
3 và thuộc tính
<label for="your-name">
  <h3>Your nameh3>
  <input id="your-name" name="your-name" type="text" />
label>
4 hợp lệ không cần nhãn liên kết với nó. Làm như vậy thực sự có thể ảnh hưởng đến cách công nghệ hỗ trợ phân tích cú pháp đầu vào của nút. Điều tương tự cũng áp dụng cho phần tử
<label>Click me <input type="text" />label>
6

Danh mục nội dung, , , , nội dung có thể sờ thấy. Nội dung được phép, nhưng không có phần tử

<label for="username">Click me to focus on the input fieldlabel>
<input type="text" id="username" />
8 hậu duệ. Không có yếu tố nào khác ngoài điều khiển được gắn nhãn được cho phép. Bỏ sót thẻKhông có, cả thẻ bắt đầu và thẻ kết thúc đều bắt buộc. Cha mẹ được phép Bất kỳ phần tử nào chấp nhận. Vai trò ARIA ngầm định Vai trò ARIA được phép Không có
<label for="your-name">
  <h3>Your nameh3>
  <input id="your-name" name="your-name" type="text" />
label>
7 được phép Giao diện DOM
<label for="your-name">
  <h3>Your nameh3>
  <input id="your-name" name="your-name" type="text" />
label>
8

Làm cách nào để hiển thị giá trị trong nhãn trong JavaScript?

hàm CopyToLabel() {
// Tham khảo TextBox
var txtName = tài liệu. getElementById("txtName");
// Tham khảo Nhãn
var lblName = tài liệu. getElementById("lblName");
// Sao chép giá trị TextBox vào Nhãn
lblName. InternalHTML = txtName. giá trị;

Làm cách nào để tìm nhãn trong JavaScript?

getLabels = function() { trả lại cái này. map(function() { var label = $(this). parents('nhãn'); . id) { nhãn. add('label[for="' + this. id + '"]'); } nhãn trả lại.

Làm cách nào để chuyển giá trị nhãn trong JavaScript?

Tạo phần tử nhãn và gán id cho phần tử đó
Xác định một nút được sử dụng để gọi một chức năng. Nó hoạt động như một công tắc để thay đổi văn bản trong phần tử nhãn
Xác định hàm javaScript, hàm này sẽ cập nhật văn bản nhãn
Sử dụng thuộc tính innerHTML để thay đổi văn bản bên trong nhãn

Cách lấy giá trị thuộc tính nhãn trong JQuery?

Phương thức jQuery attr() được sử dụng để lấy giá trị thuộc tính.