En este documento veremos sobre cómo aplicar estilos CSS a formularios. Evidentemente, los formularios son elementos XHTML y como tales también están sujetos a la posibilidad de pertenecer a clases, o definir estilos mediante la inclusión del elemento style en la etiqueta.
En primer lugar veamos ejemplos de aplicación de estilos a campos de texto <input type=text>. Podemos poner un campo de texto en un formulario poniendo un código como el siguiente:
<form action="submit"> <p>Nombre: <input type="text" name="texto0" size="50" /> </p> </form>
Con lo que obtenemos el siguiente resultado:
Haciéndolo así nos queda un formulario en el que sólo hemos personalizado el tamaño del campo de texto. Aparte de esto, el formulario es igual que tantos otros que hay en Internet.
Veamos como podemos darle un toque personal usando CSS. Si ponemos un código como el siguiente:
<form action="submit">
<p>
Nombre: <br />
<input type="text" name="texto1" size="50"
style="border-style: outset; border-width: 3px;
border-color: blue;
font-size: 12pt; color:red; font-weight:bolder;
height:20px; background-color:yellow;"
/>
</p>
</form>
Obtendríamos el siguiente resultado:
Es decir, hemos modificado el tipo, tamaño y color del borde, el tipo, tamaño y color del texto que se introduzca y la altura y color de la caja.
En primer lugar veamos ejemplos de aplicación de estilos a campos de texto <input type=text> y campos de texto que soportan varias líneas <textarea>.
Veamos ahora ejemplos de aplicación de estilos a campos de texto en varias líneas <textarea>. Podemos poner un campo de texto en un formulario poniendo un código como el siguiente:
<form action="submit"> <p>Comentarios: <br /> <textarea name="textarea0" cols="20" rows="3" > Introduce tus comentarios </textarea> </p> </form>
Con lo que obtenemos el siguiente resultado:
Veamos como podemos darle un toque personal usando CSS. Si ponemos en la parte de estilo un código como el siguiente:
.estilotextarea {width:400px;height:100px;border: 5px groove blue;background-color:LightBlue;}
y luego en el cuerpo del documento
<form action="submit"> <p>Comentarios: <br /> <textarea name="textarea1" class="estilotextarea" cols="2" rows="3"> Introduce tus comentarios </textarea> </p> </form>
Obtendríamos el siguiente resultado:
Hemos modificado las propiedades del textarea. Las propiedades cols y rows se han puesto simplemente para superar la validación xhtml, ya que no tienen ningún efecto al estar el ancho y el alto definidos en el estilo.
Veamos ahora ejemplos de aplicación de estilos a campos de selección <select>. Podemos poner un campo select en un formulario poniendo un código como el siguiente:
<form action="submit"> <p>Elige una opción: <br /> <p>select> <option >Opción 1</option> <option >Opción 2</option> <option >Opción 3</option> <option >Opción 4</option> <option >Opción 5</option> <option >Opción 6</option> </select> </p> </form>
Con lo que obtenemos el siguiente resultado:
Veamos como podemos darle un toque personal usando CSS. Si ponemos en la parte de estilo un código como el siguiente:
select.mio{ font-family: verdana; font-size: 20px;}
option.azul1 {background-color: LightBlue;}
option.azul2 {background-color: LightSkyBlue;}
y luego en el cuerpo del documento
<form action="submit"> <p>Elige una opción: <br /> <p>select class="mio"> <option class="azul1">Opción 1</option> <option class="azul2">Opción 2</option> <option class="azul1">Opción 3</option> <option class="azul2">Opción 4</option> <option class="azul1">Opción 5</option> <option class="azul2">Opción 6</option> </select> </p> </form>
Obtendríamos el siguiente resultado:
Hemos modificado las propiedades del campo select y le hemos dado un aspecto personal y atractivo.
Combinando las distintas posibilidades que brindan las hojas de estilo se pueden crear formularios más atractivos. Tan sólo hay que usar la imaginación. Por ejemplo, es frecuente encontrar formularios en los que una serie de campos son obligatorios. Si éstos tuvieran un fondo de distinto color serían más fácilmente identificables.