<input type="hidden">

Ejemplo

<input id="prodId" name="prodId" type="hidden" value="xm234jq" />

Valor (Value)

El atributo value del elemento <input> tiene un String que contiene la informacin oculta que se desea incluir en el formulario cuando sea remitido al servidor. Especficamente 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.

Utilizando hidden inputs

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

Seguimiento de contenido editado

Uno de los usos ms comunes para los hidden inputs es mantener un seguimiento de que registros de la base de datos necesitan actualizarse cuando un formulario de actualizacin es remitido. Un flujo de trabajo tipico se ve como:

1. El usuario decide editar algn contenido sobre el cual tiene control, como una entrada de blog o la entrada de un producto. Comienza cuando se presiona el botn 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. Despus de editar, el usuario remite el formulario y la informacin actualizada es envada 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 enva el formulario en el paso 3, el ID se enva automticamente 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 podra ser en la seccin Examples de abajo.

Mejorando la seguridad del sitio web

Hidden inputs tambin son usados para almacenar y enviar token de seguirdad o secretos (secrets), con el propsito de mejorar la seguridad del sitio web. La idea bsica es que si un usuario esta rellenando un formulario con informacin sensible, como un formulario en un sitio web bancario para transferir dinero a otra cuenta, el secreto que proporciona demostrara que son quienes dicen ser y que estan usando el formulario correcto para enviar la solicitud de transferencia.

Esto evitara que un usuario malicioso creara un formulario falso, fingiendo ser un banco y enviando el formulario por correo electrnico a usuarios desprevenidos para engaarlos y que transfieran dinero al lugar equivocado. Este tipo de ataque es llamado como Cross Site Request Forgery (CSRF); prcticamente cualquier marco de trabajo que goce de buena reputacin utiliza secretos ocultos para evitar tales ataques.

Validacin

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

Ejemplos

En el cdigo de abajo se muestra como se puede implementar una versin simple de un formulario de actualizacin 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">Ttulo del artculo:</label>
    <input
      type="text"
      id="titulo"
      name="titulo"
      value="Mi excelente artculo del blog" />
  </div>
  <div>
    <label for="content">Contenido del artculo:</label>
    <textarea id="contenido" name="contenido" cols="60" rows="5">
Este es el contenido de mi excelente actculo del blog. Espero lo disfrutes!
    </textarea>
  </div>
  <div>
    <button type="submit">Actualizar artculo</button>
  </div>
  <input type="hidden" id="acticuloId" name="articuloId" value="34657" />
</form>

Aadiendo tambin unas lneas 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 artculo en la base de datos antes de enviar el formulario al navegador del usuario, y se usar esa informacin cuando el formulario sea devuelto para saber que registro de la base de datos actualizar con la informacin modificada. No se necesitan scripts en el contenido para manejar esto.

La salida se vera como:

Cuando se envan, los datos del formulario enviados al servidor tendrn 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.

Especificaciones

Compatibilidad con el navegador

Ver tambin

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