Capitulo 11

       11.1 Estilos basicos.

11.1.1. Mostrar un botón como un enlace.

Como ya se vio anteriormente, el estilo por defecto de los enlaces se puede modificar para que se muestren como botones de formulario. Ahora, los botones de formulario también se pueden modificar para que parezcan enlaces.

Las reglas CSS del ejemplo anterior son las siguientes:

.enlace {
  border: 0;
  padding: 0;
  background-color: transparent;
  color: blue;
  border-bottom: 1px solid blue;
}

11.1.2. Mejores en los campos de texto.

Por defecto, los campos de texto de los formularios no incluyen ningún espacio de relleno, por lo que el texto introducido por el usuario aparece pegado a los bordes del cuadro de texto.

Añadiendo un pequeño padding a cada elemento <input>, se mejora notablemente el aspecto del formulario:

La regla CSS necesaria para mejorar el formulario es muy sencilla:

form.elegante input {
  padding: .2em;
}

11.1.3. Labels alineadas y formateadas.

En primer lugar, se muestran los elementos como elementos de bloque, para que añadan una separación para cada campo del formulario.

Para mostrar un formulario tal y como aparece en la imagen anterior no es necesario crear una tabla y controlar la anchura de sus columnas para conseguir una alineación perfecta.

       11.2. Estilos avanzados.

11.2.1. Formulario en varias columnas.

Los formularios complejos con decenas de campos pueden ocupar mucho espacio en la ventana del navegador. Además del uso de pestañas para agrupar los campos relacionados en un formulario, también es posible mostrar el formulario a dos columnas, para aprovechar mejor el espacio.

11.2.2. Resaltar el campo seleccionado.

Una de las mejoras más útiles para los formularios HTML consiste en resaltar de alguna forma especial el campo en el que el usuario está introduciendo datos. Para ello, CSS define la pseudo-clase :focus, que permite aplicar estilos especiales al elemento que en ese momento tiene el foco o atención del usuario.

Añadiendo la pseudo-clase :focus después del selector normal, el navegador se encarga de aplicar esos estilos cuando el usuario activa el elemento:

input:focus {
  border: 2px solid #000;
  background: #F3F3F3;
}

Desafortunadamente, la pseudo-clase :focus no funciona en navegadores obsoletos como Internet Explorer 6, por lo que si la página debe visualizarse de la misma forma en todos los navegadores, es preciso recurrir a soluciones con JavaScript.