Pedir presupuesto

Bonitos Formularios con CSS

Este tutorial explica como diseñar formularios bonitos (Inspirados en Facebook) usando CSS limpio, diseñandolo sólo con etiquetas <label> e <input> para así simular la etiqueta <table> de HTML. Puedes reusar todo el código para diseñar tus propios formulairos en tus proyectos:

FORMULARIO - Bonitos con CSS

PASO 1

Cuando diseñas un formulario (por ejemplo Registrarse en una web) la mejor solución de poner todos los elementos del formulario en una pagina es añadiendolos en celdas de tablas. Hay una alternativa usando etiquetas HTML <input> y <label> de la siguiente manera:

 

<label>
<span>Full name</span>
<input type=«text» class=«input-text» name=«email» id=«email» size=«30»/>
</label>

 

Y el código CSS es el siguiente:

div.box .input-text{
border
:1px solid #3b6e22;
color
:#666666;
}

div.box label{
display
:block;
margin-bottom
:10px;
color
:#555555;
}

div.box label span{
display
:inline-block;
padding-right
:6px;
width
:70px;
text-align
:right;
font-weight
:bold;
}

De esta manera, <span> que esta dentro de la etiqueta <label> tendria la misma anchura (70px) para los campos descripción a la izquierda de cada <input> en tu formulario, como si el campo descripción e input estuvieran en una fila de una tabla con dos celdas.

 

PASO 2: “Boton Submit”

When you add a standard/unstyled button in a form (<input> or <button> tag) take a mind it looks different on different browser and OS. A good practice to uniform how it looks is to define a CSS class to apply to your button. Instead of <input> or <button> tag you can also use a simple link (<a> tag) like in this case (I designed and applyed «green» class to the link <a>):

Cuando añades un boton sin estilo y standard a un formulario (<input> o <button>) toman distinto aspecto en los diferentes navegadores y Sistema Operativos. Una buena practica para unificar la manera en que se ve, es definiendo clases en CSS para aplicarlas a los botones. En lugar de <input> o <button> puedes usar tambien un simple link (<a></a>) como en este caso (He diseñado y aplicado la clase “green” al enlace <a>).

<a href=«#» onClick=«javascript:submit()» class=«green«>
Sign in
</a>

 

Y el código CSS para esta clase “green” es el siguiente:


.green{
background
:url(img/green.gif);
padding
:0px 6px;
border
:1px solid #3b6e22;
height
:24px;
line-height
:24px;
color
:#FFFFFF;
font-size
:12px;
margin-right:
10px;
display
:inline-block;
text-decoration
:none;
}


El resultado final es bonito y limpio, puedes usarlo en tus proyectos.

Descarga el tutorial: DOWNLOAD

Via: WOORK

¿Te ha gustado?, Comparte!!

7 comentarios

  1. Buen Post, estoy hecho un lio tengo que hacer varios formularios con muchos campos y no me gusta ponerlos uno de tras de otro ¿ay alguna manera para hacerlo sin utilizar tablas?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es