HTML - <output> 标签

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

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

语法

<output>
</output>

属性

HTML output 标签支持 HTML 的全局和事件属性，以及一些下面列出的特定属性。

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

HTML output 标签示例

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

创建输出元素

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

<!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 应用到 output 标签。

<!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

html_tags_reference.htm

打印页面