MAQUETACION DE FORMULARIOS CON
HTML5 Y CSS
Código: index.php
<html><head>
<meta charset="UTF-8">
<title>Maquetacion de Formularios</title>
<link href="estilos.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="formulario">
<form id="form" method="post" action="pagina-destino.php">
<h1>Formulario de Registro</h1><br>
<label>Nombre</label>
<input type="text" id="name" name="nombre" required="" placeholder="Nombre" />
<label>Fecha de Registro</label>
<input type="date" name="fecha" id="fecha" required="" placeholder="Fecha" />
<label>Email</label>
<input type="text" name="email" id="email" required="" placeholder="Email" />
<label>Password : </label>
<input type="text" name="password" id="password" required="" placeholder="Password" />
<button type="submit" name="enviar">Enviar</button>
</form>
</div>
</body>
</html>
Código : estilos.css
text-align:center;
font-family:verdana,arial,helvetica,sans-serif;
}
#formulario{
border:solid 2px #708090;
border-radius: 15px;
box-shadow: 12px 12px 15px #ABCABC;
backgroud:#dcdcdc;
margin:0 auto;
width :400px;
padding:14px;
}
#formulario h1{
font-size:24px;
font-weight:bold;
margin-bottom:10px;
}
#formulario label{
display:block;
font-weigth:bold;
text-aligin:right;
width:140px;
float:left;
}
#formulario input{
float:left;
font-size:12px;
padding:4px 2px;
border:salid 1px #708090;
width:200px;
margin:2px 0 20px 10px;
}
#formulario button{
clear:both;
margin:0 auto;
width:100px;
height:31px;
background:#696969;
text-align:center;
line-height:31px;
color : #fff;
font-size:11px;
font-weight:bold;
}
