input type="password"

Índice

Ejemplos de input type="password"

La etiqueta <input> tiene como valor "password" en su atributo type, input type="password" esto simboliza a un campo para contraseñas. No confundamos con los campos de texto, su gran diferencia es que este atributo "password" su valor tiene oculto, es decir que generalmente viene reemplazado por características simbólicas, en la mayoría de los casos es representada por asterisco (*) o un punto (•) y el más ventajoso de este atributo es que el usuario no puede copiar al portapapeles. Para medida de seguridad este valor no debe ser conocida por cualquier intruso que no sea por el usuario.

Con el objetivo de proteger cuentas o los robos de acceso(contraseñas), los formularios en su mayoría obligan a los usuarios elegir contraseñas fuertes, es decir el usuario debe ingresar una contraseña mezclando con caracteres, en estos casos es bueno utilizar el atributo pattern, esto especifica un conjunto de el requerimientos que se debe de cumplir.

indice del tema

Ejemplos de input type="password"

En este ejemplo hemos creado tres campos para recolectar su nombre del usuario en, contraseña (input type="password") y un botón de envío del formulario, para facilitar al usuario, utilizaremos el atributo placeholder, esto nos permite mostrar un texto en el campo, una vez que el usuario comience a escribir este texto automáticamente desaparece o removida.

<form>
    <fieldset>
        <legend> registrarse</legend>
        <input type="text" placeholder="nombre">
        <input type="password" placeholder="contraseña">
        <input type="submit" >
    </fieldset>
</form>

En este ejemplo nos adentraremos más al tema, por ello utilizaremos nuevos atributos de html5, atributos: pettern y required, atributos se vuelven muy importantes a la hora de Establecer un conjunto de reglas acerca de la información que debe ser rellenada en el formulario.

El atributo pattern, es solamente utilizado en la etiqueta <input>, esto nos permite definir nuestras propias reglas, esto para validar su valor de entrada al campo password. En nuestro caso pattern="[A-Za-z0-9]+", este campo acepta letras mayúscula y minúscula y números.
Por otro lado tenemos el atributo requiered, esto nos permitirá no dejar este campo vacío.
El atributo title nos permite dar una explicación de las reglas del ingreso de texto al campo.

<form>
       <fieldset>
           <legend>PASSWORD</legend>
           <input type="text" placeholder="nombre" name="nombre" required>
           <input type="password" placeholder="contraseña" pattern="[A-Za-z0-9]+" title="Una contraseña debe contener letras y numeros" required>
           <input type="submit">
       </fieldset>
 </form>