FORMULARIOS HTML

Formularios con estilos Los formularios constituyen una buena herramienta con la que podemos volver nuestras pginas web ms interactivas, pero los diferentes elementos que los componen presentan bastantes limitaciones a la hora del diseo "esttico" de la pgina. Esto es debido a que son objetos predefinidos, y como tales tienen una propiedades que hasta hace poco eran fijas e inmutables. Hace poco Microsoft, en su empeo por convertir cada elemento HTML en un objeto libre con sus propiedades y mtodos, implement el uso de Hojas de Estilo en Cascada (CSS) a estos elementos, permitiendo con ello modificar a nuestro gusto diversas caractersticas de los componentes de un formulario, dndonos con ello un grn abanico de posibilidades de diseo. Por desgracia, casi todas estas implementaciones son ignoradas por Nestcape, con lo que el poder que podamos conseguir con esta tcnica queda disminuido notablemente. La nica solucin viable pus si queremos modificar el funcionamiento estandar de los elementos de un formulario es intentar compaginar un diseo personalizado de nustra pgina para aquellos navegantes que nos visiten usando Explorer con un diseo estandar vlido 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 diseo clsico. Para empezar, el tamao 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 pxeles, que puede ser excesivo margen para nustro gusto, por ejemplo si trabajamos en una pgina en que estamos condicionados a disear "al pxel". 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), tamao y familia de fuente, altura de la caja, alineacin del texto dentro de ella (a la izquierda), etc. Todas ellas podemos adaptarlas a nuestras necesidades mediante hojas de estilo, pero slo se vern as en I. Explorer, ya que en Nestcape aparecern con el formato clsico ( y esto nos vale para todo lo que digamos en adelante de hojas de estilo en formularios). Ejemplos.<form> <input type="Text" style="width:100px;height:20px;backgroundcolor:red;color:yellow;font-size:10pt; font-family:Verdana;text-align:center;"> </form> que nos da:

<form> <input type="Text" style="width:200px;height:50px;backgroundcolor:yellow;color:blue;font-size:14pt;font-family: Comic Sans MS;textalign:right;padding-right:10px;"> </form> que nos da: . <form> <input type="text" style="width:70px;height:30px;font-size:12pt;fontfamily:Helvetica;font-weight:bold; color:green;border-width:thin;border-style:solid;border-color:green;backgroundimage:url(images/1.jpg);"> </form> que nos da: Los atributos de CSS que se manejan son: width, que fija la anchura de la caja. height, que fija la altura de la caja.

background-color, que determina el color de fondo, y cuyo valor puede venir dado en su nombre web en ingls o como formato hexadecimal. color, que define el color de la fuente, y cuyo valor puede venir dado en su nombre web en ingls o como formato hexadecimal. font-family, que fija el tipo de la fuente. text-align, que define la alineacin del texto en la caja. padding-right (left / top/ bottom), que fija el margen entre el extremo derecho (izquierdo / superior /inferior) de la caja y el texto que contiene. border-width (thin / medium / thick / none), que define el ancho del borde. border-style (none / solid / double / groove / ridge / inset / outset), que fija el estilo del borde. border-color, que define el color del borde. background-image, que establece una imagen de fondo para la caja de texto.. Este atributo no es soportado por Nestcape en ninguno de los elementos de formulario, y simplemente lo ignora.

y de igual forma se pueden usar todos aquellos atributos CSS que consideremos necesarios. En estos ejemplos Nestcape slo aceptara el tamao de la fuente, el tipo de esta y la anchura de la caja, adaptando la altura a la fuente, y los bordes los pintar aparte de la caja, como un elemento aparte, con lo que el resultado no es el deseado. La "pega" que encontramos al usar CSS en cajas de texto es que una atributo pripio de ellas como es maxlenght queda anulado en cuanto introducimos un estilo, por lo que no podremos usar las dos cosas juntas. Si queremos usar CSS y a la vez determinar un nmero mximo de caracteres de entrada en la caja de texto tendremos que usar una funcin JavaScript. * estilos para botones de radio. El planteamiento es anlogo al de las cajas de texto que hemos visto, pero debido a que este campo de formulario es slo un botn sin texto intrnseco, las propiedades de CSS que podremos usar son ms limitadas. Ejemplos.<form> <input type="radio" name="opcion" value="uno" style="width:200px;height:50px;background-color:yellow;"> <input type="radio" name="opcion" value="dos" style="width:200px;height:50px;background-color:blue;border-width:thick;borderstyle:solid; border-color:red;"> </form> que nos da:

<form> <input type="radio" style="width:70px;height:30px;border-width:thin;border-style:solid; border-color:green;color:#000000;background-image:url(images/1.jpg);"> </form> que nos da:

Explorer nos mostrar los botones de radio con las dimensiones definidas, pero Nestcape los mostrar con sus dimensiones estandar. Lo que s aceptan ambos navegadores en el color de fondo, y esto es muy importante, ya que si nuestra pgina tiene un fondo de color definido y no especificamos el mismo color para el botn de radio Explorer adaptar el color del contorno del mismo al de la pgina, pero Nestcape no, con lo que se ver un cuadrado de color blanco alrededor del botn, cosa que afea mucho el diseo. Por esto: "siempre que utilicemos botones de radio en pginas con un color de fondo que no sea

blanco deberemos utilizar CSS para darle al botn el mismo color de fondo que el que tiene la pgina." Otro factor importante a la hora de trabajar con botones de radio en recordar que siempre debemos establecer los atributos name y value, ya que si no Nestcape no activar los botones. Y si le damos un borde determinado al botn, hay que tener en cuenta primero que las dimensiones del botn se adpatarn para que el tamao total, borde incluido, sea el definido en el estilo, por lo que lo que es el botn en s se reducir, y segundo que Nestcape no pintar el borde alrededor del botn, si no que lo har aparte, fuera de este, con lo que el efecto conseguido no es el deseado. * estilos para checkbox. Al igual que con los botones de radio podemos utilizar aquellos atributos CSS que no afecten al texto, teniendo los mismos atributos y problemas respecto a los navegadores. Ejemplos.<form> <input type="Checkbox" style="width:50px;height:50px;background-color:yellow;"> <input type="checkbox" style="width:50px;height:50px;background-color:blue;borderwidth:thick; border-style:double;border-color:red;"> </form> que nos da:

<form> <input type="checkbox" name="valor" value="uno" style="width:70px;height:30px;border-width:thin;border-style:solid;border-color:green; color:#000000;background-image:url(images/1.jpg);""> </form> que nos da:

* estilos para botones. Los botones (type button, submit y reset) admiten los siguientes atributos CSS de estilo:

width, que fija la anchura del botn. height, que fija la altura del botn. background-color, que determina el color de fondo, y cuyo valor puede venir dado en su nombre web en ingls o como formato hexadecimal.

background-image, que determina una imagen de fondo. color, que define el color de la fuente, y cuyo valor puede venir dado en su nombre web en ingls o como formato hexadecimal. font-family, que fija el tipo de la fuente del texto del botn. font-size, que define el tamao del texto del botn. font-weight, que fija el peso de la fuente (cantidad de negrita). text-align, que define la alineacin del texto en el botn. padding-right (left / top/ bottom), que fija el margen entre el extremo derecho (izquierdo / superior /inferior) del botn y el texto que contiene. border-width (thin / medium / thick / none), que define el ancho del borde. border-style (none / solid / double / groove / ridge / inset / outset), que fija el estilo del borde. border-color, que define el color del borde.

Ejemplos.<form> <input type="button" style="width:50px;height:50px;.background-color:yellow; value="botn"> <input type="button" style="width:70px;height:50px;background-color:blue;borderwidth:thin;border-style:solid; border-color:red;color:#ffffff;font-size:12pt;font-family:Verdana;font-weight:bold;" value="botn"> </form> que nos da: <form> <input type="button" name="boton" value="uno" style="width:70px;height:30px;borderwidth:thin;border-style:solid;border-color:green; color:#000000;background-image:url(images/1.jpg);"> </form> que nos da: En Nestcape slo se apreciaran los atributos de texto, como el tipo, tamao y peso de la fuente, pero no se apreciarn ni colores de fuente ni de fondo. Los bordes aparecern aparte del botn, por lo que es conveniente que si queremos usar botones con borde es mejor utilizar una imagen como botn o utilizar un botn "fabricado" mediante capas (DIV y/o SPAN).

NOTA: Si usamos bordes para Explorer tenemos an ms facilidad de construccin, ya que podemos definir qu bordes en concreto queremos que se vean. Para ms informacin consultar manual de CSS. * estilos para botones de imagen. Admiten los atributos CSS de anchura, altura y bordes. De ellos slo es nuevo el referente a bordes, ya que en los propios atributos del botn imagen podemos definir su tamao mediante width y height. En cuanto a los bordes, Nestcape los muestra aparte del botn, mostrando este con unos bordes azules por defecto si ni incluimos el atributo de imagen border="0". Ejemplo.<form> <input type="button" style="width:50px;height:50px;.background-color:yellow; value="botn"> <input type="image" src="images/1.jpg" width="70" height="30" border="0" style="width:70px;height:30px;border-width:thin;border-style:solid;border-color:red;"> </form> que nos da:

NOTA: Si queremos definir un botn con un color de fondo. que sea visible en ambos navegadores, y puesto que Nestcape no admite este atributo, deberemos utilizar un botn de tipo image, estableciendo como imagen de fondo simplemente un grfico del color que deseemos. El inconveniente es que este tipo de botones no admiten el parmetro value, por lo que si queremos que aparezca un texto en el botn deber estar este incluido en la propia imagen de fondo. NOTA: En Nestcape, puesto que no reconoce para este tipo de botn los atributos de estilo de anchura y altura deberemos especificar estos como parmetros width y height del propio botn ya que si no es as mostrar la imagen con sus dimensiones originales. Es por eso que no los introducimos dentro de style, si no como atributos de botn. * estilos para listas de seleccin. I.Explorer admite prcticamente todos los atributos de estilo, salvo los de bordes y el de imagen de fondo. No admite este, pero s el de color de fondo, admitiendolo tanto para toda

la lista, si lo incluimos en el estilo de la etiqueta SELECT como opcin por opcin, si lo incluimos dentro de cada etiqueta OPTION. Nestcape no admite ninguna de ellos, y para determinar en l el tamao de fuente y la clase de la misma hay que recurrir a las etiquetas <FONT SIZE="tamao" FACE="familia">, con los inconvenientes que utilizar estas etiquetas ya depreciadas conlleva. En este caso, la anchura y la altura de la lista depender del tamao y tipo de fuente elegido (para Nestcape). Ejemplos.<form> <font face="Courier" size="1"> <select style="width:170px;height:50px;color:red;background-color:yellow;fontsize:12px;font-family:courier;"> <option value="uno">uno <option value="dos">dos <option value="tres">tres </font> </form>

<form> <font face="Comic Sans MS" size="2"> <select style="width:100px;height:50px;font-size:12px;font-family:Comic Sans MS;"> <option value="uno" style="color:red;background-color:yellow;">uno <option value="dos" style="color:#333300;background-color:#ccff00;">dos <option value="tres" style="color:#996600;background-color:#66ccff;">tres <select> </font> </form>

* estilos para cajas de texto mltiples. Las cajas de texto de varias lneas y columnas, definidas por la pareja de etiquetas <TEXTAREA>...</TEXTAREA>, admiten en Explorer todas los atributos de estilo, incluyendo una imagen de fondo para la caja. Nestcape no reconoce ningn atributo de estilo, debiendo especificar el tamao y la familia de la fuente dentro de la etiqueta FONT. Ejemplos.<form> <font face="Comic Sans MS" size="3"> <textarea name="comentario" cols="20" rows="5" style="width:200px;height:100px;fontsize:12px;font-family:Comic Sans MS;background-

image:url(images/1.jpg);color:red;asdas"> </textarea> </font> </form>

<form> <font face="Helvetica" size="3"> <textarea name="comentario" cols="20" rows="5" style="width:200px;height:100px;fontsize:12px;font-family:Helvetica;background-color:green;color:yellow;"> </textarea> </font> </form>

* estilos para etiquetas BUTTON. Esta etiqueta no es reconocida por Nestcape, por lo que lo que digamos en adelante es slo aplicable a Explorer. Este reconoce todas la etiquetas de estilo, presentando este elemento de formulario la grn ventaja de que admite tanto imagen de fondo como texto y cualquier otro elemento HTML en su interior, por lo que presenta mltiples usos. Como observacin, si empleamos elementos HTML dentro del botn, como por ejemplo una tabla, los estilos de color de texto deben ser definidos bien mediante la etiqueta FONT dentro de la tabla, bien dando estilo de texto mediante CSS a la tabla en s; si no lo hacemos as normalmente el texto aparecer en color negro. El tipo de fuente y el tamao s lo cogen directamente del estilo del botn. La pena es que no podremos usarla para construir pginas que deban ser visualizadas en ambos navegadores, con lo que su uso es por esto desaconsejable. En el caso de un botn de este tipo con una tabla dentro, Nestcape slo visualizar la tabla. Ejemplo.<form> <button name="boton_1" type="button" style="color:blue;width:100px;height:60px;fontsize:12px;font-family:Comic Sans MS;background-image:url(images/1.jpg);"> <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> </tr> </table> </button> </form> uno tres dos cuatro

* posicionamiento de elementos de formulario. Lo que sigue ahora es tambin exclusivo de Explorer, y es una aplizacin directa de las Hojas de Estilo en Cascada y del hecho de que este navegador reconoce cualquier elemento HTML como un objeto en s mismo. Como consecuencia de ello podemos usar los atributos de posicionamiento de CSS para situar relativa o absolutamente un elemento en pantalla. Esto ofrece la grn ventaja de que no nos vemos sometidos a casi ninguna limitacin en el diseo, pudiendo situar nuestros elementos donde queramos. Para posicionar elementos de formulario dentro de la ventana de nuestro navegador deberemos introducir los parmetros position (absolute / relative), top. (normalmente en pxeles, y define la posicin de la esquina superior izquierda del elemento respecto al borde superior de la ventana del navegador) y left (normalmente en pxeles, que determina la distancia respecto al borde izquierdo de la ventana del navegador) dentro del atributo style del elemento. La sintaxis general sera del tipo: <form> <input type="Text" style="width:100px;height:20px;backgroundcolor:red;color:yellow;font-size:10pt; font-family:Verdana;textalign:center;position:absolute;top:50px;left:200px;"> </form> que nos situara la caja de texto a 50 pxeles por debajo del borde superior de la ventana del navegador y a 200 pxeles del borde izquierdo. Ver resultado

En el caso de que varios elementos se superpusieran aparecera aquel que estuviera situado antes en la estructura del cdigo HTML de la pgina. Esto se puede cambiar mediante el atributo z-index, que define una coordenada z o de profundidad de los elementos en la pgina. <form action="cgi-bin/control.cgi" method="post" enctype="text/plain" name= "miform"> <textarea name="comentario2" cols="20" rows="10" style="position:absolute;top:50px;left:50px;z-index:1;"> </textarea> <textarea name="comentario2" cols="20" rows="10" style="position:absolute;top:70px;left:70px;z-index:2;"> </textarea> </form>
Ver resultado

* posicionamiento mediante capas. El grn inconveniente de posicionar elementos de formulario mediante estilos directos es que aquellos visitantes que usen Nestcape Navigator no vern una pgina agradable entonces. Qu podemos hacer si queremos posicionar un elemento para que sea visible en ambos navegadores?. La solucin pasa por colocar los elementos dentro de una capa, creada mediante las etiquetas <DIV> y/o <SPAN>, con sus respectivas de cierre. Con esto, podemos posicionar estas capas, y con ellas los elementos que contienen, en nuestra pgina, y esto ser comtemplado adecuadamente por los dos navegadores. Un ejemplo de esto sera, basndonos en el anterior: <form action="cgi-bin/control.cgi" method="post" enctype="text/plain" name= "miform"> <div style="position:absolute;top:50px;left:50px;width:200px;height:200px;clip:rect(0,200,200, 0);z-index:1;"> <textarea name="comentario1" cols="20" rows="10"></textarea> </div> <div style="position:absolute;top:90px;left:90px;width:200px;height:200px;clip:rect(0,200,200, 0);z-index:2;"> <textarea name="comentario2" cols="20" rows="10"></textarea> </div> </form> Ver resultado Y as y todo seguimos con las pegas en Nestcape, ya que las capas se activan al coger el foco el textarea que contienen, con lo que se produce una situacin liosa. Adems, para que funcione esto bien deberemos introducir en cada capa la pareja de etiquetas

<form>...</form>, lo que nos va a ocasionar bastantes quebraderos de cabeza a la hora de recoger los datos para enviarlos y de validar y acceder mediante JavaScript a todos los elementos que tengamos. Con Explorer esto no ocurre, ya que siempre la primera textarea estar debajo de la segunda, aunque reciba el foco. De todas formas lo dicho en este captulo sobre elementos superpuestos es slo orientativo, ya que pocas veces vamos a necesitar utilizar este efecto.