<output>: Phần tử Đầu ra

Thuộc tính

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

for

Danh sách id của các phần tử khác, phân tách bằng dấu cách, cho biết rằng các phần tử đó đã đóng góp giá trị đầu vào (hoặc có ảnh hưởng khác) vào phép tính.

form

Phần tử <form> để liên kết đầu ra với (chủ sở hữu biểu mẫu của nó). Giá trị của thuộc tính này phải là id của một <form> trong cùng tài liệu. (Nếu thuộc tính này không được đặt, <output> sẽ được liên kết với phần tử <form> tổ tiên của nó, nếu có.)

Thuộc tính này cho phép bạn liên kết các phần tử <output> với các <form> ở bất kỳ đâu trong tài liệu, không chỉ bên trong <form>. Nó cũng có thể ghi đè phần tử <form> tổ tiên. Tên và nội dung của phần tử <output> không được gửi khi biểu mẫu được gửi.

name

Tên của phần tử. Được sử dụng trong API form.elements.

Giá trị, tên và nội dung của <output> KHÔNG được gửi trong quá trình gửi biểu mẫu.

Khả năng tiếp cận

Nhiều trình duyệt triển khai phần tử này như một vùng aria-live. Công nghệ hỗ trợ do đó sẽ thông báo kết quả của các tương tác UI được đăng bên trong nó mà không cần tiêu điểm phải chuyển khỏi các điều khiển tạo ra những kết quả đó.

Ví dụ

Trong ví dụ sau, biểu mẫu cung cấp một thanh trượt có giá trị có thể thay đổi từ 0 đến 100, và một phần tử <input> mà bạn có thể nhập một số thứ hai vào đó. Hai số được cộng lại với nhau, và kết quả được hiển thị trong phần tử <output> mỗi khi giá trị của bất kỳ điều khiển nào thay đổi.

<form id="example-form">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>

const form = document.getElementById("example-form");
const a = form.elements["a"];
const b = form.elements["b"];
const result = form.elements["result"];

function updateResult() {
  const aValue = a.valueAsNumber;
  const bValue = b.valueAsNumber;
  result.value = aValue + bValue;
}

form.addEventListener("input", updateResult);

updateResult();

Kết quả

Tóm tắt kỹ thuật

Đặc tả

Tương thích trình duyệt