Buscador


En todo Internet
En Uterra.Com

¿Problemas sexuales?
Jerez de la Frontera
y Cádiz
Homosexualidad, infidelidad, divorcio, violencia de género, etc.

Contenidos


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>