Botones de elección
Estos controles reciben también el nombre de botones de radio, como traducción directa de su denominación inglesa radio buttons y porque en general los navegadores suelen darles una forma circular. Para insertar un botón de elección usaremos de nuevo la etiqueta INPUT, pero esta vez el valor del atributo TYPE será radio:
<FORM>
<INPUT TYPE="radio">
</FORM>
|
Este tipo de controles tiene dos estados o posiciones: seleccionado (ON) o no seleccionado (OFF), estando inicialmente todos en la posición OFF. También es posible especificar que un botón determinado esté seleccionado inicialmente insertando el atributo CHECKED en la etiqueta INPUT de la siguiente manera:
<INPUT TYPE="radio" CHECKED>
|
Los botones de elección suelen ser insertados en los formularios en grupos, dando al usuario la posibilidad de elegir entre una serie de opciones. Cuando pulsamos sobre un botón de radio le pasamos a la posición ON y permanecerá en ese estado hasta que pulsemos en otra opción del mismo grupo. Esto es así porque entre los botones de radio de un mismo grupo sólo uno de ellos puede estar seleccionado, por tanto cuando seleccionamos uno, aquel que estuviese seleccionado previamente dejará de estarlo.
Para indicar que una serie de botones de elección pertenecen a un mismo grupo debemos incluir el mismo valor en el atributo NAME en todos ellos. Además debemos usar el atributo VALUE para dar un nombre distinto a cada uno de los botones. Veamos un ejemplo:
Indique el tipo de música que más le guste:
<FORM>
<P><INPUT TYPE="radio" NAME="musica" VALUE="Jazz">Jazz
<P><INPUT TYPE="radio" NAME="musica" VALUE="Pop">Pop
<P><INPUT TYPE="radio" NAME="musica" VALUE="Rock">Rock
<P><INPUT TYPE="radio" NAME="musica" VALUE="Country">Country
</FORM>
|
Con este código obtenemos el resultado que apreciamos en la figura 12.10. En ella vemos que únicamente el botón de radio correspondiente a 'Pop' está seleccionado. Invitamos al lector a que pruebe este ejemplo y observe cómo al seleccionar otro de los botones de elección el anterior deja de estar seleccionado.
Por supuesto, es posible incluir varios grupos de botones de selección dentro de un mismo formulario. Por ejemplo al código anterior podríamos añadirle (antes de </FORM>) este otro:
<P><INPUT TYPE="radio" NAME="cine" VALUE="Accion">Acción
<P><INPUT TYPE="radio" NAME="cine" VALUE="Comedia">Comedia
<P><INPUT TYPE="radio" NAME="cine" VALUE="CienciaFiccion">Ciencia-Ficción
<P><INPUT TYPE="radio" NAME="cine" VALUE="Drama">Drama
|
De esta manera tendríamos el formulario de la figura 12.11 en la que vemos que se ha podido seleccionar 'Pop' como tipo de música favorito y 'Ciencia-ficción' como género cinematográfico preferido, al pertenecer los botones a distintos grupos.
Quizá el lector haya tenido ya la siguiente duda. Si en las cajas de texto se manda al servidor el texto que introduzca el usuario, ¿qué se envía cuando usamos botones de elección? La respuesta es simple. Por un lado es necesario enviar el nombre del grupo (el valor del atributo NAME) y por otro la opción elegida (el valor del atributo VALUE). En el ejemplo anterior en el que se han seleccionado 'Pop' y 'Ciencia- Ficción' se enviará el siguiente mensaje:
musica=Pop
cine=CienciaFiccion
|
|
En realidad, el mensaje que se envía no es exactamente el anterior, ya que éste es codificado. Aún así las diferencias no son muchas, y en este caso el mensaje, ya codificado, que se enviaría constaría de una única línea: musica=Pop&cine=CienciaFiccion. |
Veamos un resumen de los atributos de este control:
<INPUT TYPE="radio" NAME="Nombre_del_grupo" VALUE="Nombre_de_esta_opción" ALIGN="alineamiento">
|
Cajas de selección
Las cajas de selección guardan ciertos parecidos con los botones de radio, pero además permitirán seleccionar varias opciones en una lista. Al igual que dichos botones tienen dos posiciones, seleccionados o no seleccionados, estando en esta última posición inicialmente, a no ser que hayamos usado el atributo CHECKED. Cada caja de selección es independiente del resto, y por tanto el valor del atributo NAME debe ser diferente en cada una.
Para insertar una caja de selección debemos usar de nuevo la etiqueta INPUT, pero esta vez con TYPE="checkbox". Veamos un ejemplo de uso de este tipo de controles:
Indique su profesión (escoja todas las que procedan):
<FORM>
<P><INPUT TYPE="checkbox" NAME="medico">Médico
<P><INPUT TYPE="checkbox" NAME="programador" CHECKED>Programador
<P><INPUT TYPE="checkbox" NAME="abogado">Abogado
<P><INPUT TYPE="checkbox" NAME="ingeniero">Ingeniero
<CENTER><INPUT TYPE="submit" VALUE="Enviar"></CENTER>
</FORM>
|
Pulsando sobre cada caja de selección se cambia de seleccionado a no seleccionado, independientemente de la posición del resto. En el código podemos apreciar que es posible indicar que una caja de selección esté seleccionada por defecto. En la figura 12.12 vemos este ejemplo, y podemos apreciar como es posible seleccionar varias opciones simultáneamente.
Con las cajas de selección también podemos usar el atributo VALUE, en este caso no será imprescindible, ya que el nombre dado con NAME es diferente en cada caso, pero a veces puede ser conveniente. En el caso de la figura se mandaría al servidor el siguiente mensaje:
programador=ON&ingeniero=ON
|
Si hubiésemos usado el atributo VALUE se sustituiría la palabra ON (que es la que se pone por defecto) por la que nosotros hubiésemos indicado en las cajas de selección con las opciones 'programador' e 'ingeniero'. Por ejemplo si en el código anterior hubiésemos escrito lo siguiente en el código de la caja del ingeniero, dejando el resto igual:
<P><INPUT TYPE="checkbox" NAME="ingeniero" VALUE="SI">Ingeniero
|
El navegador hubiera enviado el mensaje:
programador=SI&ingeniero=ON
|
Todos los atributos de este control quedan resumidos en el siguiente código:
<INPUT TYPE="checkbox" NAME="Nombre" ALIGN="alineamiento" VALUE="valor_que_debe_enviarse">
|
Imágenes
El lenguaje HTML permite una manera alternativa para insertar un botón de envío personalizado, al poder usar en lugar del botón normal que hemos visto anteriormente una imagen creada por nosotros mismos. Para insertar este tipo de control debemos usar TYPE="image", mientras que la dirección de la imagen se indica con el atributo SRC al igual que hacíamos con la etiqueta IMG. Aprovecharemos el ejemplo de este tipo de control para realizar un formulario que englobe lo visto hasta ahora.
Ejemplo 12.1.
Hemos elegido como motivo del formulario un sistema de reserva de habitaciones de un hotel. El usuario deberá introducir ciertos datos y enviar posteriormente la reserva. Comenzamos el formulario creando un archivo nuevo y escribiendo la estructura básica de la página:
<HTML>
<HEAD>
<TITLE>Botón de envío personalizado</TITLE>
</HEAD>
<BODY BGCOLOR="#B6D6B6">
</BODY>
</HTML>
|
A continuación insertamos un encabezado y la etiqueta FORM, donde iremos insertando los distintos controles de los que consta el formulario (todo el código que mostremos de ahora en adelante en este ejemplo debe introducirse entre las instrucciones <BODY ...> y </BODY>):
<CENTER><H2><FONT COLOR="#8080FF">Hoteles El Paraíso</FONT></H2></CENTER>
<H3>Sistema de reserva de habitaciones:</H3>
<FORM>
</FORM>
|
Los colores que hemos elegido ahora para el encabezado como antes para el color de fondo pueden ser cambiados por el lector a su gusto.
Es hora de insertar los controles. En primer lugar debemos introducir un campo para preguntar el nombre. Para ello lo más indicado es usar una caja de texto, elegimos un tamaño de 30 caracteres con el atributo SIZE y no usamos MAXLENGTH para no limitar la longitud del nombre que se pueda insertar. Además introducimos un segundo campo donde debe insertar una clave secreta, que debe elegir el mismo usuario, y que le servirá para identificarse cuando llegue al hotel junto con su nombre. En este caso usaremos una caja de texto para claves. Dado que la clave sólo puede constar de 4 caracteres limitamos el tamaño de la caja (SIZE) y la longitud del texto que se puede escribir (MAXLENGTH) a este valor:
<FORM>
<P>Introduzca su nombre: <INPUT TYPE="text" NAME="nombre" SIZE="30"></P>
<P>Introduzca una clave para su identificación (4 letras): <INPUT TYPE="password" NAME="clave" SIZE="4" MAXLENGTH="4"></P>
<!-- aquí iremos insertando el resto del código -->
</FORM>
|
Veamos lo que llevamos. Visualizando el código que hemos escrito hasta ahora obtenemos el resultado de la figura 12.13.
El siguiente paso será preguntar al usuario qué tipo de habitación desea reservar. Existen dos opciones, una habitación individual o una habitación doble. Para ofrecer estas dos respuestas posibles resultan idóneos los botones de radio, ya que sólo una de las dos pueden ser seleccionadas simultáneamente. Los dos botones que necesitamos deben estar en el mismo grupo, para lo cual usamos NAME="habitación", para diferenciarlas ponemos diferentes valores en el atributo VALUE:
<FORM>
<!-- ... -->
<P>Tipo de habitación</P>
<INPUT TYPE="radio" NAME="tipoHabitacion" VALUE="individual">Individual
<INPUT TYPE="radio" NAME="tipoHabitacion" VALUE="doble" CHECKED>Doble
</FORM>
|
Los espacios   han sido usados para separar ambas opciones, ya que están en la misma línea. La cadena "<!-- ... -->" simplemente hace referencia a que en ese lugar va el código que hemos escrito antes para preguntar el nombre y la clave, aunque no lo repitamos de nuevo. De ahora en adelante lo usaremos para indicar 'aquí va el código escrito anteriormente'.
A continuación los dueños del hotel desean ofertar una serie de extras especiales junto con la habitación, de las cuales pueden elegirse (de manera independiente) las que se deseen. Las cajas de selección serán los controles que debemos usar en este caso.
<FORM>
<!-- ... -->
<P>Opciones extra:</P>
<INPUT TYPE="checkbox" NAME="desayuno" CHECKED>Desayuno en cama
<INPUT TYPE="checkbox" NAME="jakuzzi">Jakuzzi
<INPUT TYPE="checkbox" NAME="climatizador">Climatizador
</FORM>
|
Por petición de los dueños, que quieren promocionar este servicio, hemos preseleccionado el desayuno en cama inicialmente usando el atributo CHECKED.
El último paso será insertar el botón de envío. Podríamos simplemente usar:
<INPUT TYPE="submit" VALUE="Envíeme">
|
Pero en este caso seremos algo más originales y nos crearemos nuestro propio botón. Para ello únicamente necesitaremos un programa de dibujo y algo de creatividad. Una vez dibujado el botón debemos guardarlo en formato GIF o JPG, y lo ponemos en el mismo directorio donde está la página que estamos creando. En nuestro caso hemos llamado a la imagen envio.gif. El código para insertar esta imagen de manera que sirva como botón de envío será:
<FORM>
<!-- ... -->
<CENTER> <INPUT TYPE="image" NAME="envio" SRC="envio.gif">
</CENTER>
</FORM>
|
Con esto que podemos dar por concluido el formulario. En la figura 12.14 podemos apreciar el resultado de visualizar este formulario con el navegador Internet Explorer 4.0. Este es el aspecto inicial, con las opciones 'Doble' y 'Desayuno en cama' preseleccionados al usar el atributo CHECKED.
|
El navegador Explorer permite el uso de los atributos WIDTH y HEIGHT para indicar el tamaño de las imágenes de formularios. También permite usar otros atributos de la etiqueta IMG como VSPACE y HSPACE para controlar los márgenes verticales y horizontales alrededor de la imagen y BORDER para controlar el grosor del borde. |
En este ejemplo hemos usado una imagen creada por nosotros mismos como sustituto del botón de envío estándar. Sin embargo las imágenes de formulario tienen una función extra, ya que el navegador envía, cuando el usuario pulsa una imagen, las coordenadas 'x' e 'y' sobre las que se ha pulsado, en relación a la esquina superior izquierda, como si fueran parte de la información del formulario. De esta forma el servidor Web puede realizar diferentes acciones en función del lugar de la imagen donde se ha pulsado. De hecho este es un método alternativo para crear una imagen mapa. Para ello no tenemos más que usar el código:
<FORM>
<INPUT TYPE="image" SRC="imagenmapa.gif">
</FORM>
|
Posteriormente debemos crear un programa en el servidor que sea capaz de leer los datos (es decir, las coordenadas donde se ha pulsado) de este formulario y devolver la respuesta oportuna. Más sobre esto en la sección 'Como usar los datos de un formulario' que veremos más adelante.
En el capítulo 6 vimos la diferencia entre las imágenes mapa en el servidor y las imágenes mapa en el cliente (las que podíamos crear con el lenguaje HTML). Este nuevo tipo se corresponde con las procesadas con el servidor, y por tanto tiene el inconveniente de necesitar un programa externo que se ejecute en el servidor, por lo que no nos basta con el lenguaje HTML.
Para terminar con las imágenes de formulario veremos, como hemos venido haciendo hasta ahora, un resumen con sus atributos:
<INPUT TYPE="image" SRC="URL" NAME="Nombre">
|
