Cómo personalizar formularios de inicio de sesión para usuarios web
Esta sección utiliza el elemento de formulario para implementar la estructura del formulario. También se utilizan dos etiquetas y la etiqueta de entrada denominada resultado para ayudar a completar el formulario sin necesidad de actualizarlo. El cuadro de entrada del número de teléfono móvil se verifica mediante la función de verificación automática del formulario, mientras que el cuadro de entrada de contraseña no se puede verificar debido al método de verificación propio del formulario, por lo que no se escribe ninguna verificación en el formulario. La lógica del botón de inicio de sesión también se implementa mediante JavaScript. El primer elemento div con clase msg se usa para mostrar información de error de entrada, y las dos etiquetas span se usan para recordarle al usuario en cualquier momento debajo del cuadro de entrada.
Implementación HTML
parte css:
Vemos en la hoja de estilos css que los últimos cinco selectores no aparecen en HTML, están en el Input correspondiente El estado, como los errores de entrada, se agrega dinámicamente al estilo mediante JavaScript para solicitar al usuario errores de entrada o un inicio de sesión exitoso. Los estilos anteriores definen la ubicación, apariencia y otras propiedades del cuadro de inicio de sesión en la página.
hoja de estilo CSS:
Parte de JavaScript:
Esta parte es más complicada, la veremos por partes. Toda la parte de JavaScript utiliza funciones anónimas para implementar la lógica de la página.
La siguiente figura muestra la primera mitad de la función anónima. Primero extrae el elemento de formulario form y el elemento de visualización del mensaje de advertencia, y los guarda en las variables form y nmsg para su uso posterior. Luego, define las funciones de procesamiento en caso de errores de ingreso de números de teléfonos móviles, errores de validación de formularios y reingreso de usuarios.
Parte de implementación de JavaScript (a)
La siguiente figura muestra la segunda mitad de la función anónima: aquí, al agregar eventos a elementos relevantes, el cuadro de inicio de sesión se implementa en diferentes estados. Visualización de mensajes rápidos y lógica de verificación de contraseña, al llamar a las funciones definidas en la parte superior y los métodos y atributos que vienen con el formulario DOM, realice una visualización de mensajes rápidos personalizados en los estados de inicio de sesión fallido, exitoso, fallido de verificación y otros.