Hola amigos, este es mi segundo aporte espero les sea de utilidad, como el titulo lo dise este post se trata de como crear unaformulario de registro esilo facebook, que tenga los valores por defecto y que se borren al comenzar a escribir y si borras lo escrito aparescan de nuevo, para los que son principiantes les dejo desde el principio primero en cualquier editor de texto (yo recomiendo Notepad++) creen un archivo llamado estilos.css y otro que digamos llamare formulario_face.html, bueno, despues de esto pasamos al codigo, el cual lo describo acontinuacion. en este post solo vere lo de html y lo de estilos ya subire otro con php para subir la informacion a la base de datos con MySQL
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>
Vicente Madrid
</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all"> <!--aEsta linea vincula el archivo HTML con la hoja de estilos, deven de estar en la misma carpeta ambos-->
</head>
<body>
<div class="menu_top">
<p>
       
       
XXXXXXX
</p>
</div>
<p class="reg">
Regístrate
</p>
<p class="gratis">
Es gratis y lo será siempre.
</p>
<p class="fecha">
Fecha de nacimiento
</p>
<form action="" method="post" >
<input class="nombre" type="text" name="nombre" placeholder="  Nombre" required>
<input class="apellidos" type="text" name="apellidos" placeholder="  Apellidos" required>
<input class="correo" type="text" name="correo" placeholder="  Tu correo electrónico" required>
<input class="conf_correo" type="text" name="conf_correo" placeholder="  Vuelve a escribir tu correo" required>
<input class="pass" type="password" name="contraseña" placeholder="  Contraseña" required>
<input class="registrar" type="submit" name="enviar" value="Regístrate" >
<select name="dia" id="dia" class="dia"></select>
<select name="mes" id="mes" class="mes"></select>
<select name="año" id="año" class="año"></select>
<div class="hombre">
<input type="radio" name="hombre" value="020" >
Hombre
</div>
<div class="mujer">
<input type="radio" name="mujer" value="020" >
Mujer
</div>
<div class="acepto">
Al hacer clic en Unirme, aceptas las
<a href="#">Condiciones</a> y que has leído la
<a href="#">Política de uso de datos</a>, incluido el
<a href="#">Uso de cookies</a>.
</div>
</form>
<a href="#" class="porque">
¿Por qué tengo que proporcionar mi fecha de nacimiento?
</a>
</body>
</html>
Hasta aqui todo facil y sin mucho chiste...Vamos ahora con el codigo de Estilos CSS
.menu_top{position: absolute; font-family:arial; background-color:#134578;
width: 100%; height: 13.7%; font-size: 250%; text-align:left;z-index: 10000;font-weight:bold;margin-left: -50%;top: 0%; left: 50%; color:white;}
.reg{position: absolute;left: 57%;top: 18%;width: 14%;height: 6%;margin-top: 0%;
font-family:arial; font-size: 220%; font-weight:bold; }
.gratis{position: absolute;left: 57%;top: 27%;width: 20%;height: 6%;margin-top: 0%;
font-family:Batang; font-size: 108%; }
.fecha{position: absolute;left: 57%;top: 70%;width: 20%;height: 6%;margin-top: 0%;
font-family:Batang; font-size: 100%; font-weight:bold; }
.porque{position: absolute;left: 70%;top: 73%;width: 12%;height: 6%;margin-top: 0%;
font-family:Batang; font-size: 80%;}
.dia{position: absolute;left: 57%;top: 75%;width: 4%;height: 5%;
color:white ; border: 1px solid #848484}
.mes{position: absolute;left: 61%;top: 75%;width: 4%;height: 5%;
color:white ; border: 1px solid #848484}
.año{position: absolute;left: 65%;top: 75%;width: 4%;height: 5%;
color:white ; border: 1px solid #848484}
.hombre{position: absolute;left: 63%;top: 82%;width: 6%;height: 5%;
color:black;font-weight:bold}
.mujer{position: absolute;left: 57%;top: 82%;width: 6%;height: 5%;
color:black ;font-weight:bold }
.acepto{position: absolute;left: 57%;top: 87%;width: 26%;height: 6%;margin-top: 0%;
font-family:Batang; font-size: 66%;}
.registrar{position: absolute;left: 57%;top: 94%;width: 17%;height: 7.5%;margin-top: 0%;
font-family:arial; font-size: 130%; font-weight:bold; background-color:#088A29;
color:white ;border-radius: 7px; border: 1px solid #088A29}
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>
Vicente Madrid
</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all"> <!--aEsta linea vincula el archivo HTML con la hoja de estilos, deven de estar en la misma carpeta ambos-->
</head>
<body>
<div class="menu_top">
<p>
       
       
XXXXXXX
</p>
</div>
<p class="reg">
Regístrate
</p>
<p class="gratis">
Es gratis y lo será siempre.
</p>
<p class="fecha">
Fecha de nacimiento
</p>
<form action="" method="post" >
<input class="nombre" type="text" name="nombre" placeholder="  Nombre" required>
<input class="apellidos" type="text" name="apellidos" placeholder="  Apellidos" required>
<input class="correo" type="text" name="correo" placeholder="  Tu correo electrónico" required>
<input class="conf_correo" type="text" name="conf_correo" placeholder="  Vuelve a escribir tu correo" required>
<input class="pass" type="password" name="contraseña" placeholder="  Contraseña" required>
<input class="registrar" type="submit" name="enviar" value="Regístrate" >
<select name="dia" id="dia" class="dia"></select>
<select name="mes" id="mes" class="mes"></select>
<select name="año" id="año" class="año"></select>
<div class="hombre">
<input type="radio" name="hombre" value="020" >
Hombre
</div>
<div class="mujer">
<input type="radio" name="mujer" value="020" >
Mujer
</div>
<div class="acepto">
Al hacer clic en Unirme, aceptas las
<a href="#">Condiciones</a> y que has leído la
<a href="#">Política de uso de datos</a>, incluido el
<a href="#">Uso de cookies</a>.
</div>
</form>
<a href="#" class="porque">
¿Por qué tengo que proporcionar mi fecha de nacimiento?
</a>
</body>
</html>
Hasta aqui todo facil y sin mucho chiste...Vamos ahora con el codigo de Estilos CSS
.menu_top{position: absolute; font-family:arial; background-color:#134578;
width: 100%; height: 13.7%; font-size: 250%; text-align:left;z-index: 10000;font-weight:bold;margin-left: -50%;top: 0%; left: 50%; color:white;}
.reg{position: absolute;left: 57%;top: 18%;width: 14%;height: 6%;margin-top: 0%;
font-family:arial; font-size: 220%; font-weight:bold; }
.gratis{position: absolute;left: 57%;top: 27%;width: 20%;height: 6%;margin-top: 0%;
font-family:Batang; font-size: 108%; }
.fecha{position: absolute;left: 57%;top: 70%;width: 20%;height: 6%;margin-top: 0%;
font-family:Batang; font-size: 100%; font-weight:bold; }
.porque{position: absolute;left: 70%;top: 73%;width: 12%;height: 6%;margin-top: 0%;
font-family:Batang; font-size: 80%;}
.dia{position: absolute;left: 57%;top: 75%;width: 4%;height: 5%;
color:white ; border: 1px solid #848484}
.mes{position: absolute;left: 61%;top: 75%;width: 4%;height: 5%;
color:white ; border: 1px solid #848484}
.año{position: absolute;left: 65%;top: 75%;width: 4%;height: 5%;
color:white ; border: 1px solid #848484}
.hombre{position: absolute;left: 63%;top: 82%;width: 6%;height: 5%;
color:black;font-weight:bold}
.mujer{position: absolute;left: 57%;top: 82%;width: 6%;height: 5%;
color:black ;font-weight:bold }
.acepto{position: absolute;left: 57%;top: 87%;width: 26%;height: 6%;margin-top: 0%;
font-family:Batang; font-size: 66%;}
.registrar{position: absolute;left: 57%;top: 94%;width: 17%;height: 7.5%;margin-top: 0%;
font-family:arial; font-size: 130%; font-weight:bold; background-color:#088A29;
color:white ;border-radius: 7px; border: 1px solid #088A29}