Un ejemplo de código para un formulario de datos sería este:
<form name="formulario" action="#" method="post"> <fieldset> <legend>Datos de contacto</legend> <label for="nombre">Nombre:</label> <input type="text" size="35" maxlength="50" /> <label for="apellidos">Apellidos:</label> <input type="text" size="35" maxlength="50" /> <label for="email">e-mail:</label> <input type="text" size="35" maxlength="50" /> <label>Opciones:</label> <input id="radio1" name="radio" type="radio" checked /><span>Opción 1</span> <input id="radio2" name="radio" type="radio" /><span>Opción 2</span> <label id="comentarios" for="comentarios">Comentarios:</label> <textarea name="comentarios" rows="5" cols="25"></textarea> </fieldset> <fieldset> <input type="reset" id="limpia" value="Limpiar" /> <input id="envia" type="submit" value="Enviar" /> </fieldset> </form>
Sin estilos, la verdad es que queda un poco feo y soso...
Aplicando un poco de CSS quedaría un poco más vistoso:
¡Ya esta! esto es solo un pequeño ejemplo pero aún así se ha logrado mejorar la apariencia de nuestro formulario.
Aquí dejo el css aplicado al formulario:
<style type="text/css">
form {
width:378px;
margin:0;
padding:0px 0px 8px 0px;
background-color:#f0f0f0;
border:1px solid #88aaaa;
font-family:"Tahoma";
}
form fieldset {
width:350px;
margin:8px;
padding:5px;
border:1px solid #aaaaaa;
}
form fieldset legend{
padding:5px;
color:#aaaaaa;
font-weight:bold;
font-size:13px;
}
form fieldset label {
display:block;
float:left;
width:25%;
font-size:11px;
margin-top:10px;
color:#777777;
}
form fieldset label#comentarios {
clear:both;
}
form fieldset input {
display:block;
float:left;
width:70%;
margin-left:10px;
margin-top:10px;
}
form fieldset input#limpia {
width:100px;
margin-top:3px;
margin-left:55px;
}
form fieldset input#envia {
width:100px;
margin-top:3px;
margin-left10px;
}
form fieldset input#radio1, form fieldset input#radio2 {
float:left;
width:5%;
height:20px;
}
form fieldset span {
float:left;
width:20%;
margin-top:10px;
margin-left:3px;
color:#777777;
font-size:10px;
}
form fieldset textarea {
display:block;
float:leftwidth:70%;
margin-left:10px;
margin-top:10px;
}
</style>
1 comentarios:
cool!
Publicar un comentario