La forma más fácil de agregar máscaras de entrada a sus formularios

Las máscaras de entrada facilitan mucho que los usuarios descubran el formato requerido para completar correos electrónicos, números de teléfono, tarjetas de crédito y otros datos. Agregar máscaras a las entradas de su formulario las hace mucho mejores y es muy fácil de hacer, especialmente cuando se usa una biblioteca JS.

En este artículo, hemos preparado para usted una plantilla de formulario de Bootstrap 4 con máscaras de entrada listas para usar listas para usar. Al igual que todos nuestros regalos, ¡es de uso completamente gratuito!

La plantilla

La plantilla está construida completamente con componentes Bootstrap 4. Tiene un diseño limpio y moderno, el HTML es totalmente compatible con el marco y el CSS es autónomo, por lo que cuando lo usa, no romperá el resto de sus estilos.

Hemos utilizado jQuery Mask Plugin para crear las máscaras de entrada para los campos de formulario. Es realmente fácil de usar e implementar, y tiene muchas opciones de personalización.

Cómo usar

Para utilizar la plantilla, siga estos sencillos pasos:

  1. Obtenga el archivo zip de la Descarga cerca de la parte superior de la página y extráigalo.
  2. Pegue el código HTML en su proyecto. Asegúrese de tener Bootstrap 4 en esa página.
  3. Los estilos se encuentran en un archivo CSS separado. Enlace al archivo o copie su contenido y agréguelo a sus estilos.
  4. Agregue los archivos CSS y JS del complemento de máscara de jQuery e inicialícelos en una etiqueta de secuencia de comandos - $('#birth-date').mask('00/00/0000'); Asegúrese de incluir el complemento de máscara después de jQuery.

Máscaras de entrada en Bootstrap Studio

Otra forma rápida de configurar máscaras de entrada es mediante Bootstrap Studio. La aplicación hace que sea muy fácil crear el HTML correcto, incluir la biblioteca de JavaScript y configurar las máscaras a tu gusto.

Hemos preparado un sencillo tutorial paso a paso que cubre todo lo que necesita hacer. Puedes comprobarlo en la sección de tutoriales de Bootstrap Studio.

Gratis para uso comercial

Tiene todos los derechos para personalizar y utilizar estas plantillas en proyectos personales y comerciales. Todos nuestros obsequios son 100% libres de regalías, no se requiere atribución (nuestra página de licencia). ¡Disfrútalo!