Formulario de Registro HTML y CSS - Ejemplo#1
¡Saludos cibernauta! hoy en conocesobreinformatica.com te presentamos el siguiente artículo titulado: “Formulario de Registro HTML y CSS - Ejemplo#1”.
Vamos a realizar juntos un formulario de registro básico con su propio estilo en CSS, para poder lucirnos en clases. Este es el primer ejemplo de un serie de ejercicios que estaremos publicando, de antemano gracias por apoyar esta sección de: Programación.
Empecemos...
1ER BLOQUE INDEX HTML - 2DO BLOQUE ESTILO CSS
El primer bloque de código que sigue a continuación, es el bloque inicial codificado en el lenguaje HTML. El segundo bloque de código que observarás después es el bloque de estilo CSS.
IMPORTANTE: No olvides borrar los // antes de las etiquetas.
//<!DOCTYPE html>
//<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formulario</title>
<link rel="stylesheet" href="form.css">
</head>
<body>
<!--FORMULARIO---->
<form class="form">
<!--TITULO------------------------>
<h1 class="titulo">Registrarse</h1>
<!--CAJAS-DE-ENTRADA-DE-DATOS------------------------------------------------>
<input class="cajas" type="text" placeholder="Nombre" required maxlength="30">
<input class="cajas" type="text" placeholder="Apellido" required maxlength="30">
<input class="cajas" type="email" placeholder="Email" required maxlength="30">
<input class="cajas" type="password" placeholder="Password" required maxlength="30">
<!--TERMINOS-Y-CONDICIONES---------------------------------------------------------------------------------->
<p class="termino1"><input type="checkbox"> Estoy de acuerdo con <a class="termino2" href="">Terminos y Condiciones</a></p>
<!--BOTON-DE-REGISTRARSE-------------------------->
<input type="submit" class="btn" value="REGISTRAR">
<!--YA-TENGO-CUENTA----------------------------------------------------------->
<p class="tengo-cuenta"><a href="" class="tengo-cuenta">Ya tengo cuenta</a></p>
</form>
</body>
//</html>
/*--ACOMODANDO-MARGENES-PADDING--*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open sans';
}
/*--IMAGEN-DE-FONDO--------------*/
body{
background-image: url(img/fondo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
font-size: 15px;
}
/*--FORMULARIO-------------------*/
.form{
width: 450px;
padding: 30px;
margin: auto;
margin-top: 100px;
background: rgba(15, 50, 72, 0.3);
border-radius: 5px;
}
/*--TITULO-----------------------*/
.titulo{
color: #1d4169;
margin-bottom: 20px;
}
/*--CAJAS-DE-DATOS---------------*/
.cajas{
width: 100%;
padding: 15px;
margin-bottom: 20px;
border-radius: 2px;
border: none;
border-left: 10px solid #d9e4ea;
transition: all .5s ease;
}
.cajas:hover, .cajas:focus{
border-left: 10px solid #1a4c7e;
}
/*--TERMINOS-Y-CONDICIONES-------*/
.termino1{
text-align: center;
color: #3b3b3b;
}
.termino2{
color: #000000;
text-decoration: none;
font-weight: bold;
}
.termino2:hover{
color: #dbdbdb;
}
/*--BOTON-DE-REGISTRARSE---------*/
.btn{
width: 100%;
padding: 15px;
border-radius: 2px;
border: none;
margin: 20px 0;
font-size: 15px;
background: #225677;
color: white;
cursor: pointer;
transition: all .5s ease;
}
.btn:hover{
background: #133043;
}
/*--YA-TENGO-CUENTA--------------*/
.tengo-cuenta{
text-align: center;
color: #000000;
font-weight: bold;
text-decoration: none;
}
.tengo-cuenta:hover{
color: #dbdbdb;
}
A continuación y si así lo deseas, puedes procede a descargar los archivos de este Ejemplo#01:
Hemos llegamos al final de este artículo, como equipo de CSI esperamos realmente toda la información recopilada y analizada te resulte de utilidad en tus estudios o vida laboral.
Te recordamos que hoy por hoy conocesobreinformatica cuenta con las siguientes redes para mantener al tanto de toda la información nueva:
- Suscripciones de correo electrónico, se el primero en enterarte de lo que publicamos:
REGRESAR A LA CATEGORÍA:
Programación
variedad de lenguajes