14.- Formulario con campos redondeados.
Los clásicos formularios en HTML resultan ya un tanto toscos, aunque sus funciones las cumplen a la perfección. No obstante, su usabilidad puede ser mejorada mediante CSS. Un formulario más atractivo puede resultar mucho más cómodo para un usuario que se enfrenta a la tediosa tarea de cumplimentarlo.
Esto es precisamente lo que haremos con el código que presentamos a continuación, un formulario atractivo con un aire diferente y unas cuantas líneas de código CSS.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1" />
<title>Formulario con campos redondeados.</title>
<style type="text/css">
#formul {
position: absolute;
padding: 20px 0px 40px 30px; /* margen con valores: arriba - derecha - abajo - izquierda */
width: 500px;
left: 50%;
margin-left: -250px;
font-family:verdana,arial;
font-size:9pt;
}
.campos {
font-family:Verdana,Helvetica;
font-size:12pt;
width: 500px;
color:#696969;
padding: 5px 7px 5px 7px;
border:1px solid #0000FF;
background:#FFF;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 15px;
}
.campos1 {
font-family:Verdana,Helvetica;
font-size:12pt;
width: 30px;
color:#696969;
padding: 5px 7px 5px 7px;
border:1px solid #0000FF;
background:#FFF;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 15px;
}
.boton{
font-size:12px;
font-family:Verdana,Helvetica;
font-weight:bold;
color:#0000FF;
background:#A4C1FF;
border:0px;
width:120px;
height:25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 15px;
}
#b_reset {
margin: 0px 0px 0px 0px; /* margen con valores: arriba - derecha - abajo - izquierda */
}
#b_submit {
margin: -25px 0px 0px 380px; /* margen con valores: arriba - derecha - abajo - izquierda */
}
</style>
</head>
<body>
<div id="formul">
<h2>Formulario de contacto.</h2>
<form method="POST" action="#" name="mensaje" enctype="multipart/form-data">
<p>Nombre: <br />
<input class="campos" type="text" name="nombre"></p>
<p>E-Mail: <br />
<input class="campos" type="text" name="email"></p>
<p>Asunto: <br />
<input class="campos" type="text" name="asunto"></p>
<p>Mensaje:<br />
<textarea class="campos" rows="10" name="mensaje"></textarea></p>
<p>Intereses:<br />
<select class="campos" name="interes">
<option selected>Elija una opción</option>
<option>HTML</option>
<option>JavaScript</option>
<option>PHP</option>
<option>MySQL</option>
</select></p>
<p>Adjuntar archivo: <br />
<input class="campos" type="file" name="archivo" size="20"></p>
<p>Sexo: Hombre <input class="campos1" type="radio" name="sexo" value="V1" checked>
Mujer <input class="campos1" type="radio" name="sexo" value="V2"></p>
<p>¿Acepta nuestra politica de privacidad?:
<input class="campos1" type="checkbox" name="priv" value="ON"></p>
<input type="hidden" name="id" value="">
<div id="b_reset">
<input class="boton" type="reset" value="Restablecer" name="B2">
</div>
<div id="b_submit">
<input class="boton" type="submit" value="Enviar mensaje" name="B1">
</div>
</form>
</div>
</body>
</html>
