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
1
Ejemplos.
que nos da:
que nos da:
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, que determina el color de fondo, y cuyo valor puede venir dado en su nombre web en inglés o como formato hexadecimal.
2
•
color, que define el color de la fuente, y cuyo valor puede venir dado en su nombre web en inglés o como formato hexadecimal.
•
font-family, que fija el tipo de la fuente.
•
text-align, que define la alineación 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 4x 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 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.
que nos da:
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.
4
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.
que nos da:
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 botón.
•
height, que fija la altura del botón.
•
background-color, que determina el color de fondo, y cuyo valor puede venir dado en su nombre web en inglés o como formato hexadecimal.
5
•
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 inglés o como formato hexadecimal.
•
font-family, que fija el tipo de la fuente del texto del botón.
•
font-size, que define el tamaño del texto del botón.
•
font-weight, que fija el peso de la fuente (cantidad de negrita).
•
text-align, que define la alineación del texto en el botón.
•
padding-right (left / top/ bottom), que fija el margen entre el extremo derecho (izquierdo / superior /inferior) del botón 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.
que nos da:
6
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.
que nos da:
7
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 botsn. * estilos para listas de seleccisn. 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
, 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.
8
* estilos para cajas de texto múltiples. Las cajas de texto de varias líneas y columnas, definidas por la pareja deetiquetas, 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.
9
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: 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. uno
dos
tres
cuatro
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: | (la tabla del formulario |
11
