Elemento input (type=password)

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 input, teniendo el valor "password" en su atributo type, representa un campo para contraseñas. Los campos de contraseñas son muy similares a los campos de texto, con la diferencia de que su valor es ocultado (generalmente, reemplazando sus caracteres con un símbolo carente de significado) y no se les permite a los usuarios copiarlo al portapapeles. Esto actúa como una medida de seguridad que previene que el valor sea conocido por cualquier persona que no sea el usuario.

Para prevenir el robo de contraseñas, los autores habitualmente obligan a los usuarios a elegir contraseñas fuertes (con una buena mezcla de caracteres). El atributo pattern puede jugar un rol en estas situaciones, al especificar un conjunto de requerimientos que se deberán respetar.

Ejemplos

En nuestro primer ejemplo crearemos dos campos para recolectar un nombre de usuario y una contraseña. Allí, haremos uso del atributo placeholder, el cual ha sido introducido en HTML5. Este atributo nos permite dar una pista acerca de la información que se espera sea provista en el control, como ejemplos o descripciones cortas. Esta pista será mostrada dentro del control (como si fuera el valor) sólo cuando el control no tenga un valor real. Cuando el usuario comience a tipear, el texto de placeholder será removido del control.

<form action="../../form-result.php" method="post" target="_blank">
  <p>Nombre de usuario: <input type="text" name="usuario" placeholder="Usuario para acceder"></p>
  <p>Contraseña: <input type="password" name="pass" placeholder="Elije una contraseña fuerte"></p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Nombre de usuario:

Contraseña:

Nuestro segundo ejemplo combina dos atributos, también nuevos en HTML5, que habitualmente trabajan juntos. Estos son pattern y required. Su importancia se vuelve evidente cuando el autor necesita establecer un conjunto de reglas acerca del formato de la información que puede ser ingresada en un control.

El atributo pattern, ayuda estableciendo expresiones regulares que cualquier valor ingresado debe acatar. Cuando está presente, el atributo title toma particular relevancia, ya que es responsable de proveer una explicación acerca de las reglas que aplican en el campo. Los navegadores pueden usar esta información para componer el mensaje de error que se muestra al usuario luego de un intento fallido de envío.

Por otra parte, el atributo required impide a los usuarios dejar el campo vacío. Ambos atributos, juntos, indican que el control debe ser rellenado y especifican cómo debe ser rellenado.

La presencia de estos atributos implica que el envío del formulario será interrumpido hasta que sus requerimientos sean satisfechos. Los navegadores mostrarán mensajes de error cuando el usuario intente enviar campos que no cumplen las premisas.

Una expresión regular es una secuencia de caracteres que forman un patrón de búsqueda, principalmente para su uso en correspondencia de patrones y cadenas u operaciones estilo búsqueda y reemplazo.

El soporte provisto por los navegadores para el atributo required es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

<form action="../../form-result.php" method="post" target="_blank">
  <p>Nombre de usuario: <input type="text" name="usuario"></p>
  <p>Contraseña: <input type="password" name="pass" pattern="[A-Za-z][A-Za-z0-9]*[0-9][A-Za-z0-9]*" title="Una contraseña válida es un conjuto de caracteres, donde cada uno consiste de una letra mayúscula o minúscula, o un dígito. La contraseña debe empezar con una letra y contener al menor un dígito" required></p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Nombre de usuario:

Contraseña:

Atributos

Atributos específicos

autofocus

Un valor booleano que instruye al navegador a establecer el enfoque sobre este control cuando el documento termina de cargarse o cuando el cuadro de diálogo (dialog) donde el control se encuentra es mostrado. Si el atributo tiene el valor "autofocus" o la cadena vacía (""), o si simplemente está presente, el control debería obtener el enfoque tan pronto como sea posible, luego de que la página o cuadro de diálogo hayan sido cargados.

Ejemplo

<p>Contraseña: <input type="password" name="pass" autofocus></p>

disabled

Un valor booleano que indica si el control se encuentra deshabilitado o no. Si el atributo toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el control estará deshabilitado.

Los controles deshabilitados son representados en color gris (si son visibles), son impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no son enviados cuando el formulario es despachado.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Nueva contraseña: <input type="password" name="nuevopass" disabled>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Nueva contraseña:

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

<p>Contraseña: <input type="password" name="pass" form="formulario1"></p>
<form id="formulario1" action="../../form-result.php" method="post" target="_blank">
  <p><input type="submit" value="Enviar datos"></p>
</form>

Contraseña:

maxlength

Un entero que indica el número máximo de caracteres que el valor de este control puede tener.

Los autores no deberían confiar en el atributo maxlength. Los usuarios podrían enviar la información del formulario con navegadores que (algunos intencionalmente) no soportan estas características.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Contraseña: <input type="password" name="pass" maxlength="40">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Contraseña:

minlength

Un entero que indica el número mínimo de caracteres que el valor de este control puede tener.

Los autores no deberían confiar en el atributo minlength. Los usuarios podrían enviar la información del formulario con navegadores que (algunos intencionalmente) no soportan estas características.

El soporte provisto por los navegadores para el atributo minlength es extremadamente bajo (hasta el 18/12/2014). Los autores no deberían confiar en este atributo hasta que el soporte crezca.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Contraseña: <input type="password" name="pass" minlength="8">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Contraseña:

name

Un nombre para el control. Este nombre será enviado por el navegador al agente procesador, emparejado con el contenido del atributo value. Ambos atributos juntos conformarán un par nombre-valor que será utilizado para procesar la información del formulario.

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

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Nueva contraseña: <input type="password" name="nuevopass">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Nueva contraseña:

pattern

Una expresión regular para comparar con el valor del control antes de que el formulario sea enviado. Este atributo puede ser usado para especificar un formato que los usuarios tendrán que respetar a la hora de completar el campo. Si este patrón no es respetado, un mensaje de error será mostrado durante el envío y el proceso será cancelado (a menos que el atirbuto formnovalidate esté presente en el formulario o en el botón de envío).

El atributo title toma un significado especial cuando este atributo está presente: se espera que éste provea una explicación acerca de las reglas que aplican en el campo. Los navegadores pueden usar la información de title para componer el mensaje de error que es mostrado al usuario cuando el proceso de envío es cancelado.

Una expresión regular es una secuencia de caracteres que forman un patrón de búsqueda, principalmente para su uso en correspondencia de patrones y cadenas u operaciones estilo búsqueda y reemplazo.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    : <input type="password" name="pass" pattern="[A-Za-z0-9@#$%]{8,20}" title="Una contraseña válida es una cadena con una longitud entre 8 y 20 caracteres, donde cada uno consiste en una letra mayúscula o minúscula, un dígito, o los símboloss '@', '#', '$' y '%'">
    <input type="submit" value="Enviar datos">
  </p>
</form>

:

placeholder

Una línea de texto que se supone provee una pista acerca de cómo debería ser rellenado el campo, como ejemplos o descripciones cortas. Los navegadores pueden mostrar los contenidos de este atributo en el control mientras este no tiene un valor. Tan pronto como el usuario comience a escribir su propio texto, el texto placeholder debería desaparecer del control.

Los autores no deberían utilizar este atributo para reemplazar a la etiqueta. Las etiquetas están pensdas para proveer un título, mientras que el texto placeholder debería dar una pequeña pista acerca de cómo rellenar el campo. Además, es de esperarse el texto placeholder desaparezca cuando el usuario comience a escribir en el control.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Contraseña: <input type="password" name="pass" placeholder="Prefiere una contraseña segura">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Contraseña:

readonly

Un valor booleano que instruye al navegador a impedir que el usuario cambie el valor del control. Si este atributo tiene el valor "readonly" o la cadena vacía (""), o si simplemente está presente, el usuario no tendrá premitido hacer cambios al valor en el control.

Aunque este atributo previene que el valor del control sea editado, no toda interacción es bloqueada: los usuario aún podrán seleccionar y copiar el texto en el control.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Contraseña: <input type="password" name="pass" value="default" readonly>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Contraseña:

required

Un valor booleano que indica si este control puede ser dejado en blanco o no. Si este atributo tiene el valor "required" o la cadena vacía (""), o si está siplemente presente, el usuario tendrá que rellenar el control a fin de poder enviar el formulario.

Si un control con el atributo required presente es dejado en blanco, los navegadores que soporten este mecanismo arrojarán un error previo al envío y cancelarán el proceso inmediatamente.

El soporte provisto por los navegadores para el atributo required es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Password: <input type="password" name="pass" required>
    <input type="submit" value="Send data">
  </p>
</form>

Password:

size

Un entero para ser usado como ancho del elemento, como un número de caracteres que deberian ser visibles en el control simultáneamente.

Como los caracteres normalmente no tienen el mismo ancho, los navegadores pueden definir el ancho de carácter de acuerdo a ciertos criterios (como ancho promedio o máximo).

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Password: <input type="password" name="pass" size="20">
    <input type="submit" value="Send data">
  </p>
</form>

Password:

type

Un valor que indica el tipo de campo que representa este elemento. Existen veintidós valores posibles (insensibles a mayúsculas/minúsculas):

  • hidden: un control oculto utilizado para enviar información al servidor, típicamente manejado por programas.
  • text: un control usado para la entrada de una sola línea de texto.
  • search: igaul a text pero con fines de búsqueda.
  • tel: un control usado para proveer un número de teléfono.
  • url: una caja de texto usada para el ingreso de un único URL absoluto.
  • email: un control diseñado para editar una o más direcciones de e-mail.
  • password: una caja de texto para la edición de contraseñas, donde los caracteres son representados por puntos.
  • date: un control para ingresar una fecha específica.
  • month: un control para ingresar un mes específico.
  • week: un control para ingresar una semana específica.
  • time: un control para ingresar una hora específica.
  • datetime-local: un control para ingresar una fecha y hora local específica.
  • number: un control para ingresar un número.
  • range: un control para ingresar uno o dos números dentro de un rango.
  • color: un control para ingresar un color.
  • checkbox: un control para ingresar un valor booleano (verdadero/falso).
  • radio: un control para elegir una única opción entre varias.
  • file: un control usado para subir archivos al servidor.
  • submit: un botón usado para enviar el formulario.
  • image: igual a submit pero con la habilidad de verse como una imagen en lugar de usar la apariencia predeterminada de los botones.
  • reset: un botón usado para reiniciar los controles del formulario a sus valores iniciales.
  • button: un botón sin una acción predeterminada asociada.

Cuando este atributo está ausente, el elemento se comporta como si tuviera el valor "text".

Ejemplo

<input type="password" name="pass">

value

Un valor inicial para el control, que será establecido cuando la página se cargue y cuando el botón de reinicio sea presionado.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>Contraseña anterior: <input type="password" name="passanterior" value="123456"></p>
  <p>
    <input type="submit" value="Enviar datos">
    <input type="reset" value="Restaurar formulario">
  <p>
</form>

Contraseña anterior:

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.