Cómo crear: formulario de registro
- Página anterior Tabla de inicio de sesión social
- Página siguiente Formulario con íconos
Aprende a usar CSS para crear formularios de registro.
Cómo crear un formulario de registro
Paso 1 - Añadir HTML:
Utilice el elemento <form> para manejar las entradas. Puede obtener más información sobre esto en nuestros tutoriales de PHP.
Luego, agregue controles de entrada para cada campo (con etiquetas correspondientes):
<form action="action_page.php"> <div class="container"> <h1>Registrarse</h1> <p>Por favor, complete este formulario para crear una cuenta.</p> <hr> <label for="email"><b>Correo Electrónico</b></label> <input type="text" placeholder="Ingresar Correo Electrónico" name="email" id="email" required> <label for="psw"><b>Contraseña</b></label> <input type="password" placeholder="Ingresar Contraseña" name="psw" id="psw" required> <label for="psw-repeat"><b>Repetir Contraseña</b></label> <input type="password" placeholder="Repetir Contraseña" name="psw-repeat" id="psw-repeat" required> <hr> <p>Al crear una cuenta, aceptas nuestros <a href="#">Términos y Privacidad</a>.</p> <button type="submit" class="registerbtn">Registrarse</button> </div> <div class="container signin"> <p>¿Ya tienes una cuenta? <a href="#">Iniciar sesión</a>.</p> </div> </form>
Segundo paso - Añadir CSS:
* {box-sizing: border-box} /* Añadir margen interno a la contenedor */ .container { padding: 16px; } /* Campos de entrada de ancho completo */ input[type=text], input[type=password] { width: 100%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: #f1f1f1; } input[type=text]:focus, input[type=password]:focus { background-color: #ddd; outline: none; } /* Cubrir estilo predeterminado de hr */ hr { border: 1px solid #f1f1f1; margin-bottom: 25px; } /* Establecer estilo para el botón de enviar/registrarse */ .registerbtn { background-color: #04AA6D; color: white; padding: 16px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9; } .registerbtn:hover { opacity:1; } /* Añadir color azul a los enlaces */ a { color: dodgerblue; } /* Establecer fondo gris para la sección de “Iniciar sesión” y centrar el texto */ .signin { background-color: #f1f1f1; text-align: center; }
Páginas relacionadas
Tutoriales:Formulario HTML
Tutoriales:Formulario CSS
- Página anterior Tabla de inicio de sesión social
- Página siguiente Formulario con íconos