Crear un form para fechas [sencillo] con CSS

La idea de este ejemplo es crear una serie de campos de texto de un formulario en línea, es decir, uno seguido del otro, pero con un label sobre cada uno de ellos. Este es el resultado fina:

Primero hagamos la estructura basándonos en una lista desordenada:

<div id="contenedor_fecha">
  <form>
    <ul>
      <li>
        <label for="dia">D&iacute;a</label><br />
        <input type="text" name="dia" id="dia" maxlength="2" class="campo"/>
      </li>
      <li>
        <label for="mes">Mes</label><br />
        <input type="text" name="mes" id="mes" class="campo"/>
      </li>
      <li>
        <label for="anio">A&ntilde;o</label><br />
        <input type="text" name="anio" id="anio" maxlength="4" class="campo"/>
      </li>
    </ul>
   </form>

 </div><!--contenedor_fecha-->

Y este es el resultado

Ahora, sólo cambiaré algunas cosas para body, simplemente por estética.

body{
  margin:0px;
  padding:0px;
  font-family:"dejavu sans";
  font-size:10px;
}

Como se puede ver, todo esta dentro de un div llamado contenedor_fecha, el cual, nos ayudará a centrar (o alinear) todo a la vez. Para centrar todo el contenido usamos margin:0px auto, lo cual quiere decir que nuestra capa contenedor_fecha tendrá la misma distancia a la izquierda y derecha. El valor de width será de 312px (aunque se vea mal, luego lo explicaré).

.contenedor_fecha{
  border:1px solid #a0a0a0;
  width:312px;
  margin:0px auto;
}

Cambiaremos las propiedades de las cajas de texto, para que tengan el mismo ancho y color de borde. Para eso es la clase campo.

.campo{
  border:1px solid #bdcef9;
  width:100px;
}
 

Para quitar las viñetas o bullets podemos usar list-style:none, aunque, al menos en Firefox, desaparecen con un margin y padding de cero. Con la propiedad display le decimos que el elemento de la lista se despliegue como si se tratara de un elemento de bloque, como un DIV. Lo mejor de esto es que no establecemos el valor de width, ya que toma el mínimo posible. La propiedad que alinea a todos los elementos es float.

.contenedor_fecha ul,li{
  margin:0px;
  padding:0px;
}

.contenedor_fecha ul li {
  display:block;
  list-style:none;
  float:left;
}
 

Como puedes ver, la caja contenedor_fecha no rodea los elementos de la lista, esto es porque están flotando. Hay varias maneras de resolver esto. Smashing Magazine nos ofrece tres opciones, aunque usaré la más simple, agregar una etiqueta vacía.

Colocamos una etiqueta llamada vacio justo antes de cerrar la caja contenedor_fecha:

     ...
   </form>

   <div class="vacio"></div>

 </div><!--contenedor_fecha-->

Por último, para ajustar el espacio entre cada elemento, sólo hace falta agregar dos propiedades. En la misma sección donde colocamos el valor de display:block podemos ajustar tanto la alineación del texto, como el espacio entre los campos del texto.

.contenedor_fecha ul li {
  display:block;
  list-style:none;
  float:left;
  margin:2px;
  text-align:center;
}

Cada elemento de la lista se despliega como un bloque de 100px, esto se debe al ancho de las cajas de texto. Además, cada elemento tiene un margin de 2 px. Si solo tomamos en cuenta los márgenes laterales, tendremos 4px por cada elemento, por lo tanto, 12px por los tres elementos. Realizando la suma

300px + 12px = 312px

Por eso el contenedor_fecha debe medir esta suma para poder moverla con mayor facilidad.

Espero te sirva para algún proyecto futuro. Cualquier duda agradeceré el comentario.

Fuentes:
Smashing Magazine

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s