Etiqueta HTML <salida>

La etiqueta <output> en HTML se usa para representar el resultado de un cálculo realizado por el script del lado del cliente, como JavaScript. La etiqueta <output> es una etiqueta nueva en HTML 5 y requiere una etiqueta de inicio y final.
 

Sintaxis: 

<output> Results... </output>

Atributos: la etiqueta de salida acepta tres atributos que se enumeran a continuación: 

  • for : este atributo contiene un valor de atributo element_id que se utiliza para especificar la relación entre el resultado y los cálculos.
  • form : este atributo contiene un valor de atributo form_id que se utiliza para especificar una o más formas de elementos de salida.
  • name : este atributo contiene un nombre de valor de atributo que se utiliza para especificar el nombre del elemento de salida.

Ejemplo 1: 

html

<!DOCTYPE html>
<html>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML output Tag</h2>
    <form oninput="sumresult.value = parseInt(A.value)
                + parseInt(B.value) + parseInt(C.value)">
        <input type="number" name="A" value="50" /> +
        <input type="range" name="B" value="0" /> +
        <input type="number" name="C" value="30" />
        <br>
        <!-- output tag -->
        Result: <output name="sumresult"></output>
    </form>
</body>
 
</html>

Producción: 
 

Ejemplo 2: En este ejemplo, la etiqueta <output> se usa con el atributo for y form. 

html

<!DOCTYPE html>
<html>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML output Tag</h2>
    <form oninput="sumresult.value = parseInt(A.value)
                + parseInt(B.value) + parseInt(C.value)">
        <input type="number" name="A" value="50" /> +
        <input type="range" name="B" value="0" /> +
        <input type="number" name="C" value="50" />
        <br /> Submit Result:
        <!-- output tag -->
        <output name="sumresult" for="A B C"></output>
        <br>
        <input type="submit">
    </form>
</body>
 
</html>

Producción: 
 

Navegadores compatibles: 

  • Google Chrome 10.0 y superior
  • Edge 18 y superior
  • Firefox 4.0 y superior
  • Ópera 11.0 y superior
  • Apple Safari 7 y superior
  • Internet Explorer no es compatible 

Publicación traducida automáticamente

Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *