HTML - output 标签

HTML <output>标签是一个灵活且未被使用的组件，它使程序员能够在内容中动态显示计算或脚本的结果。它提供了一种快速而有意义的方式来显示用户活动或计算的结果，从而改善了整体用户体验。

它可以用于表单、数学相关材料或文档的任何其他需要提供动态输出的部分，因为它是一个自闭合标签，这意味着它不需要闭合标签。

语法


<output> </output>

属性

<output> 标签支持 HTML 的全局属性和事件属性。还有一些特定的属性，这些属性在下面列出：

属性	值	描述
for	element_id	其他元素的 ID 列表，即它表示为计算贡献了输入值的元素。
form	form_id	允许将输出元素放置在文档中的任何位置。
name	name	定义元素的名称。

<output> 标签示例

下面的示例将说明<output> 标签的用法。在哪里、何时以及如何使用它来创建输出部分，以及我们如何使用 CSS 设置输出的样式。

创建<output> 标签元素

以下示例，我们在其中提供范围滑块和输入字段，并考虑用户给定值的总和。


<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML output tag</title>
</head>
<body>
   <!--create output element-->
   <form oninput="add.value = parseInt(n1.value) + parseInt(n2.value)">
      <input type="range" min="0" max="100" name='n1' value="10">
      <input type="number" name='n2' value="20">
      <br> Output: <output name='add'></output>
   </form>
</body>
</html>

基于两个输入字段的输出

考虑到另一种情况，我们将采用两个具有预定义值的输入字段，并将输出作为两个值的组合进行检索。


<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML output tag</title>
</head>
<body>
   <!--create output element-->
   <form oninput="add.value = (txt1.value).concat(txt2.value)">
      <input type="text" name='txt1' value="HTML">
      <input type="text" name='txt2' value="CSS">
      <br> Output: <output name='add'></output>
   </form>
</body>
</html>

算术运算的输出

在以下示例中，我们将执行算术运算。


<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML output tag</title>
</head>

<body>
    <!--create output element-->
    <form oninput="sum.value = parseInt(n1.value) 
   + parseInt(n1.value) + parseInt(n3.value)">
        <input type="range" value="10" name='n1'> +
        <input type="number" value="5" name='n2'> +
        <input type="number" value="10" name='n3'> =
        <output name='sum'></output>
    </form>
</body>

</html>

样式输出元素

让我们看一下以下示例，我们将在其中将 CSS 应用于输出标签。


<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML output tag</title>
   <style>
      output {
         width: 200px;
         height: 50px;
         color: blue;
         padding: 10px;
         background-color: cadetblue;
         font-size: 20px;
      }
   </style>
</head>
<body>
   <!--create output element-->
   <form oninput="sum.value = parseInt(n1.value) + parseInt(n1.value)">
      <input type="range" value="5" name='n1'> 
      + 
      <input type="number" value="2" name='n2'>
      <br>
      <br> Output: <output name='sum' for="n1 n2"></output>
   </form>
</body>
</html>

支持的浏览器

浏览器
<output>	10.0	13.0	4.0	5.1	11.0

打印本页