Parámetros

 parámetros:
o name=" nombre", que asigna de forma unívoca un nombre
identificador a la variable que se introduzca en la caja de texto.
o maxlenght=" n ", que fija el número máximo de caracteres que se
pueden itroducir en la caja de texto.
o size=" n ", que establece el tamaño de la caja de texto en pantalla.
o value=" texto ", que establece el valor por defecto del texto que
aparecerá en inicialmente en la caja de texto.
o disabled, que desactiva la caja de texto, por lo que el usuario no podrá
escribir nada en ella.
o accept = " lista de content-type", Indica el tipo de contenido que
aceptará el servidor.
Sus posibles valores son:
1. text/html
2. application/msexcel
3. application/msword
4. application/pdf
5. image/jpg
6. image/gif
etc.
o readonly, que establece que el texto no puede ser modificado por el
usuario.
o tabindex = " n ", que especifica el orden de tabulador que tendrá el
campo respecto todos los elementos que incluye el formulario.
o alt= " texto ", que asigna una pequeña descripción al elemento.

Ejemplo.-

< form action="" method="post" enctype="text/plain" name="miform">
introduce tu nombre:
<input type="text" maxlength="10" size="10" name="nombre">
< /form>
con el que obtenemos:

introduce tu nombre:

 radio, que define un conjunto de elementos de formulario de tipo circular, en los
que el usuario debe optar por uno solo de ellos, que se marca con el ratón o
tabulador. Admite los parámetros:
o name=" nombre"", que asigna un nombre identificador único a la
variable definida por el elemento. Este identificador debe ser el mismo
para todos los elementos radio de un grupo.
o value =" valor ", que define un valor posible de la variable para cada
uno de los radio botones.
o checked, que marca por defecto uno de los radio botones del grupo.
o disabled, que desactiva el radio botón, por lo que el usuario no podrá
marcarlo.

Ejemplo.-

<form action="mailto:yo@miservidor.com" method="post"
enctype="text/plain" name="miform">
marca tu equipo favorito:
<input type="Radio" name="equipo" value="madrid" checked>Real Madrid
<input type="Radio" name="equipo" value="atletico">Atlético de Madrid
<input type="Radio" name="equipo" value="barcelona">Barcelona
< /form>


marca tu equipo favorito: Real Madrid Atlético de Madrid
Barcelona

 checkbox, que define una o más casillas de verificación, pudiendo marcar el
usuario las que desee del conjunto total. Si pinchamos una casilla con el ratón o
la activamos con el tabulador y le damos a la barra espaciadora la casilla se
marca; si volvemos a hacerlo, la casilla se desmarca. Sus parámetros
complementarios son:
o name=" nombre", que asigna un nombre identificador único a la
variable definida por el elemento. Este identificador debe ser el mismo
para todos los elementos conjunto de casillas.
o value =" valor ", que define un valor posible de la variable para cada
uno de casillas de verificación.
o checked, que marca por defecto una o más de las casillas del grupo.
o disabled, que desactiva la casilla de verificación, por lo que el usuario
no podrá marcarla.

Ejemplo.-

marca tu música favorita:
<input type="checkbox" name="musica" value="rock" checked>Rock
<input type="checkbox" name="musica" value="pop" checked>Pop
<input type="checkbox" name="musica" value="heavy">Heavy
<input type="checkbox" name="musica" value="tecno">Tecno
< /form>


marca tu música favorita: Rock Pop Heavy Tecno

 button, que define un botón estandar. Este botón puede ser usado para
diferentes acciones, pero normalmente se le dá utilidad mediante JavaScript,
mediante el evento "OnClick". Sus parámetros son:

o name=" nombre", que asigna un nombre al botón, que nos puede servir
para acciones con lenguaje de script.
o value=" valor ", que define el texto que va a figurar en el botón.
o disabled, que desactiva el botón, de tal forma que no se produce ninguna
acción cuando se pulsa, pués permanece inactivo.

Ejemplo.-

<input type="Button" name="boton" value="pulsame">
< /form>


 image, que introduce un botón definido por una imagen, en vez del formato
estandar de botones, con lo que podemos así personalizar el botón. Inicialmente
su función era contener una localización de las coordenadas que pinchara el
usuario, para que luego el programa CGI realizara una acción u otra
dependiendo de estas. Pero actualmente se usa más para personalizar un botón
de envío de datos; es decir, su funcionalidad es análoga a la de submit, pero nos
permite personalizar este elemento. Además añadirá como información en el
formulario las coordenadas x e y donde el usuario lo pulsó. Admite los
parámetros:
o name=" nombre", que asigna un nombre al botón para identificarlo de
forma única y poder así acceder luego a sus propiedades.
o src= " ruta imagen ", que establece la ruta dónde localizar el fichero de
imagen. Esta ruta puede ser relativa al directorio web en el servidor o una
URL absoluta que define unívocamente la lozalización de la imagen.
o width= " w ", que fija la anchura del botón de imagen.
o height= " h ", que fija la altura del botón de imagen.
o align= " left / middle / right / bottom / baseline...", que define la
posición del texto que rodea el botón respecto a este.
o hspace= " x ", que fija el espacio horizontal que habrá entre el botón y
el texto que lo circunda.
o vspace= " x ", que fija el espacio vertical que habrá entre el botón y el
texto que lo circunda.
o alt = " texto ", que asocia un texto explicativo al botón de imagen. Al
situar el cursor encima del botón se mostrará este texto en forma de tip
de Windows. Siempre es conveniente poner este atributo, para que en
caso de navegadores de sólo texto, de que la imagen no se encuentre en
la ruta por cualquier motivo o de que la página tarde mucho en cragarse
por su peso, el usuario puede ver qué hace el botón de imagen y pueda en
consecuencia utilizarlo para tal fin.

o usemap= " #nombre de mapa ", que nos permite el uso de un mapa de
imágenes en el cliente como un dispositivo más de entrada de datos.

Ejemplo.-

<input type="image" name="boton" src="/images/contenidos/lecciones/1.jpg"
width="50" height="20" hspace="10" align="middle">
< /form>


púlsa aquí

 password, que define una caja de texto para contener una clave o password, por
lo que el texto que introduzca el usuario aparecerá como asteriscos, por motivos
de seguridad. Sus parámetros opcionales son los mismos que los del tipo text.

Ejemplo.-

<input type="password" size="15" maxlength="10">
< /form>

introduce la clave de acceso:

 hidden, que define un campo invisible, por lo que no se ve en pantalla. Aunque
parece así definido que no tiene utilidad, sus usos son varios e importantes, y los
veremos más tarde. Sus atributos son:
o name=" nombre", que asigna un nombre identificador único al campo
oculto.
o value=" valor ", que va a ser el valor fijo que se le va a pasar al
programa del servidor, ya que el usuario no puede modificarlo. En
realidad este valor no tiene porqué ser fijo, ya que lo vamos a poder
modificar mediante código de script, lo que nos va a permitir ir pasando
una serie de variables ocultas de una página a otra.

Ejemplo.-


<input type="hidden" name="contraseña" value="123ABC">
< /form>

 file = " ruta archivo ", que define un archivo que puede ser enviado junto con
los datos del formulario, y en donde la ruta puede ser relativa al directorio de
carpetas del servidor o una ruta URL absoluta de Internet. Debemos asegurarnos
de que el tipo de archivo enviado esté dentro de los permitidos por la etiqueta
ACCEPT.

 submit, que incorpora al formulario un botón de envío de datos. Cuando el
usuario pulsa este botón los datos que ha introducido en los diferentes campos
del formulario son enviados al programa del servidor o a la dirección de correo
indicada en action. Sus atributos son:
o value=" valor ", que define el texto que va a aparecer en el botón de
envío.

 reset, que define un botón que al ser pulsado por el usuario borra todos los datos
que hubiera introducido en cualquiera de los campos del formulario. Sus
atributos son los mismos que los de SUBMIT.

<SELECT>...</SELECT>

Mediante esta etiqueta podemos definir una entrada de datos en forma de lista desplegable, que presenta varias opciones de elección,
de tal forma que el usuario puede elegir una o varias de ellas, si así se especifica.

Sus atributos y valores son:

o name=" nombre", que asigna un nombre identificador al campo, de tal forma
que al enviar los datos del formulario la opcción elegida será asociada a este
nombre.
o size= " n ", con n= nº entero, que define el número de opciones visibles. Si n=1
el campo de selección se presenta como una lista desplegable, mientras que si se
indica otro valor se presenta como una caja de lista con barra de desplazamiento.
o multiple, que permite elegir varias de las opciones a la vez. Si no se especifica
este atributo solamente se podrá escoger una de las opciones. Para ello hay que
mantener pulsada la tecla CONTROL mientras se seleccionan y/o deseleccionan
las diversas opciones.
o disabled, que desactiva la lista, de tal forma que no se produce ninguna acción
cuando se pulsa una opción, pués permanece inactiva.
o tabindex = " n ", que especifica el orden de tabulador que tendrá el campo
respecto todos los elementos que incluye el formulario.
Para introducir cada una de las diferentes opciones de la lista se utiliza la etiqueta <OPTION>, que admite como parámetros:

o value, que fija el valor que será asociado al parámetro name de <SELECT>
cuando se envíe el formulario. Este valor debe ser único para cada opción.
o selected, que establece la opción por defecto. Si no se especifica este parámetro
en ninguna opción se tomará la primera de ellas por defecto.

La anchura de la lista desplegable vendrá determinado por el número de caracteres de la opción que más tenga.

Ejemplos.-

<form action="cgi-bin/control.exe" method="post" enctype="text/plain"
name="miform">
selecciona una de los siguientes valores:
<select>
<option value="uno">uno
<option value="dos">dos
<option value="tres">tres
</select>
< /form>


uno
selecciona un de los siguientes valores:

name="miform">
<select size="3">
</select>
< /form>


uno
dos
tres

name="miform">
<select size="3" multiple>
</select>
< /form>


uno
dos
tres

Etiquetas <TEXTAREA>...</TEXTAREA>

Esta pareja de etiquetas inserta una caja de texto de múltiples líneas, que normalmente se utiliza para introducir comentarios o datos
largos en un formulario. Si no se introduce ningún texto entre ambas etiquetas la caja de texto aparecerá vacía, para que el usuario lo
introduzca, pero si introducimos algún texto entre ambas este aparecerá inicialmente en la caja. Si el texto que contiene supera el
espacio disponible en la caja aparecerá una barra de desplazamiento vertical.

Sus atributos y valores son:

o name=" nombre",que asigna un nombre identificador al campo, que será
asociado en el envío del formulario al texto introducido en la caja de texto.
o cols=" x ", que define el número de columnas visibles de la caja de texto.
o rows= " y ", que define el número de filas visibles de la caja de texto.
o wrap= " valor ", que justifica automáticamente el texto en el interior de la caja.
Este atributo es de uso complicado.
Según las recomendaciones si su valor es VIRTUAL se enviará todo el texto
seguido, en una línea, mientras que si vale PHYSICAL el texto se enviará
separado en líneas físicas, pero así como se define no lo admiten los
navegadores. Usemos cual usemos de los dos el resultado es el mismo:
justificación por líneas físicas, y así y todo se producen saltos de línea
indeseados.
Si construimos la página web con un programa de ayuda tipo HomeSite nos
encontramos con tres posibles valores de wrap: SOFT y HARD, que hacen lo
mismo, alineando el contenido en líneas físicas, como en los casos anteriores y
es el valor por defecto, y OFF, que coloca todo el texto de la caja en una sóla
línea, apareciendo entonces una barra de desplazamiento horizontal para poder
visualizar todo el contenido de la caja.
o disabled, que desactiva la caja de texto. Su utilidad es escasa.
o readonly, que impide que el contenido de la caja sea modificado por el usuario.
o tabindex = " n ", que especifica el orden de tabulador que tendrá el campo
respecto todos los elementos que incluye el formulario.

Ejemplos.-

name="miform">
introduce un comentario:
<textarea name="comentario" cols="20" rows="10">
</textarea>
< /form>



Ejemplos.-

name="miform">
</textarea>
< /form>



Ejemplos.-

name="miform">
<textarea name="comentario" cols="20" rows="10" wrap="off">
</textarea>
< /form>



Ejemplos.-

name="miform">
<textarea name="comentario" cols="20" rows="10" readonly>
ahora no puedes escribir nada.
</textarea>
< /form>


ahora no puedes escribir nadar

<BUTTON>...</BUTTON>

A partir de la implementación de los estándares HTML 4.0 contamos con varias etiquetas nuevas para construir formularios, siendo
BUTTON una de ellas, bastante util por cierto. La pega es que las versiones de 4 de Nestcape se lanzaron antes de estas
implementaciones, por lo que estas nuevas etiquetas sólo se pueden visualizar correctamente con Internet Explorer 4 y
superiores.

Esta etiqueta proporcina un método único para la implementación de cualquier tipo de botón de formulario. Sus principales atributos
son:

o type= " tipo ", que puede tomar los ya conocidos valores submit (por defecto),
reset y button.
o name= " nombre ", que asigna un nombre identificador único al botón.
o value= " texto ", que define el texto que va a aparecer en el botón.
La principal ventaja que aporta estas etiquetas es que ahora vamos a poder introducir dentro de ellas cualquier elemento de HTML,
como imágenes y tablas.

Ejemplos.-

name="miform">
<button name="boton_1" type="button">
<table width="10" 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>

con el que obtenemos: (en Nestcape sólo se verá la tabla, no el botón)

uno dos
tres cuatro

name="miform">
<button name="boton_1" type="button">
<img src="images/pajaro.gif" width="75" height="30" border="0" alt="enviar">
</button>
</form>

con el que obtenemos: ( en Nestcape sólo se verá la imagen, no el botón)

Etiquetas <LABEL>...</LABEL>

Hasta hora, el texto que acompañaba a los campos de entrada no estaba asociado a los mismos de ninguna manera. Así, por ejemplo, si
pulsábamos en el texto que acompañaba a un control de confirmación, no sucedía nada. Ahora, en cambio, si utilizamos la etiqueta
LABEL, el control cambiará de estado (sólo disponible en Netscape 5).

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">
<label>
<input type="checkbox" name="correo">
deseo que me envíen correo
</label>
< /form>

Etiquetas <FIELDSET>...</FIELDSET>

Hasta ahora, no disponíamos de ninguna manera de agrupar visualmente varios controles, si no echábamos mano de elementos que no
son del formulario, como tablas o imágenes.

Ahora, si encerramos una parte de un formulario dentro de la etiqueta FIELDSET se mostrará un rectángulo alrededor de los mismos.
Además, podemos indicar un título por medio de la etiqueta LEGEND, que admite el parámetro align="left / center / right / top

/bottom", lo que nos permite alinear el título horizontal y verticalmente. La única pega es que deberemos introducir el conjunto en una
celda de tabla con un ancho determinado, ya que si no lo hacemos así el recuadro abarcará todo el ancho de pantalla disponible.

Ejemplo.- (Sólo para I. Explorer)

< form action="cgi-bin/control.exe" method="post" enctype="text/plain"
name="miform">
<table width="200">
<tr>
<td>
<fieldset>
<legend align="left"><font color="red">Caja de texto</font></legend>
pon tu nombre:
<input type="text" size="15">
</fieldset>
</td>
</tr>
<table>
< /form>

Caja de texto pon tu nombre:

Formularios con estilos

Los formularios constituyen una buena herramienta con la que podemos volver nuestras
páginas web más interactivas, pero los diferentes elementos que los componen
presentan bastantes limitaciones a la hora del diseño "estético" de la página. 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, dándonos con ello un grán 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 página para aquellos navegantes que nos visiten usando
Explorer con un diseño estandar válido 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 clásico. 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 página 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 verán así en I. Explorer, ya que en Nestcape aparecerán con el formato
clásico ( 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>
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:

 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 inglés o como formato hexadecimal.
 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 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 sólo aceptaría el tamaño 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
número máximo de caracteres de entrada en la caja de texto tendremos que usar una
función JavaScript.

* estilos para botones de radio.

El planteamiento es análogo 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 más 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 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 página
tiene un fondo de color definido y no especificamos el mismo color para el botón de
radio Explorer adaptará el color del contorno del mismo al de la página, pero Nestcape
no, con lo que se verá 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 páginas 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 página."

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 botón, hay que tener en
cuenta primero que las dimensiones del botón se adpatarán 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
reducirá, y segundo que Nestcape no pintará el borde alrededor del botón, 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;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:

 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.
 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.-

<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 apreciarán ni colores de fuente ni de fondo. Los bordes aparecerán
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 más facilidad de construcción, ya
que podemos definir qué bordes en concreto queremos que se vean. Para más
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 gráfico del
color que deseemos. El inconveniente es que este tipo de botones no admiten el
parámetro value, por lo que si queremos que aparezca un texto en el botón deberá 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 parámetros width y height
del propio botón 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 botón.

* estilos para listas de selección.

I.Explorer admite prácticamente 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 <FONT SIZE="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 dependerá 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;">
< /font>
< /form>

uno

<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>

uno

* estilos para cajas de texto múltiples.

Las cajas de texto de varias líneas 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 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>

* 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 grán 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 aparecerá 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 páginas 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 visualizará 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>

uno dos

tres cuatro

* posicionamiento de elementos de formulario.

Lo que sigue ahora es también exclusivo de Explorer, y es una aplización 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 grán ventaja de que no nos vemos sometidos a casi
ninguna limitación en el diseño, pudiendo situar nuestros elementos donde queramos.

Para posicionar elementos de formulario dentro de la ventana de nuestro navegador
deberemos introducir los parámetros position (absolute / relative), top. (normalmente
en píxeles, y define la posición de la esquina superior izquierda del elemento respecto al
borde superior de la ventana del navegador) y left (normalmente en píxeles, que
determina la distancia respecto al borde izquierdo de la ventana del navegador) dentro
del atributo style del elemento.

La sintaxis general sería del tipo:

< form>
color:red;color:yellow;font-size:10pt; font-family:Verdana;text-
align:center;position:absolute;top:50px;left:200px;">
< /form>

que nos situaría la caja de texto a 50 píxeles por debajo del borde superior de la ventana
del navegador y a 200 píxeles del borde izquierdo.

Ver resultado

En el caso de que varios elementos se superpusieran aparecería aquel que estuviera
situado antes en la estructura del código HTML de la página. Esto se puede cambiar
mediante el atributo z-index, que define una coordenada z o de profundidad de los
elementos en la página.

<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 grán inconveniente de posicionar elementos de formulario mediante estilos directos
es que aquellos visitantes que usen Nestcape Navigator no verán una página agradable
entonces. ¿Qué podemos hacer si queremos posicionar un elemento para que sea visible
en ambos navegadores?.

La solución 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 página, y
esto será comtemplado adecuadamente por los dos navegadores.

Un ejemplo de esto sería, basándonos 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,2
00,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,2
00,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 situación liosa. Además, 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 capítulo sobre elementos superpuestos es sólo
orientativo, ya que pocas veces vamos a necesitar utilizar este efecto.

Maquetación de formulario

Hemos visto hasta ahora cómo implementar los diferentes elementos que forman un
formulario, pero de una forma aislada, y esta no es la forma en que estos trabajan. Para
que un formulario sea atractivo para un visitante y logre romper ese miedo innato que
todos tenemos a la hora de introdugir nuestros datos personales, lo primero que debe
tener es una buena - magnífica apariencia estética.Y luego, por supuesto, que esté
realizado técnicamente bien y que el programa que lo vaya a gestionar en el servidor sea
el adecuado.

Para dar un buen aspecto a nuestro formulario deberemos primero estudiar, antes de
hacer nada, qué datos queremos recopilar. eliminando los superfluos, (no debemos
agobiar al visitante con demasiadas preguntas) y hacer un esquema en papel de cómo
van a estar dispuestos los diferentes elementos en la página.

Una vez definido el formulario que deseamos...¿Cómo lo llevamos a la realidad?. Bien,
podemos construirlo usando principalmente dos técnicas distintas, aunque la basada en
capas o posicionamientos directos de elementos sólo será valida si estamos diseñando
para I. Explorer, es decir, que no debemos usarla nunca, ya que siempre debemos crear
páginas para ambos navegadores. A título teórico veremos esta forma, pero sólo para
eso.

* Maquetación mediante tablas.

La técnica más general para maquetar una página es la basada en tablas, y a esto
tampoco escapan los formularios. Vamos pués a maquetar nuestro formulario usando
una tabla, teniendo siempre en cuenta las limitaciones que estas tienen.

La idea general es crear una tabla compuesta de dos columnas y tantas filas como nos
sean necesarias. En la primera columna van a ir los mensajes de cada campo, y el la
segunda los propios campos del formulario.

Deberemos tener en cuenta:

* hay que especificar correctamente las anchuras de la tabla en su totalidad y de las
celdas que la van a componer. Hay que tener en cuenta que todas las celdas se van a
adaptar a la de mayor contenido, por lo que conviene elegir unos mensajes de campo de
longitud parecida.

* si vamos a dar algún color de fondo a las celdas, para hacer la tabla más presentable,
es conveniente dejar un pequeño margen entre las celdas, mediante el atributo
celspacing.

* si utilizamos en la maquetación celdas "vacias" deberemos introducir dentro de ellas
un espacio ( ) o una imagen transparente de 1 píxel, para que se mantengan las
anchuras de estas celdas.

* es conveniente disponer todo el formulario en la visual de la ventana del navegador
para que el usuario no tenga que moverse a lo largo del mismo mediante las barras de
desplazamiento, ya que esto es incómodo para él. Para ello deberemos, si es necesario,
disponer el formulario en varias columnas de introducción de datos.

* si necesitamos separa elementos que estén dentro de la misma celda lo haremos con
tantos espacios ( ) como sea necesario.

Ejemplo.-

<form action="cgi-bin/mailto.cgi" method="post" enctype="application/x-www-form-
urlencoded">
<table width="60%" cellspacing="2" cellpadding="2" border="0">

<th colspan="2" bgcolor="Fuchsia">Por favor, rellena estos datos</th>
< tr>
<td bgcolor="#ccff33" width="180"><b>Nombre:</b></td>
<td bgcolor="#ccffff"><input type="text" maxlength="15" size="35"
name="nombre"></td>
< /tr>
< tr>
<td bgcolor="#ccff33" width="180"><b>Apellidos:</b></td>
<td bgcolor="#ccffff""><input type="text" maxlength="25" size="35"
name="apellidos"></td>
< /tr>
< tr>
<td bgcolor="#ccff33" width="180"><b>Direción:</b></td>
name="direccion"></td>
< /tr>
< tr>
<td bgcolor="#ccff33" width="180"><b>Código Postal:</b></td>
name="direccion"></td>
< /tr>
< tr>
<td bgcolor="#ccff33" width="180"><b>Marca tu equipo favorito:</b></td>
<td bgcolor="#ccffff"">
<input type="Radio" name="equipo" value="madrid" checked>Real Madrid
     <input type="Radio" name="equipo"
value="atletico">Atlético de Madrid
< /tr>
< tr>
<td bgcolor="#ccff33" width="180"><b>Marca tu música favorita:</b></td>
</td>
< /tr>
< tr>
<td bgcolor="#ccff33" width="180"><b>Elige un escritor:</b></td>
<select style="width:100px;">
<option value="Cervantes">Cervantes
<option value="Reverte">Reverte
<option value="Asimov">Asimov
</select>
</td>
< /tr>
< tr>
<td bgcolor="#ccff33" width="180" valign="top"><b>¿Algún comentario?</b></td>

</textarea>
< /td>
< /tr>
< tr>
<td bgcolor="#ccff33" width="180" align="right"><input type="submit"
value="enviar"></b></td>
<td bgcolor="#ccffff" align="left"><input type="reset" value="borrar"></td>
< /tr>
< /table>
< /form>

Ver resultado

* Maquetación mediante capas.

Otra forma de maquetar un formulario es utilizando capas, definidas mediante las
parajas de etiquetas <DIV>...</DIV> y/o <SPAN>...</SPAN>, que vamos a situar en
nuestra página mediante los atributos de style position, top y left. Ya hemos dicho
antes que este método suele traer bastantes quebraderos de cabeza en Nestcape.

La idea ahora es ir creando y posicionando las capas, introduciendo en cada una de ellas
bien un mensaje de campo bien el propio campo.

De esta forma podríamos escribir el siguiente código:

<html>
<head>
<title>formularios - ejemplo 6</title>
< style type="text/css">
.mensaje{width:195px;height:25px;clip:rect(0,195,25,0);background-
color:#ccff33;layer-background-color:#ccff33;padding-left:5px;font-
family:Verdana;font-size:8pt;font-weight:bold;padding-top:3px;}
.mensaje2{width:195px;height:168px;clip:rect(0,195,168,0);background-
color:#ccff33;layer-background-color:#ccff33;padding-left:5px;font-
family:Verdana;font-size:8pt;font-weight:bold;padding-top:3px;}
.boton{width:195px;height:30px;clip:rect(0,195,30,0);background-color:Fuchsia;layer-
background-color:Fuchsia;padding-left:5px;padding-top:3px;font-family:Verdana;font-
size:8pt;font-weight:bold;}
.boton2{width:265px;height:30px;clip:rect(0,265,30,0);background-
color:Fuchsia;layer-background-color:Fuchsia;padding-left:5px;padding-top:3px;font-
family:Verdana;font-size:8pt;font-weight:bold;}
.campo{width:265px;height:25px;clip:rect(0,265,25,0);background-color:#ccffff;layer-
background-color:#ccffff;padding-left:5px;padding-top:1px;}
.campo2{width:265px;height:168px;clip:rect(0,265,168,0);background-
color:#ccffff;layer-background-color:#ccffff;padding-left:5px;padding-top:1px;}
#cabecera{position:absolute;top:22px;left:20px;width:464px;height:25px;clip:rect(0,46
4,25,0);background-color:Fuchsia;layer-background-color:Fuchsia;text-
align:center;font-family:Verdana;font-size:8pt;font-weight:bold;padding-top:5px;}
#capaA0{position:absolute;top:50px;left:20px;}

#capaA1{position:absolute;top:50px;left:220px;}
#capaB0{position:absolute;top:80px;left:20px;}
#capaB1{position:absolute;top:80px;left:220px;}
#capaC0{position:absolute;top:110px;left:20px;}
#capaC1{position:absolute;top:110px;left:220px;}
#capaD0{position:absolute;top:140px;left:20px;}
#capaD1{position:absolute;top:140px;left:220px;}
#capaE0{position:absolute;top:170px;left:20px;}
#capaE1{position:absolute;top:170px;left:220px;}
#capaF0{position:absolute;top:200px;left:20px;}
#capaF1{position:absolute;top:200px;left:220px;}
#capaG0{position:absolute;top:230px;left:20px;}
#capaG1{position:absolute;top:230px;left:220px;}
#capaH0{position:absolute;top:260px;left:20px;}
#capaH1{position:absolute;top:260px;left:220px;}
#capaI0{position:absolute;top:433px;left:20px;padding-left:100px;}
#capaI1{position:absolute;top:433px;left:220px;}
< /style>
< /head>
< body>
< form name="miform">
< div id="cabecera">Por favor, rellena estos datos</div>
< div id="capaA0" class="mensaje">Nombre:</div>
< div id="capaA1" class="campo"><input type="text" maxlength="15" size="35"
name="nombre"></div>
< div id="capaB0" class="mensaje">Apellidos:</div>
< div id="capaB1" class="campo"><input type="text" maxlength="25" size="35"
name="apellidos"></div>
< div id="capaC0" class="mensaje">Direción:</div>
< div id="capaC1" class="campo"><input type="text" maxlength="35" size="35"
name="direccion"></div>
< div id="capaD0" class="mensaje">Código Postal:</div>
< div id="capaD1" class="campo"><input type="text" maxlength="5" size="4"
name="direccion"></div>
< div id="capaE0" class="mensaje">Marca tu equipo favorito:</div>
< div id="capaE1" class="campo">
< input type="Radio" name="equipo" value="madrid" checked>Real Madrid
& nbsp;    <input type="Radio" name="equipo"
value="atletico">Atlético de Madrid
< /div>
< div id="capaF0" class="mensaje">Marca tu música favorita:</div>
< div id="capaF1" class="campo">
< /div>
< div id="capaG0" class="mensaje">Elige un escritor:</div>
< div id="capaG1" class="campo">
<select style="width:100px;">

<option value="Cervantes">Cervantes
<option value="Reverte">Reverte
<option value="Asimov">Asimov
</select>
< /div>
< div id="capaH0" class="mensaje2">¿Algún comentario?</div>
< div id="capaH1" class="campo2">
</textarea>
< /div>
< div id="capaI0" class="boton"><input type="submit" value="enviar"
onclick="alert('botón de prueba. No está activo');"></div>
< div id="capaI1" class="boton2"><input type="reset" value="borrar"></div>
< /form>
< /body>
< /html>

y vemos que el resultado es análogo al obtenido mediante maquetación por tablas. Para
comprender bien este ejemplo es necesario tener conocimientos de Hojas de Estilo en
Cascada (CSS), que nos permiten posicionar y dar estilo completo a las contenidos de
las capas.

Si visualizamos este último ejemplo en Nestcape el resultado no es el esperado, por lo
que no se puede usar esté método para aplicaciones cross-browser.

Parámetros

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Parámetros

Parámetros