<output>El elemento <output> en HTML5 se utiliza principalmente para representar el resultado de un cálculo o de una operación realizada por el usuario. Es especialmente útil en formularios interactivos y dinámicos, donde los resultados pueden variar según las entradas del usuario. La etiqueta <output> hace que el resultado sea fácilmente accesible y manipulable, mejorando la accesibilidad y la semántica del documento.
<output>name:
<output name="resultado"></output>for:
output con uno o más elementos de formulario mediante sus identificadores (ID). Esto especifica qué elementos influyen en el resultado mostrado.<output for="input1 input2"></output>form:
<output>, utilizando el atributo id del formulario.<output> no está contenido dentro del formulario al que se refiere.<output form="formulario1"></output><output> en HTML5 con Ejemplos SencillosA continuación, se presentan varios ejemplos de cómo usar el elemento <output> en HTML5, mostrando sus casos de uso más comunes.
Este ejemplo muestra cómo usar el elemento <output> para mostrar el resultado de la suma de dos números proporcionados por el usuario.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Output</title>
<script>
function calcularSuma() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var resultado = num1 + num2;
document.getElementById('resultado').value = resultado;
}
</script>
</head>
<body>
<form>
<label for="num1">Número 1:</label>
<input type="number" id="num1">
<label for="num2">Número 2:</label>
<input type="number" id="num2">
<button type="button" onclick="calcularSuma()">Calcular</button>
<label for="resultado">Resultado:</label>
<output id="resultado" name="resultado"></output>
</form>
</body>
</html>Este ejemplo demuestra cómo el elemento <output> puede ser usado para mostrar la puntuación media de una encuesta de satisfacción basada en múltiples entradas.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Encuesta de Satisfacción</title>
<script>
function calcularMedia() {
var rating1 = parseInt(document.getElementById('rating1').value);
var rating2 = parseInt(document.getElementById('rating2').value);
var rating3 = parseInt(document.getElementById('rating3').value);
var media = (rating1 + rating2 + rating3) / 3;
document.getElementById('media').value = media.toFixed(1);
}
</script>
</head>
<body>
<form>
<p>Por favor califica las siguientes áreas del 1 al 5:</p>
<label for="rating1">Atención al cliente:</label>
<input type="number" id="rating1" min="1" max="5" value="3" onchange="calcularMedia()">
<label for="rating2">Calidad del producto:</label>
<input type="number" id="rating2" min="1" max="5" value="4" onchange="calcularMedia()">
<label for="rating3">Rapidez en el servicio:</label>
<input type="number" id="rating3" min="1" max="5" value="5" onchange="calcularMedia()">
<p>Puntuación media: <output id="media" name="media"></output></p>
</form>
</body>
</html>Estos ejemplos ilustran cómo el elemento <output> puede mejorar la interactividad y la presentación de resultados en páginas web, asegurando además una buena accesibilidad y semántica del contenido.