Elemento output

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento output representa la salida de un cálculo o proceso, normalmente llevado a cabo por un programa. Este cálculo puede estar basado en los valores de los campos de un formulario (form), en cual caso, el atributo for se vuelve semánticamente útil al referenciar los elementos o controles que tomaron parte en el proceso.

El elemento output es puramente semántico y debería ser usado siempre para mostrar los resultados de un cálculo o proceso llevado a cabo en el documento.

El atributo for debería contener una lista de identificadores separados por espacios, cada uno de los cuales debería coincidir con el atributo id de un elemento o control usado en el cálculo.

Ejemplos

En este ejemplo, usaremos al elemento output para mostrar el resultado de una operación de potencia entre los números provistos por un par de entradas numéricas. La operación será llevada a cabo por un programa del lado cliente definido en otro lugar.

Nota como el elemento output hace referencia a ambos campos participantes en la operación, al listar sus atributos id en for. Los controles, por su parte, tienen sus atributos id apropiadamente declarados, para que el elemento output haga la referencia y para que el programa pueda recuperar sus valores.

<p>Base: <input type="number" id="base" value="0" min="0" max="30"></p>
<p>Exponente: <input type="number" id="exponente" value="0" min="0" max="30"></p>
<p><input type="button" value="Calcular" onclick="mostrarPotencia()"></p>
<p>Resultado: <output id="potencia" for="base exponente"></output></p>

Base:

Exponente:

Resultado:

Ahora, simularemos la reacción del público al volumen de la música, sando un control de rango, nuevo en HTML5. La idea es obtener el valor del control de rango y, basado en este, mostrar la respuest del público en el elemento output.

<p>Volumen de la música: <input type="range" id="volumenmusica" onchange="mostrarReaccionAudiencia()"></p>
<p>Reacción de la audiencia: <output id="reaccionaudiencia" for="volumenmusica"></output></p>

Volumen de la música:

Reacción de la audiencia:

Por último, simularemos un formulario de registración, en el que un programa verifica inmediatamente si el nombre de usuario elegido no se encuentra ya registrado en el sitio web. Por supuesto que este programa no tiene una base de datos con la que hacer la comprobación, de modo que solo simulará los resultados aleatoriamente.

<p>
  Nombre de usuario: <input type="text" id="usuario" onkeyup="mostrarNombreUsuario()">
  <output id="disponibilidadusuario" for="usuario"></output>
</p>

Nombre de usuario:

Atributos

Atributos específicos

for

Una lista de identificadores separados por espacios, que coinciden con los valores de los atributos id de los elementos o controles que participan en el cálculo o proceso. Este atributo es puramente semántico.

Ejemplo

<p>
  Palabra: <input type="text" id="palabra" onkeyup="buscarSinonimos()">
  <output id="sinonimos" for="palabra"></output>
</p>

form

El valor del atributo id del formulario con el que este control está asociado.

Este atributo es nuevo en HTML5 y ayuda a definir la pertenencia de los controles en formularios anidados o distantes.

Ejemplo

<form id="formulario1" oninput="sugerirSimilares()">
  <p><input type="text" id="auto" name="auto"></p>
</form>
<p><output id="sugerencias" for="auto" form="formulario1"></output></p>

name

Un nombre para la salida, para ser usado en el envío del formulario y en programas del lado cliente.

Actualmente, el valor isindex, antiguamente utilizado de manera especial por algunos navegadores e incluido en el estándar HTML, no está permitido en este atributo.

Ejemplo

<p>
  Número: <input type="number" id="numero" onkeyup="obtenerRaizCuadrada()">
  <output id="raizcuadrada" name="raizcuadrada" for="numero"></output>
</p>

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.