Una de las preguntas más frecuentes cuando se habla de diseño bajo css es como se pueden estilizar los formularios ya que en muchas ocasiones es la parte de un sitio que no queda de acuerdo al estilo del resto de los elementos. Por esto, en esta, mi primera colaboración para CSS Boulevar decidí que sería buena idea escribir al respecto.
En realidad la estilización de formularios es más simple de lo que parece, sin embargo, se necesitan de un par de trucos para adquirir la apariencia que se quiere la cual aún está limitada por ciertas características que no todos los navegadores actuales soportan.
Para comenzar, lo primero que tenemos que hacer es hacer el diseño de como vamos a querer que se vea nuestro formulario. Desde este punto vamos a tener que tomar en cuenta muchs consideraciones que veremos más adelante y que para este caso no tomé en cuenta a propósito por tratarse de un ejemplo en el que hay que resaltar estas limitaciones.
Aquí podemos ver una imagen del diseño inicial.
El código (X)HTML de este ejemplo no tiene mayor ciencia, unicamente se trata de un formulario con 4 campos, algo típico de un sistema de comentarios, queda algo como lo siguiente:
<form name="formulario" id="formulario" method="">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" class="campo" />
<label for="email">E-mail:</label>
<input type="text" id="email" class="campo" />
<label for="url">URL:</label>
<input type="text" id="url" class="campo" />
<label for="comentario">Comentario:</label>
<textarea id="comentario" class="campo"></textarea>
<br />
<input type="submit" id="boton_enviar" name="enviar" value="Enviar" />
</form>
Lo único que hay que resaltar es la falta de definición del tamaño de los campos de texto, esto lo haremos por medio de CSS asi que no es necesario definirlos por el momento
Usuarios que han visto este tema también han visto...
- Diseño de menús con CSS avanzado
- Unidades y Medidas en CSS
- Enlaces que simulan botones en CSS
- Capas flotantes en CSS
- Poner fondo a cualquier elemento con CSS
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.