HTML <output> 标签

简介

HTML <output> 标签用于在网页上显示计算结果。它可以接收来自不同的计算源（如脚本或用户输入）的输出，并将结果显示给用户。

语法

<output for="id_ref" form="form_id">
    <!-- 需要显示的结果内容 -->
</output>

• for 属性指定了与输出结果相关联的元素的 id。
• form 属性指定了包含输出元素的表单的 id。如果没有指定 form 属性，则 <output> 元素必须在 <form> 元素内部。

用法

<form id="myForm">
  <input type="text" id="num1">
  <input type="text" id="num2">
  <output for="num1 num2" form="myForm"></output>
  <button onclick="calculate()">计算</button>
</form>

function calculate() {
  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;
  var sum = parseInt(num1) + parseInt(num2);
  document.getElementById("output").value = sum;
}

上述代码中，我们创建了一个简单的表单，其中有两个文本输入框和一个 <output> 元素。在按钮的点击事件处理函数中，我们通过获取两个输入框的值并计算它们的和。最后，我们将计算结果赋值给 <output> 元素的 value 属性，从而实现将结果显示给用户。

支持性

<output> 标签在所有主流浏览器中支持。

• Chrome
• Firefox
• Safari
• Opera
• Edge
• Internet Explorer 10+

特性

• <output> 元素可以与 <form> 元素结合使用，通过提交表单来处理计算结果。
• <output> 元素可以与 <label> 元素结合使用，使结果更具可读性和可访问性。
• <output> 元素可以通过 CSS 进行样式化，以适应不同的设计需求。

注意事项

• 尽管 <output> 元素与表单相关，但它本身并不会导致表单提交。如果需要将计算结果提交到服务器，需要使用 JavaScript 将结果赋值给隐藏的表单输入字段，并在表单提交前手动触发提交事件。

参考链接：HTML <output> 元素 - MDN Web 文档