<input type="hidden">

El atributo value del elemento <input> tiene un DOMString que contiene la información oculta que se desea incluir en el formulario cuando sea remitido al servidor. Específicamente no puede ser editado por el usuario o mostrado a éste por medio la interfaz de usuario, aunque puede ser editado por medio de las herramientas para desarrolladores del navegador.

Como se menciono anteriormente, las hidden inputs pueden ser utilizadas donde sea que se quiera incluir información del formulario que el usuario no pueda ver o modificar cuando sea enviado al servidor. Se mostrarán algunos ejemplos que ilustran su uso.

Uno de los usos más comunes para los hidden inputs es mantener un seguimiento de que registros de la base de datos necesitan actualizarse cuando un formulario de actualización es remitido. Un flujo de trabajo tipico se ve como:

1. El usuario decide editar algún contenido sobre el cual tiene control, como una entrada de blog o la entrada de un producto. Comienza cuando se presiona el botón de editar.
2. El contenido ha ser editado es tomado de la base de datos y cargados en un formulario HTML para permitir al usuario hacer cambios.
3. Después de editar, el usuario remite el formulario y la información actualizada es envíada de vuelta al servidor para ser actualizada en el servidor.

La idea es que durante el paso 2, el ID del registro que se actualiza se mantenga en un hidden input. Cuando se envía el formulario en el paso 3, el ID se envía automáticamente al servidor con el contenido del registro. El ID permite que el componente de servidor del sitio sepa exactamente qué registro necesita ser actualizado con los datos enviados.

Puede ver un ejemplo completo de como podría ser en la sección Examples de abajo.

Hidden inputs también son usados para almacenar y enviar token de seguirdad o secretos (secrets), con el propósito de mejorar la seguridad del sitio web. La idea básica es que si un usuario esta rellenando un formulario con información sensible, como un formulario en un sitio web bancario para transferir dinero a otra cuenta, el secreto que proporciona demostraría que son quienes dicen ser y que estan usando el formulario correcto para enviar la solicitud de transferencia.

Esto evitaría que un usuario malicioso creara un formulario falso, fingiendo ser un banco y enviando el formulario por correo electrónico a usuarios desprevenidos para engañarlos y que transfieran dinero al lugar equivocado. Este tipo de ataque es llamado como Cross Site Request Forgery (CSRF); prácticamente cualquier marco de trabajo que goce de buena reputación utiliza secretos ocultos para evitar tales ataques.

Hidden inputs no participan en la validación de restricciones; no son un valor real que deba ser restringido.

En el código de abajo se muestra como se puede implementar una versión simple de un formulario de actualización descrito anteriomente (ver Tracking edited content), utilizando un hidden input para recordar el ID del registro ha ser editado.

El formulario HTML puede verse un como como este:

<form>
  <div>
    <label for="title">Título del artículo:</label>
    <input
      type="text"
      id="titulo"
      name="titulo"
      value="Mi excelente artículo del blog" />
  </div>
  <div>
    <label for="content">Contenido del artículo:</label>
    <textarea id="contenido" name="contenido" cols="60" rows="5">
Este es el contenido de mi excelente actículo del blog. ¡Espero lo disfrutes!
    </textarea>
  </div>
  <div>
    <button type="submit">Actualizar artículo</button>
  </div>
  <input type="hidden" id="acticuloId" name="articuloId" value="34657" />
</form>

Añadiendo también unas líneas simples de CSS:

html {
  font-family: sans-serif;
}

form {
  width: 500px;
}

div {
  display: flex;
  margin-bottom: 10px;
}

label {
  flex: 2;
  line-height: 2;
  text-align: right;
  padding-right: 20px;
}

input,
textarea {
  flex: 7;
  font-family: sans-serif;
  font-size: 1.1rem;
  padding: 5px;
}

textarea {
  height: 60px;
}

El servidor establecerá el valor del hidden input con el ID "articuloID" al ID del artículo en la base de datos antes de enviar el formulario al navegador del usuario, y se usará esa información cuando el formulario sea devuelto para saber que registro de la base de datos actualizar con la información modificada. No se necesitan scripts en el contenido para manejar esto.

La salida se vería como:

Cuando se envían, los datos del formulario enviados al servidor tendrán un aspecto parecido a este:

title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657

A pesar de que los hiden input no se pueden ver en absoluto, sus datos se siguen enviando.

• HTML forms guide
• <input> y la interfaz HTMLInputElement en la que se basa