Parámetros
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Parámetros

on

  • 349 views

 

Statistics

Views

Total Views
349
Views on SlideShare
349
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Parámetros Document Transcript

  • 1.  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. o tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.
  • 2. 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> con el que obtenemos: 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. o tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario. Ejemplo.- <form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miform"> 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> con el que obtenemos: 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:
  • 3. 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. o tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario. Ejemplo.- <form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miform"> <input type="Button" name="boton" value="pulsame"> < /form> con el que obtenemos: 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 disabled, que desactiva el botón, de tal forma que no se produce ninguna acción cuando se pulsa, pués permanece inactivo. o tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.
  • 4. 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.- <form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miform"> <input type="image" name="boton" src="/images/contenidos/lecciones/1.jpg" width="50" height="20" hspace="10" align="middle"> < /form> con el que obtenemos: 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.- <form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miform"> <input type="password" size="15" maxlength="10"> < /form> con el que obtenemos: 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.- <form action="mailto:yo@miservidor.com" method="post"
  • 5. enctype="text/plain" name="miform"> <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. o disabled, que desactiva el botón, de tal forma que no se produce ninguna acción cuando se pulsa, pués permanece inactivo. o tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.  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:
  • 6. 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>con el que obtenemos: unoselecciona un de los siguientes valores:<form action="cgi-bin/control.exe" method="post" enctype="text/plain"name="miform">selecciona una de los siguientes valores:<select size="3"><option value="uno">uno<option value="dos">dos<option value="tres">tres</select>< /form>con el que obtenemos: uno dos tresselecciona un de los siguientes valores:<form action="cgi-bin/control.exe" method="post" enctype="text/plain"name="miform">selecciona una de los siguientes valores:<select size="3" multiple><option value="uno">uno<option value="dos">dos<option value="tres">tres</select>< /form>con el que obtenemos:
  • 7. uno dos tresselecciona un de los siguientes valores: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 datoslargos en un formulario. Si no se introduce ningún texto entre ambas etiquetas la caja de texto aparecerá vacía, para que el usuario lointroduzca, pero si introducimos algún texto entre ambas este aparecerá inicialmente en la caja. Si el texto que contiene supera elespacio 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.-<form action="cgi-bin/control.exe" method="post" enctype="text/plain"name="miform">introduce un comentario:<textarea name="comentario" cols="20" rows="10"></textarea>< /form>con el que obtenemos:
  • 8. introduce un comentario:Ejemplos.-<form action="cgi-bin/control.exe" method="post" enctype="text/plain"name="miform"><textarea name="comentario" cols="20" rows="10">introduce un comentario:</textarea>< /form>con el que obtenemos: introduce un comentario:Ejemplos.-<form action="cgi-bin/control.exe" method="post" enctype="text/plain"name="miform"><textarea name="comentario" cols="20" rows="10" wrap="off">introduce un comentario:</textarea>< /form>con el que obtenemos:
  • 9. introduce un comentario:Ejemplos.-<form action="cgi-bin/control.exe" method="post" enctype="text/plain"name="miform"><textarea name="comentario" cols="20" rows="10" readonly>ahora no puedes escribir nada.</textarea>< /form>con el que obtenemos: 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, siendoBUTTON una de ellas, bastante util por cierto. La pega es que las versiones de 4 de Nestcape se lanzaron antes de estasimplementaciones, por lo que estas nuevas etiquetas sólo se pueden visualizar correctamente con Internet Explorer 4 ysuperiores.Esta etiqueta proporcina un método único para la implementación de cualquier tipo de botón de formulario. Sus principales atributosson: 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.
  • 10. Ejemplos.-<form action="cgi-bin/control.exe" method="post" enctype="text/plain"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<form action="cgi-bin/control.exe" method="post" enctype="text/plain"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, sipulsábamos en el texto que acompañaba a un control de confirmación, no sucedía nada. Ahora, en cambio, si utilizamos la etiquetaLABEL, 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 noson 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
  • 11. /bottom", lo que nos permite alinear el título horizontal y verticalmente. La única pega es que deberemos introducir el conjunto en unacelda 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>con el que obtenemos: Caja de texto pon tu nombre:Formularios con estilosLos formularios constituyen una buena herramienta con la que podemos volver nuestraspáginas web más interactivas, pero los diferentes elementos que los componenpresentan bastantes limitaciones a la hora del diseño "estético" de la página. Esto esdebido a que son objetos predefinidos, y como tales tienen una propiedades que hastahace poco eran fijas e inmutables.Hace poco Microsoft, en su empeño por convertir cada elemento HTML en un objetolibre 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 diversascaracterísticas de los componentes de un formulario, dándonos con ello un grán abanicode posibilidades de diseño. Por desgracia, casi todas estas implementaciones sonignoradas por Nestcape, con lo que el poder que podíamos conseguir con esta técnicaqueda disminuido notablemente. La única solución viable pués si queremos modificar elfuncionamiento estandar de los elementos de un formulario es intentar compaginar undiseño personalizado de nustra página para aquellos navegantes que nos visiten usandoExplorer con un diseño estandar válido para los que lo hagan con Nestcape. Y estomismo 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. Paraempezar, el tamaño de las mismas viene definido mediante el atributo size="n", ymediante 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, yaque el aumento de una unidad en el valor de n se traduce en un aumento de anchura de 6
  • 12. - 7 píxeles, que puede ser excesivo margen para nustro gusto, por ejemplo si trabajamosen 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 defondo de la caja, que siempre por defecto es blanco, color del texto (negro), tamaño yfamilia 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 formatoclásico ( y esto nos vale para todo lo que digamos en adelante de hojas de estilo enformularios).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:  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.
  • 13.  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 consideremosnecesarios. En estos ejemplos Nestcape sólo aceptaría el tamaño de la fuente, el tipo deesta 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 deellas como es maxlenght queda anulado en cuanto introducimos un estilo, por lo que nopodremos usar las dos cosas juntas. Si queremos usar CSS y a la vez determinar unnúmero máximo de caracteres de entrada en la caja de texto tendremos que usar unafunción JavaScript.* estilos para botones de radio.El planteamiento es análogo al de las cajas de texto que hemos visto, pero debido a queeste campo de formulario es sólo un botón sin texto intrínseco, las propiedades de CSSque 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:
  • 14. Explorer nos mostrará los botones de radio con las dimensiones definidas, peroNestcape los mostrará con sus dimensiones estandar. Lo que sí aceptan ambosnavegadores en el color de fondo, y esto es muy importante, ya que si nuestra páginatiene un fondo de color definido y no especificamos el mismo color para el botón deradio Explorer adaptará el color del contorno del mismo al de la página, pero Nestcapeno, con lo que se verá un cuadrado de color blanco alrededor del botón, cosa que afeamucho el diseño. Por esto: "siempre que utilicemos botones de radio en páginas con uncolor de fondo que no sea blanco deberemos utilizar CSS para darle al botón el mismocolor de fondo que el que tiene la página."Otro factor importante a la hora de trabajar con botones de radio en recordar quesiempre debemos establecer los atributos name y value, ya que si no Nestcape noactivará los botones. Y si le damos un borde determinado al botón, hay que tener encuenta 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í sereducirá, y segundo que Nestcape no pintará el borde alrededor del botón, si no que lohará 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 noafecten 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.
  • 15.  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 lafuente, pero no se apreciarán ni colores de fuente ni de fondo. Los bordes apareceránaparte del botón, por lo que es conveniente que si queremos usar botones con borde esmejor 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, yaque podemos definir qué bordes en concreto queremos que se vean. Para másinformació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
  • 16. referente a bordes, ya que en los propios atributos del botón imagen podemos definir sutamaño mediante width y height. En cuanto a los bordes, Nestcape los muestra apartedel botón, mostrando este con unos bordes azules por defecto si ni incluimos el atributode 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 ambosnavegadores, y puesto que Nestcape no admite este atributo, deberemos utilizar unbotón de tipo image, estableciendo como imagen de fondo simplemente un gráfico delcolor que deseemos. El inconveniente es que este tipo de botones no admiten elparámetro value, por lo que si queremos que aparezca un texto en el botón deberá estareste incluido en la propia imagen de fondo.NOTA: En Nestcape, puesto que no reconoce para este tipo de botón los atributos deestilo de anchura y altura deberemos especificar estos como parámetros width y heightdel 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 deimagen de fondo. No admite este, pero sí el de color de fondo, admitiendolo tanto paratoda 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 lasetiquetas <FONT SIZE="tamaño" FACE="familia">, con los inconvenientes queutilizar estas etiquetas ya depreciadas conlleva. En este caso, la anchura y la altura de lalista dependerá del tamaño y tipo de fuente elegido (para Nestcape).Ejemplos.-<form><font face="Courier" size="1">
  • 17. <select style="width:170px;height:50px;color:red;background-color:yellow;font-size:12px;font-family:courier;"><option value="uno">uno<option value="dos">dos<option value="tres">tres< /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 deestilo, debiendo especificar el tamaño y la familia de la fuente dentro de la etiquetaFONT.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 SansMS;background-image:url(images/1.jpg);color:red;asdas">< /textarea>< /font>< /form><form><font face="Helvetica" size="3">
  • 18. <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 essólo aplicable a Explorer. Este reconoce todas la etiquetas de estilo, presentando esteelemento de formulario la grán ventaja de que admite tanto imagen de fondo como textoy 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 porejemplo una tabla, los estilos de color de texto deben ser definidos bien mediante laetiqueta FONT dentro de la tabla, bien dando estilo de texto mediante CSS a la tabla ensí; si no lo hacemos así normalmente el texto aparecerá en color negro. El tipo de fuentey el tamaño sí lo cogen directamente del estilo del botón. La pena es que no podremosusarla para construir páginas que deban ser visualizadas en ambos navegadores, con loque su uso es por esto desaconsejable. En el caso de un botón de este tipo con una tabladentro, 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 SansMS;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
  • 19. tres cuatro* posicionamiento de elementos de formulario.Lo que sigue ahora es también exclusivo de Explorer, y es una aplización directa de lasHojas de Estilo en Cascada y del hecho de que este navegador reconoce cualquierelemento HTML como un objeto en sí mismo. Como consecuencia de ello podemosusar los atributos de posicionamiento de CSS para situar relativa o absolutamente unelemento en pantalla. Esto ofrece la grán ventaja de que no nos vemos sometidos a casininguna limitación en el diseño, pudiendo situar nuestros elementos donde queramos.Para posicionar elementos de formulario dentro de la ventana de nuestro navegadordeberemos introducir los parámetros position (absolute / relative), top. (normalmenteen píxeles, y define la posición de la esquina superior izquierda del elemento respecto alborde superior de la ventana del navegador) y left (normalmente en píxeles, quedetermina la distancia respecto al borde izquierdo de la ventana del navegador) dentrodel atributo style del elemento.La sintaxis general sería del tipo:< form><input type="Text" style="width:100px;height:20px;background-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 ventanadel navegador y a 200 píxeles del borde izquierdo.Ver resultadoEn el caso de que varios elementos se superpusieran aparecería aquel que estuvierasituado antes en la estructura del código HTML de la página. Esto se puede cambiarmediante el atributo z-index, que define una coordenada z o de profundidad de loselementos 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.
  • 20. El grán inconveniente de posicionar elementos de formulario mediante estilos directoses que aquellos visitantes que usen Nestcape Navigator no verán una página agradableentonces. ¿Qué podemos hacer si queremos posicionar un elemento para que sea visibleen ambos navegadores?.La solución pasa por colocar los elementos dentro de una capa, creada mediante lasetiquetas <DIV> y/o <SPAN>, con sus respectivas de cierre. Con esto, podemosposicionar estas capas, y con ellas los elementos que contienen, en nuestra página, yesto 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"><divstyle="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><divstyle="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 resultadoY así y todo seguimos con las pegas en Nestcape, ya que las capas se activan al coger elfoco el textarea que contienen, con lo que se produce una situación liosa. Además, paraque 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 horade recoger los datos para enviarlos y de validar y acceder mediante JavaScript a todoslos elementos que tengamos. Con Explorer esto no ocurre, ya que siempre la primeratextarea estará debajo de la segunda, aunque reciba el foco.De todas formas lo dicho en este capítulo sobre elementos superpuestos es sóloorientativo, ya que pocas veces vamos a necesitar utilizar este efecto.Maquetación de formularioHemos visto hasta ahora cómo implementar los diferentes elementos que forman unformulario, pero de una forma aislada, y esta no es la forma en que estos trabajan. Paraque un formulario sea atractivo para un visitante y logre romper ese miedo innato quetodos tenemos a la hora de introdugir nuestros datos personales, lo primero que debetener 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 seael adecuado.
  • 21. Para dar un buen aspecto a nuestro formulario deberemos primero estudiar, antes dehacer nada, qué datos queremos recopilar. eliminando los superfluos, (no debemosagobiar al visitante con demasiadas preguntas) y hacer un esquema en papel de cómovan 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 encapas o posicionamientos directos de elementos sólo será valida si estamos diseñandopara I. Explorer, es decir, que no debemos usarla nunca, ya que siempre debemos crearpáginas para ambos navegadores. A título teórico veremos esta forma, pero sólo paraeso.* Maquetación mediante tablas.La técnica más general para maquetar una página es la basada en tablas, y a estotampoco escapan los formularios. Vamos pués a maquetar nuestro formulario usandouna 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 nossean necesarias. En la primera columna van a ir los mensajes de cada campo, y el lasegunda los propios campos del formulario.Deberemos tener en cuenta:* hay que especificar correctamente las anchuras de la tabla en su totalidad y de lasceldas que la van a componer. Hay que tener en cuenta que todas las celdas se van aadaptar a la de mayor contenido, por lo que conviene elegir unos mensajes de campo delongitud 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 atributocelspacing.* si utilizamos en la maquetación celdas "vacias" deberemos introducir dentro de ellasun espacio (&nbsp;) o una imagen transparente de 1 píxel, para que se mantengan lasanchuras de estas celdas.* es conveniente disponer todo el formulario en la visual de la ventana del navegadorpara que el usuario no tenga que moverse a lo largo del mismo mediante las barras dedesplazamiento, 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 contantos espacios (&nbsp;) 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">
  • 22. <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><td bgcolor="#ccffff""><input type="text" maxlength="35" size="35"name="direccion"></td>< /tr>< tr><td bgcolor="#ccff33" width="180"><b>Código Postal:</b></td><td bgcolor="#ccffff""><input type="text" maxlength="5" size="4"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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 bgcolor="#ccffff""><input type="checkbox" name="musica" value="rock" checked>Rock&nbsp;&nbsp;<input type="checkbox" name="musica" value="pop" checked>Pop&nbsp;&nbsp;<input type="checkbox" name="musica" value="heavy">Heavy&nbsp;&nbsp;<input type="checkbox" name="musica" value="tecno">Tecno</td>< /tr>< tr><td bgcolor="#ccff33" width="180"><b>Elige un escritor:</b></td><td bgcolor="#ccffff""><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><td bgcolor="#ccffff"">
  • 23. <textarea name="comentario" cols="20" rows="10"></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 lasparajas de etiquetas <DIV>...</DIV> y/o <SPAN>...</SPAN>, que vamos a situar ennuestra página mediante los atributos de style position, top y left. Ya hemos dichoantes 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 ellasbien 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,464,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;}
  • 24. #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;&nbsp;&nbsp;&nbsp;&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"><input type="checkbox" name="musica" value="rock" checked>Rock&nbsp;&nbsp;<input type="checkbox" name="musica" value="pop" checked>Pop&nbsp;&nbsp;<input type="checkbox" name="musica" value="heavy">Heavy&nbsp;&nbsp;<input type="checkbox" name="musica" value="tecno">Tecno< /div>< div id="capaG0" class="mensaje">Elige un escritor:</div>< div id="capaG1" class="campo"><select style="width:100px;">
  • 25. <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 name="comentario" cols="20" rows="10"></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. Paracomprender bien este ejemplo es necesario tener conocimientos de Hojas de Estilo enCascada (CSS), que nos permiten posicionar y dar estilo completo a las contenidos delas capas.Si visualizamos este último ejemplo en Nestcape el resultado no es el esperado, por loque no se puede usar esté método para aplicaciones cross-browser.