Los formularios se utilizan en las páginas web para que el usuario ingrese los detalles requeridos que luego se envían al servidor para su procesamiento. Un formulario también se conoce como formulario web o formulario HTML. En este artículo, aprenderá a crear un formulario de inicio de sesión y registro deslizante receptivo utilizando HTML, CSS y Javascript.
El quid principal de este artículo es deslizar el formulario en un movimiento de izquierda a derecha al hacer clic en los botones y esto se puede hacer usando el método animate() en JQuery, que es un método incorporado en jQuery que se usa para cambiar el estado del elemento con estilo CSS.
Sintaxis:
(selector).animate({styles}, para1, para2, para3);
El uso del método animate() en JQuery se analiza más adelante en este artículo.
Implementación paso a paso:
Código HTML: Primero agregaremos el código HTML para formar la estructura básica del formulario de inicio de sesión y registro.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> </head> <body> <div id="background"> <div class="background-Right"></div> <div class="background-Left"></div> </div> <div id="slide"> <div class="top"> <div class="left"> <div class="content"> <h2>Sign Up</h2> <form method="post" onsubmit="return false;"> <div> <input type="text" placeholder="email" /> <br /> <input type="password" placeholder="password" /> </div> </form> <button id="LeftToRight" class="on-off">Login </button> <button>Register</button> </div> </div> <div class="right"> <div class="content"> <h2>Login</h2> <form method="post" onsubmit="return false;"> <div> <input type="text" placeholder="email" /> <br /> <input type="password" placeholder="password" /> </div> <button id="RightToLeft" class="on-off">Register </button> <button>Login</button> </form> </div> </div> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA