08 abril 2008

Embellecer un formulario con CSS

Esta entrada está dedicada a todos aquellos que alguna vez hayáis creado un formulario en una página web y no os haya gustado el aspecto que se le queda. También para todos aquellos acostumbrados a realizar un formulario usando tablas y quieran conocer una nueva forma de hacerlo mucho más accesible.

Un formulario usando una tabla podría quedar así:
Nombre
Apellidos

Aunque puede parecer una forma como otra cualquiera de crear un formulario a mi personalmente me parece un poco fea. Además a una persona ciega le costaría bastante entender ese galimatías (sino probad un lector de páginas web y veréis).

La forma más aconsejable es diseñar el formulario como lo es, una lista de datos que solicitamos para un fin específico. Por eso, lo primero es hacer eso, una lista.


Usando este código:
<form>
<label for="edNombre">Nombre</label><input type="text" name="edNombre"/><br/>
<label for="edApellido">Apellido</label><input type="text" name="edApellido"/><br/>
</form>


Ahora solo hace falta añadirle un poco de estilo para embellecerlo:



Usando un CSS como este:

.etiquetas {display:block;width:10em;font-family:Arial;float:left;]
.edicion {background:#daeda3;border:1px solid #3c3c3c;margin-bottom:3px;}
.boton {background:#86BD16;border:1px solid #3c3c3c;color:white;}

Al mostrar las etiquetas con un ancho fijo y fijándolas a la izquierda damos el mismo efecto que logramos con las tablas añadiendo además un toque personal a cada formulario. Si probáis este otro ejemplo con un lector veréis como es mucho más fácil de entender que el anterior.
Nota: Esto pretende ser un ejemplo muy corto de lo que se puede hacer con un formulario y CSS. Si tienes alguna duda o queja, deja un comentario.

Actualización: Si quieres resaltar el cuadro que está actualmente seleccionado puedes hacerlo cambiando un poco el CSS anterior. Si añades esto:

.edicion:focus {background:white;}

Al entrar en el cuadro de edición este se volverá blanco.

7 comentarios:

  1. muchas gracias, menos mal que estas ahi ayudandonos con truquitos como este gracias, lo pondre en practica en mi pagina web

    ResponderEliminar
  2. Por si quieres saberlo está sacado de la agenda. Puedes ver más "tonterías" revisando el código :)

    ResponderEliminar
  3. Gracias, que yo de esto no entiendo nada y vienen bien ayuditas, besos^^

    ResponderEliminar
  4. Pos ya iré poniendo algunas más. También acepto peticiones eh ?

    Un saludo

    ResponderEliminar
  5. Muy buena entrada.

    He agregado esta entrada a nuestra Red Social Agregala de noticias en donde podrá ser votada.Os invitamos a visitarnos
    y a añadir vuestras noticias.


    Saludoss

    ResponderEliminar
  6. Me alegro que te haya gustado. No conocía tu web.
    Si me permites una crítica constructiva creo que sería bueno añadirle etiquetas y categorías a las entradas, vídeo, imágenes, noticias, algo así.

    Muchas gracias por añadirnos.

    ResponderEliminar
  7. Uyy, hablé demasiado rápido :)

    Eso me pasa por ansías :)

    ResponderEliminar