Mejorando la apariencia de los formularios
Por lo general los formularios son bastante
vulgares y lo peor aun muchas veces no encajan con el diseño que tiene nuestro sitio,
entoces para mejorar el aspecto de estos por que no usar hojas de estilo (CSS), en este
articulo veremos como hacerlo.
Un formulario por lo general se ve asi...
El diseño que el navegador le da a los controles es el
mismo que el del sistema operativo, en el caso del grafico de arriba es Windows, el
problema surge cuando tenemos una web con un diseño muy cuidado y nos toca agregar
formularios los cuales no concuerdan para nada con el diseño del sitio, para ello lo
mejor que podemos hacer es utilizar CSS.
LA CSS
<style type="text/css">
<!--
input { font-family: Tahoma, Verdana, Arial; font-size: 11px; color: #FFFFFF;
background-color: #6699CC; border: #000099; border-style: solid; border-top-width: 1px;
border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
select { font-family: Tahoma, Verdana, Arial; font-size: 11px; color: #FFFFFF;
background-color: #6699CC; border: #000099; border-style: solid; border-top-width: 1px;
border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
-->
</style>
Este bloque de codigo va entre las etiquetas <HEAD>
Y </HEAD> de la pagina que contrendra el formulario, fijense que "input"
viene seguido por todo en codigo encerrado entre llaves, bueno, ese es el codigo es el que
le va dando el formato a los cuadros de texto y a los botones, todo el codigo que
pertenece a "select" le da el formato a la lista desplegable (Pais).
ASPECTO FINAL
Si se fijan bien es muy facil modificar manualmente los
valores, por ejemplo donde dice "background-color: #6699CC;" pueden
modificar el valor hexadecimal #6699CC por #000099 y les quedaria el fondo de los
controles color azul.
Es cuestion de ir investigando de que se trata cada
propiedad, igual todos los editores webs traen incorporado algun editor de CSS asi que
tampoco se rompan la cabeza. Saludos "El Guru".
|
