25
Jun 08

Formularios con CSS

Guardado bajo la categoría: CSS

En más de una oportunidad me toco ver formularios armados con HTML usando tablas, seguramente porque su autor no tenia conocimientos sobre CSS y le resultaba difícil que todos los elementos del mismo permanezcan en su lugar.

Para todos aquellos que se sienten identificados con la descripción anterior esta pequeña guía de como armar formularios con HTML y CSS les puede ser útil.

Para ello vamos a utilizar las etiquetas <form>, <fieldset>, <legend> e <input>; aplicadas de la siguiente forma:

  1. <form name="formulario_de_ejemplo">
  2.  <fieldset>
  3.   <legend>Datos Personales</legend>
  4.   <div>
  5.    <label for="nombre">Nombre:</label>
  6.    <input type="text" name="nombre" id="nombre" />
  7.   </div>
  8.   <div>
  9.    <label for="apellido">Apellido:</label>
  10.    <input type="text" name="apellido" id="apellido" />
  11.   </div>
  12.   <div>
  13.    <label for="email">E-mail:</label>
  14.    <input type="text" name="email" id="email" />
  15.   </div>
  16.   <div>
  17.    <label for="ciudad">Ciuidad:</label>
  18.    <select name="ciudad">
  19.     <option value="Bahia Blanca">Bahia Blanca</option>
  20.     <option value="Punta Alta">Punta Alta</option>
  21.     <option value="Tres Arroyos">Tres Arroyos</option>
  22.    </select>
  23.   </div>
  24.  </fieldset>
  25.  <fieldset>
  26.   <legend>Mensaje</legend>
  27.   <div>
  28.    <label name="asunto">Asunto:</label>
  29.    <input type="text" name="asunto" id="asunto" />
  30.   </div>
  31.   <div>
  32.    <label for="comentario">Comentario:</label>
  33.    <input type="text" name="comentario" id="comentario" />
  34.   </div>
  35.  </fieldset>
  36. </form>

Luego agregamos el siguiente código CSS:

  1. form {
  2.  font-family: "Arial", sans-serif;
  3.  font-size: 12px;
  4.  color: #5c5c5c;
  5.  width: 500px;
  6.  margin: 30px auto;
  7. }
  8.  
  9. form div {
  10.  display: block;
  11.  margin: 4px 0px;
  12. }
  13.  
  14. label {
  15.  float: left;
  16.  text-align: right;
  17.  width: 100px;
  18.  padding: 0px 10px 0px 0px;
  19. }
  20.  
  21. input, select, textarea {
  22.  width: 300px;
  23. }
  24.  
  25. input#submit {
  26.  padding: 2px 0px;
  27. }

Y obtendremos un formulario igual a este:

No fué muy difícil ¿no?. Luego podemos darle un poco más de estilo y modificar el color del borde, la tipografía, agregarle una imágen de fondo al formulario o a los inputs, etc. queda a criterio e imaginación de cada uno.

Dejo el ejemplo para descargar: formularios-con-css.zip.

Tags: , ,

4 Comentarios

  1. roc21 Junio 25, 200820:22

    Muy bueno, trataré de implementarlo en mi blog.

    Saludos.

  2. Saji Junio 26, 200812:57

    Justo lo que estaba buscando… Muchas gracias!! ;-)

  3. Jorge Epuñan Julio 4, 200811:16

    La etiqueta fieldset, aunq acepta (valida en xhtml strict) otras etiquetas div dentro de ella, no es la idea utilizarlas como etiqueta bloque ya q no lo es (aunq definiste display: block; en ellas mediante CSS). Para diagramar forms en filas se recomiendan 2 etiquetas q si son bloques y concuerdan con la semantica: listas (ul) y parrafos(p). Saludos.

  4. Rafael Agosto 12, 20081:48

    Gracias lo que esperaba, que bueno esta tu codigo hermano.

2 Trackbacks

  1. Formularios con CSS y HTML — Tablosign
  2. Lo mejor de la semana XLII | roc21

Deja tu opinión acerca del artículo

Datos Personales



Tu Opinión