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:
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>):
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:
Veamos lo que llevamos. Visualizando el código que hemos escrito hasta ahora obtenemos el resultado de la figura 12.13.
Este es el aspecto que tiene el código que hemos escrito hasta ahora. En el formulario de la clave sólo se podrán insertar 4 caracteres.
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:
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.
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:
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á:
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.
Figura 12.14. Este es el resultado final del formulario del ejercicio 12.1 en el que destaca el uso de una imagen personalizada como botón de envío.
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:
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:
Fuente: Copyright Jorge Ferrer, Rodrigo Garcia y Victor García, licencia Documentación Libre GNU, Versión 1.1
