Está en la página 1de 12

formularios con estilo (I

)

Los formularios constituyen una buena herramienta con la que
podemos volver nuestras paginas web mas interactivas, pero los
diferentes elementos que los componen presentan bastantes
limitaciones a la hora del diseño "estético" de la pagina. Esto es
debido a que son objetos predefinidos, y como tales tienen una
propiedades que h<asta hace poco eran fijas e inmutables.

Hace poco Microsoft, en su empeño por convertir cada elemento
HTML en un objeto libre con sus propiedades y métodos,
implementó el uso de Hojas de Estilo en Cascada (CSS) a estos
elementos, permitiendo con ello modificar a nuestro gusto diversas
características de los componentes de un formulario, dandonos con
ello un gran abanico de posibilidades de diseño. Por desgracia, casi
todas estas implementaciones son ignoradas por Nestcape, con lo
que el poder que podíamos conseguir con esta técnica queda
disminuido notablemente. La única solución viable pués si queremos
modificar el funcionamiento estandar de los elementos de un
formulario es intentar compaginar un diseño personalizado de
nustra pagina para aquellos navegantes que nos visiten usando
Explorer con un diseño estandar valido para los que lo hagan con
Nestcape. Y esto mismo nos va a ocurrir con casi todos los
elementos HTML.

* estilos para cajas de texto.

Las cajas de texto presentan varias limitaciones en cuanto a su
diseño clasico. Para empezar, el tamaño de las mismas viene
definido mediante el atributo size="n", y mediante diferentes
valores de n podemos aumentar o disminuir la anchura de la caja.
Pero estas unidades de medida no son todo lo exactas que a veces
podemos necesitar, ya que el aumento de una unidad en el valor de
n se traduce en un aumento de anchura de 6 - 7 píxeles, que puede
ser excesivo margen para nustro gusto, por ejemplo si trabajamos
en una pagina en que estamos condicionados a diseñar "al píxel".

Existen otras muchas limitaciones a la hora de trabajar con cajas de
texto: color de fondo de la caja, que siempre por defecto es blanco,
color del texto (negro), tamaño y familia de fuente, altura de la
caja, alineación del texto dentro de ella (a la izquierda), etc. Todas
ellas podemos adaptarlas a nuestras necesidades mediante hojas de
estilo, pero sólo se veran así en I. Explorer, ya que en Nestcape
apareceran con el formato clasico ( y esto nos vale para todo lo que
digamos en adelante de hojas de estilo en formularios).

1

text- align:center. que fija la altura de la caja.text- align:right.border- color:green. color:green.font-size:10pt. que fija la anchura de la caja."> </form> que nos da: <form> <input type="text" style="width:70px.background- color:yellow. • background. 2 . y cuyo valor puede venir dado en su nombre web en inglés o como formato hexadecimal.Ejemplos.font-family: Comic Sans MS.height:30px.color:blue. • height.font- family:Helvetica.color:yellow. que determina el color de fondo.font-size:14pt.- <form> <input type="Text" style="width:100px.background-image:url(images/1.border-width:thin.height:20px."> </form> que nos da: Los atributos de CSS que se manejan son: • width.background- color:red. font-family:Verdana.jpg).height:50px.font-size:12pt.border-style:solid.font-weight:bold."> </form> que nos da: <form> <input type="Text" style="width:200px.padding-right:10px.

que define el color de la fuente.. las propiedades de CSS que podremos usar son mas limitadas. que establece una imagen de fondo para la caja de texto. que fija el tipo de la fuente. que define el color del borde. Y de igual forma se pueden usar todos aquellos atributos CSS que consideremos necesarios. El planteamiento es analogo al de las cajas de texto que hemos visto. En estos ejemplos Nestcape 4x sólo aceptaría el tamaño de la fuente y el tipo de esta. que define el ancho del borde. que define la alineación del texto en la caja.background-color:yellow.- <form> <input type="radio" name="opcion" value="uno" style="width:200px. • border-color. • text-align. y cuyo valor puede venir dado en su nombre web en inglés o como formato hexadecimal. y simplemente lo ignora."> <input type="radio" name="opcion" value="dos" 3 . • background-image. • border-width (thin / medium / thick / none). Ejemplos. Este atributo no es soportado por Nestcape 4x en ninguno de los elementos de formulario. y los bordes los pintara aparte de la caja. adaptando la altura de la caja a la fuente. * estilos para botones de radio. • padding-right (left / top/ bottom). que fija el estilo del borde. pero debido a que este campo de formulario es sólo un botón sin texto intrínseco. • color. con lo que el resultado no es el deseado. • border-style (none / solid / double / groove / ridge / inset / outset). • font-family. como un elemento independiente. que fija el margen entre el extremo derecho (izquierdo / superior /inferior) de la caja y el texto que contiene.height:50px.

"> </form> que nos da: Explorer nos mostrara los botones de radio con las dimensiones definidas.jpg). 4 . y segundo que Nestcape no pintara el borde alrededor del botón. Y si le damos un borde determinado al botón.color:#000000. sea el definido en el estilo. pero Nestcape los mostrara con sus dimensiones estandar.style="width:200px. con lo que el efecto conseguido no es el deseado. por lo que lo que es el botón en sí se reducira. border-color:green.height:30px. borde incluido. ya que si no Nestcape no activara los botones.height:50px. y esto es muy importante. pero Nestcape no. con lo que se vera un cuadrado de color blanco alrededor del botón."> </form> que nos da: <form> <input type="radio" style="width:70px. border-color:red. si no que lo hara aparte.background-color:blue.background- image:url(images/1. Lo que sí aceptan ambos navegadores en el color de fondo. * estilos para checkbox. fuera de este. Por esto: "siempre que utilicemos botones de radio en paginas con un color de fondo que no sea blanco deberemos utilizar CSS para darle al botón el mismo color de fondo que el que tiene la pagina. hay que tener en cuenta primero que las dimensiones del botón se adpataran para que el tamaño total.border- width:thin. ya que si nuestra pagina tiene un fondo de color definido y no especificamos el mismo color para el botón de radio Explorer adaptara el color del contorno del mismo al de la pagina." Otro factor importante a la hora de trabajar con botones de radio en recordar que siempre debemos establecer los atributos name y value.border- width:thick. cosa que afea mucho el diseño.border-style:solid.border-style:solid.

teniendo los mismos atributos y problemas respecto a los navegadores.border-width:thick. Al igual que con los botones de radio podemos utilizar aquellos atributos CSS que no afecten al texto. • background-color.height:50px.border-color:green. 5 . Ejemplos. • height. y cuyo valor puede venir dado en su nombre web en inglés o como formato hexadecimal. border-style:double."> </form> que nos da: <form> <input type="checkbox" name="valor" value="uno" style="width:70px. que fija la altura del botón. Los botones (type button.height:30px.jpg). que determina el color de fondo.border-color:red.border- style:solid.height:50px. color:#000000.background- color:blue.background-image:url(images/1.""> </form> que nos da: * estilos para botones."> <input type="checkbox" style="width:50px.- <form> <input type="checkbox" style="width:50px. que fija la anchura del botón. submit y reset) admiten los siguientes atributos CSS de estilo: • width.border-width:thin.background- color:yellow.

que define el tamaño del texto del botón. • padding-right (left / top/ bottom). • font-size.color:#ffffff.font-family:Verdana. que fija el margen entre el extremo derecho (izquierdo / superior /inferior) del botón y el texto que contiene.font-size:12pt.background- color:blue. que define el color de la fuente.. que define el ancho del borde.height:50px. • background-image. • border-style (none / solid / double / groove / ridge / inset / outset). • color.background- color:yellow. que fija el peso de la fuente (cantidad de negrita).border-style:solid.font- weight:bold." value="botón"> </form> que nos da: 6 .- <form> <input type="button" style="width:50px. • text-align. • border-color. Ejemplos. • border-width (thin / medium / thick / none). value="botón"> <input type="button" style="width:70px.height:50px.border-width:thin. • font-weight. border-color:red. y cuyo valor puede venir dado en su nombre web en inglés o como formato hexadecimal. que define la alineación del texto en el botón. que define el color del borde. • font-family. que determina una imagen de fondo. que fija el estilo del borde. que fija el tipo de la fuente del texto del botón.

ya que en los propios atributos del botón imagen podemos definir su tamaño mediante width y height.background- color:yellow. mostrando este con unos bordes azules por defecto si ni incluimos el atributo de imagen border="0".background-image:url(images/1.<form> <input type="button" name="boton" value="uno" style="width:70px. ya que podemos definir qué bordes en concreto queremos que se vean. altura y bordes. En cuanto a los bordes.jpg" width="70" height="30" border="0" style="width:70px. por lo que es conveniente que si queremos usar botones con borde es mejor utilizar una imagen como botón o utilizar un botón "fabricado" mediante capas (DIV y/o SPAN).height:30px. Admiten los atributos CSS de anchura.height:50px.border-width:thin.border-width:thin. Para mas información consultar manual de CSS.height:30px.- <form> <input type="button" style="width:50px. color:#000000.border-color:green. value="botón"> <input type="image" src="images/1.border- style:solid. De ellos sólo es nuevo el referente a bordes."> </form> que nos da: 7 . pero no se apreciaran ni colores de fuente ni de fondo.jpg). * estilos para botones de imagen..border- style:solid."> </form> que nos da: En Nestcape sólo se apreciaran los atributos de texto. Nestcape los muestra aparte del botón. Los bordes apareceran aparte del botón. NOTA: Si usamos bordes para Explorer tenemos aún mas facilidad de construcción. como el tipo. tamaño y peso de la fuente.border-color:red. Ejemplo.

deberemos utilizar un botón de tipo image. la anchura y la altura de la lista dependera del tamaño y tipo de fuente elegido (para Nestcape). y para determinar en él el tamaño de fuente y la clase de la misma hay que recurrir a las etiquetas<FONTSIZE="tamaño"FACE="familia">. salvo los de bordes y el de imagen de fondo. Es por eso que no los introducimos dentro de style. si lo incluimos dentro de cada etiqueta OPTION. No admite este. y puesto que Nestcape no admite este atributo.font-family:courier. puesto que no reconoce para este tipo de botón los atributos de estilo de anchura y altura deberemos especificar estos como parametros width y height del propio botón ya que si no es así mostrara la imagen con sus dimensiones originales. si lo incluimos en el estilo de la etiqueta SELECT como opción por opción.background- color:yellow. que sea visible en ambos navegadores. si no como atributos de botsn.- <form> <font face="Courier" size="1"> <select style="width:170px. NOTA: En Nestcape. estableciendo como imagen de fondo simplemente un grafico del color que deseemos. admitiendolo tanto para toda la lista. NOTA: Si queremos definir un botón con un color de fondo. Ejemplos."> <optionvalue="uno">uno <optionvalue="dos">dos <optionvalue="tres">tres </font> </form> 8 . pero sí el de color de fondo.font-size:12px.Explorer admite practicamente todos los atributos de estilo. con los inconvenientes que utilizar estas etiquetas ya depreciadas conlleva. Nestcape no admite ninguna de ellos. El inconveniente es que este tipo de botones no admiten el parametro value. I. En este caso.color:red.height:50px. por lo que si queremos que aparezca un texto en el botón debera estar este incluido en la propia imagen de fondo. * estilos para listas de seleccisn.

font- family:Comic Sans MS.font-size:12px.font-size:12px. incluyendo una imagen de fondo para la caja.height:50px.height:100px."> <option value= "uno"style="color:red.">uno <option value= "dos"style="color:#333300.color:yellow.jpg). debiendo especificar el tamaño y la familia de la fuente dentro de la etiqueta FONT.font-family:Comic Sans MS.background-color:green.<form> <font face="Comic Sans MS" size="2"> <select style="width:100px.background-image:url(images/1.color:red.font- family:Helvetica..background- color:#66ccff."> </textarea> </font> </form> 9 .">tres <select> </font> </form> * estilos para cajas de texto múltiples. definidas por la pareja deetiquetas<TEXTAREA>.. Las cajas de texto de varias líneas y columnas.font-size:12px. Ejemplos. Nestcape no reconoce ningún atributo de estilo.- <form> <font face="Comic Sans MS" size="3"> <textarea name="comentario" cols="20" rows="5" style="width:200px.asdas"> </textarea> </font> </form> <form> <font face="Helvetica" size="3"> <textarea name="comentario" cols="20" rows="5" style="width:200px.background- color:#ccff00.background-color:yellow. admiten en Explorer todas los atributos de estilo.">dos <option value= "tres"style="color:#996600.height:100px.</TEXTAREA>.

Ejemplo. Como observación. si no lo hacemos así normalmente el texto aparecera en color negro. El tipo de fuente y el tamaño sí lo cogen directamente del estilo del botón. La pena es que no podremos usarla para construir paginas que deban ser visualizadas en ambos navegadores. los estilos de color de texto deben ser definidos bien mediante la etiqueta FONT dentro de la tabla. si empleamos elementos HTML dentro del botón. Este reconoce todas la etiquetas de estilo. En el caso de un botón de este tipo con una tabla dentro.font- family:Comic Sans MS.width:100px.5 tambín podemos dar estilo a las barras de desplazamiento de las Textarea. Esta etiqueta no es reconocida por Nestcape. por lo que lo que digamos en adelante es sólo aplicable a Explorer. mediante el código: <textarea cols="10" rows="5" style="scrollbar-face- color:#DFFFBF.background-image:url(images/1. con lo que su uso es por esto desaconsejable.height:60px. presentando este elemento de formulario la gran ventaja de que admite tanto imagen de fondo como texto y cualquier otro elemento HTML en su interior.scrollbar-shadow-color:green.Con la aparición de Internet Explorer 5."></textarea> que nos da: * estilos para etiquetas BUTTON."> <table width="50%" height="50%" cellspacing="0" cellpadding="2" border="1"> <tr> <td>uno</td> <td>dos</td> </tr> <tr> <td>tres</td> <td>cuatro</td> 10 . por lo que presenta múltiples usos.jpg). Nestcape sólo visualizara la tabla. bien dando estilo de texto mediante CSS a la tabla en sí.font-size:12px. como por ejemplo una tabla.- <form> <button name="boton_1" type="button" style="color:blue.

Nestcape 4x va a colocar alrededor del radio botón un cuadrado del mismo color que tenga asignado el BODY de la pagina. Así. Introducimos una tabla contenedora del color que queramos que tenga el fondo de nuestra pagina.. por encima del radio.. ( Si queremos evita este efecto de radios en concreto. con lo que engañamos a Nestcape y conseguimos que el marco que rodea al radio botón sea el deseado. otro elemento de formulario al que hemos aplicado algún estilo. Si nuestra tabla es de color rojo y queremos la pagina con fondo blanco el código necesario sería: <bodyonLoad="document.bgcolor="red"> (la tabla del formulario </td> </tr> 11 . </tr> </table> </button> </form> uno dos tres cuatro NOTA IMPORTANTE. con lo que seguiremos con el indeseado marco alrededor del mismo. ya que si por ejemplo hay en la pagina. factor este que crea un efecto indeseado que afeara nuestra pagina. Posteriormente asignamos mediante el evento onLoad del BODY un color de fondo al documento igual que el que tenga la tabla. la solución pasa por usar JavaScript.- Todo lo explicado hasta ahora para estilos en elementos de formualrio es totalmente valido para Internet Explorer y para Nestcape 6x. Y esto ocurre igualmente con otros elementos de formulario. ya que este navegador tiene una manera parcial de interpretar los estilos en estos elementos. situada exactamente a cero pixels en el BODY y con un ancho tal que ocupe todo el fondo visible.bgColor="red"> <table width="100%" bgcolor="white" height="100%"> <tr> <td> <table. si tenemos un radio botón contenido en una tabla con un determinado color de fondo. La solución para por asignar mediante estilos un fondo al radio de igual color que la tabla. el estilo del radio no funciona. pero no así para Nestcape 4x. pero esto sólo se logra a veces.

</table> </body> 12 .