En este artículo, aprenderemos cómo hacer un formulario de suscripción adaptable en HTML y CSS. También veremos cómo agregar una validación de contraseña simple usando javascript.
Para cualquier tipo de sitio web, un formulario de registro es esencial. Los clientes tendrán una manera fácil de obtener más información sobre su organización si tiene un formulario de suscripción en su sitio web. Más importante aún, estás permitiendo que tu negocio obtenga acceso al tipo correcto de suscriptores y sus datos (con su permiso, por supuesto).
El código de esta plantilla de formulario de suscripción es simple y fácil de entender. Para nuestra comodidad, hemos incluido el estilo y el código javascript dentro del archivo HTML principal. hemos utilizado el formulario HTML para dar una estructura básica al formulario de suscripción. Hemos tratado de crear un diseño neumórfico para esta forma.
Para la validación de contraseñas, hemos utilizado coincidencia de patrones de expresiones regulares utilizando javascript. Para leer más sobre esto, visite-Expresiones regulares. Para este diseño en particular, hemos establecido el patrón de contraseña de manera que debe ser alfanumérico con 8-15 caracteres. Si la contraseña introducida por el usuario no sigue el patrón, el borde del campo de entrada de contraseña cambia a rojo y si coincide, se vuelve verde. Similar es para confirmar contraseña también. Además, el formulario también comprueba si la contraseña introducida en el campo confirmar entrada de contraseña coincide con la contraseña introducida anteriormente o no.
A continuación se muestra el código fuente del formulario de suscripción HTML. Le recomendamos que vea el video incrustado a continuación junto con el código.
CÓDIGO:
Puede descargar el código HTML del formulario de suscripción desde este enlace.
Leer también:
- ¿Cómo Hacer una Página de Inicio de sesión Transparente y Adaptable en HTML y CSS ?
- ¿Cómo crear una plantilla de página de contacto adaptable usando HTML y CSS?
- ¿Cómo hacer un formulario de inicio de sesión básico y un formulario de registro utilizando HTML y CSS?
- ¿Cómo hacer que la página 404 responsiva no se encuentre en HTML y CSS?