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: , , 6