|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
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 hasta 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).
Ejemplos.-
<form>
<input type="Text" style="width:100px;height:20px;background-color: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;background-color:yellow;color:blue;font-size:14pt;font-family:
Comic Sans MS;text-align:right;padding-right:10px;">
</form>
que nos da:
<form>
<input type="text"
style="width:70px;height:30px;font-size:12pt;font-family:Helvetica;font-weight:bold;
color:green;border-width:thin;border-style:solid;border-color:green;background-image:url(images/1.jpg);">
</form>
que nos da:
Los atributos de CSS que se manejan son:
Y de igual forma se pueden usar todos aquellos atributos CSS que consideremos necesarios. En estos ejemplos Nestcape 4x sólo aceptaría el tamaño de la fuente y el tipo de esta, adaptando la altura de la caja a la fuente, y los bordes los pintara aparte de la caja, como un elemento independiente, con lo que el resultado no es el deseado.
* estilos para botones de radio.
El planteamiento es analogo al de
las cajas de texto que hemos visto, pero debido a que este campo de formulario
es sólo un botón sin texto intrínseco, las propiedades de CSS que podremos usar
son mas 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;border-style: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 mostrara los botones de radio con las dimensiones
definidas, pero Nestcape los mostrara con sus dimensiones estandar. Lo que sí
aceptan ambos navegadores en el color de fondo, y esto es muy importante, 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, pero Nestcape no, con lo que se vera un cuadrado de color
blanco alrededor del botón, cosa que afea mucho el diseño. 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."
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 activara los botones. Y si le damos un borde determinado al botón, hay que tener en cuenta primero que las dimensiones del botón se adpataran para que el tamaño total, borde incluido, sea el definido en el estilo, por lo que lo que es el botón en sí se reducira, y segundo que Nestcape no pintara el borde alrededor del botón, si no que lo hara 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;border-width: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:
Ejemplos.-
<form>
<input type="button" style="width:50px;height:50px;.background-color:yellow; value="botón">
<input type="button" style="width:70px;height:50px;background-color:blue;border-width:thin;border-style:solid;
border-color:red;color:#ffffff;font-size:12pt;font-family:Verdana;font-weight:bold;" value="botón">
</form>
que nos da:
<form>
<input type="button" name="boton" 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:
En Nestcape sólo se apreciaran los atributos de texto, como el
tipo, tamaño y peso de la fuente, pero no se apreciaran ni colores de fuente ni
de fondo. Los bordes apareceran aparte del botón, 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).
NOTA:
Si usamos bordes para Explorer tenemos aún mas facilidad de construcción, ya que
podemos definir qué bordes en concreto queremos que se vean. Para mas
información consultar manual de CSS.
* estilos para botones de imagen.
Admiten los atributos CSS de anchura, altura y bordes. De ellos sólo es nuevo el referente a bordes, ya que en los propios atributos del botón imagen podemos definir su tamaño mediante width y height.
En cuanto a los bordes, Nestcape los muestra aparte del botón, 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="botón">
<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 botón con un color de fondo. que sea visible en ambos navegadores, y puesto que Nestcape no admite este atributo, deberemos utilizar un botón de tipo image, estableciendo como imagen de fondo simplemente un grafico del color que deseemos. El inconveniente es que este tipo de botones no admiten el parametro value, por lo que si queremos que aparezca un texto en el botón debera estar este incluido en la propia imagen de fondo.
NOTA: En Nestcape, 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. Es por eso que no los introducimos dentro de style, si no como atributos de botón.
* estilos para listas de selección.
I.Explorer
admite practicamente 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
opción por opción, si lo incluimos dentro de cada etiqueta OPTION. Nestcape
no admite ninguna de ellos, 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">, con los inconvenientes que utilizar estas etiquetas ya depreciadas conlleva. En este caso, la anchura y la altura de la lista dependera del tamaño 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;font-size:12px;font-family:courier;">
<optionvalue="uno">uno
<optionvalue="dos">dos
<optionvalue="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 múltiples.
Las cajas de texto de varias líneas y columnas, definidas por la pareja deetiquetas<TEXTAREA>...</TEXTAREA>, admiten en Explorer todas los atributos de estilo, incluyendo una imagen de fondo para la caja. Nestcape no reconoce ningún atributo de estilo, debiendo especificar el tamaño 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;font-size: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;font-size:12px;font-family:Helvetica;background-color:green;color:yellow;">
</textarea>
</font>
</form>
Con la aparición de Internet Explorer 5.5 tambín podemos dar estilo a las barras de desplazamiento de las Textarea, mediante el código:
<textarea cols="10" rows="5" style="scrollbar-face-color:#DFFFBF;scrollbar-shadow-color:green;"></textarea>
que nos da:
* estilos para etiquetas BUTTON.
Esta etiqueta no es reconocida por Nestcape, por lo que lo que digamos en adelante es sólo aplicable a Explorer. Este reconoce todas la etiquetas de estilo, 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, por lo que presenta múltiples usos. Como observación, si empleamos elementos HTML dentro del botón, 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 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, con lo que su uso es por esto desaconsejable. En el caso de un botón de este tipo con una tabla dentro, Nestcape sólo visualizara la tabla.
Ejemplo.-
<form>
<button name="boton_1" type="button" style="color:blue;width:100px;height:60px;font-size: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>
NOTA IMPORTANTE.-
Todo lo explicado hasta ahora para
estilos en elementos de formualrio es totalmente valido para Internet Explorer y
para Nestcape 6x, pero no así para Nestcape 4x, ya que este navegador tiene una
manera parcial de interpretar los estilos en estos elementos. Así, si tenemos un
radio botón contenido en una tabla con un determinado color de fondo, Nestcape
4x va a colocar alrededor del radio botón un cuadrado del mismo color que tenga
asignado el BODY de la pagina, factor este que crea un efecto indeseado que
afeara nuestra pagina. La solución para por asignar mediante estilos un fondo al
radio de igual color que la tabla, pero esto sólo se logra a veces, ya que si
por ejemplo hay en la pagina, por encima del radio, otro elemento de formulario
al que hemos aplicado algún estilo, el estilo del radio no funciona, con lo que
seguiremos con el indeseado marco alrededor del mismo. Y esto ocurre igualmente
con otros elementos de formulario.
( Si queremos evita este efecto de radios en concreto, la solución pasa por usar JavaScript. Introducimos una tabla contenedora del color que queramos que tenga el fondo de nuestra pagina, situada exactamente a cero pixels en el BODY y con un ancho tal que ocupe todo el fondo visible. Posteriormente asignamos mediante el evento onLoad del BODY un color de fondo al documento igual que el que tenga la tabla, con lo que engañamos a Nestcape y conseguimos que el marco que rodea al radio botón sea el deseado. Si nuestra tabla es de color rojo y queremos la pagina con fondo blanco el código necesario sería:
<bodyonLoad="document.bgColor="red">
<table width="100%" bgcolor="white" height="100%">
<tr>
<td>
<table...bgcolor="red"> (la tabla del formulario
</td>
</tr>
</table>
</body>
 |
 |