Mostrar y Ocultar contraseñas de elementos de formulario HTML usando JavaScript, Bootstrap 4> y FontAwesome 5>

En este sencillo HowTo aprenderás a ocultar y mostrar contraseñas de elementos de formulario usando JavaScript, Bootstrap 4> y Fontawesome 5>.

Para ello vamos a necesitar hacer uso de los siguientes lenguajes y frameworks:

  • HTML5, para poder crear el formulario.
  • CSS, para poder ubicar el botón que mostrará y ocultará la clave.
  • Bootstrap 4>, el framework que nos permite maquetar el formulario.
  • FontAwesome 5>, el framework que usaremos para para mostrar los iconos que nos permiten interactuar con los elementos del formulario.
  • JavaScript, que incluye los eventos de escucha para interaccionar con los elementos del formulario.

Para ver un ejemplo en funcionamiento haz clic aquí. Para descargar el código del ejemplo puedes visitar JSFiddle. Recuerda que hay muchas formas de realizar este ejemplo, ya sea simplicándolo con jQuery, Bootstrap JS y similares y qué esta es otra opción válida como cualquier otra.

Frameworks y elementos HTML

Para empezar necesitamos incrustar los frameworks que vamos a utilizar. Recordemos que vamos a necesitar tanto Bootstrap 4> como Fontawesome 5>, por lo que los incluiremos en la cabecera de nuestra página web.

El siguiente paso es incluir los elementos del formulario que necesitaremos mostrar al usuario.

Maquetación CSS

Vamos a incluir una clase CSS para poder ubicar el icono que permite al usuario interactuar con el elemento INPUT de formulario.

Eventos Javascript

Por último incluiremos el código JavaScript, que incluye un evento click que controla cada interacción del usuario con el icono de mostrar y ocultar clave.

Los códigos y una demo del ejemplo se pueden descargar de JSFiddle.

Etiquetado

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.