2. Controles de Formularios.

2.1. Cajas de texto.

Ya hemos introducido antes las cajas de texto. Como resumen recordaremos que para insertar este tipo de control en una página Web se usa la etiqueta INPUT (esta misma etiqueta será la utilizada para insertar la mayoría de controles), con TYPE="text". Es decir:

	<FORM>
	<INPUT TYPE="text">
	</FORM>
      

Si nuestra intención es insertar más de un control será conveniente darle un nombre a la caja de texto. Para ello usaremos, tal y como hacíamos con el botón de envío, el atributo NAME:

	<FORM>
	<INPUT TYPE="text" NAME="mitexto">
	</FORM>
      

Como podemos apreciar la etiqueta INPUT consta de una única instrucción. Ya hemos visto los atributos TYPE y NAME que existe siempre en la etiqueta INPUT. Cuando insertamos una caja de texto, es decir, cuando ponemos TYPE="text" existen otros dos:

Alineamiento de controles.

Tal y como hemos indicado antes, todos los controles que insertamos con la etiqueta INPUT tienen un atributo, llamado ALIGN, que nos permitirá seleccionar entre varios tipos de alineamiento. Este atributo apareció en el estándar HTML 3.2, al contrario que el resto de etiquetas y atributos que hemos visto hasta ahora en este capítulo, que existen desde la versión anterior del estándar (HTML 2.0).

El atributo ALIGN puede tomar los siguientes valores:

Todos el atributo ALIGN y todos estos valores existen para todos los controles que veamos a partir de ahora y que usen la etiqueta INPUT.

Para terminar con las cajas de texto veamos un resumen de todos sus atributos y sus funciones:

	<INPUT TYPE="text" NAME="nombre" VALUE="valor por defecto" SIZE="tamaño" MAXLENGTH="longitud_máxima" ALIGN="alineamiento">
      

2.2. Cajas de texto para claves.

En ocasiones puede ser conveniente pedir al usuario algún tipo de información confidencial como puede ser una clave de acceso o password. Debemos tener en cuenta que algunos usuarios pueden estar en algún lugar público o, al menos, con gente alrededor que pueden leer lo que escriba en la pantalla y por tanto no le interesará que lo que escribe sea mostrado en ésta. El lenguaje HTML permite utilizar, en estos casos, una caja de texto modificada en la que al escribir se mostrarán únicamente asteriscos. Para ello debemos usar TYPE="password" en la etiqueta INPUT. Un ejemplo típico de uso de password es al pedir una identificación, por ejemplo para entrar en algunas secciones de una página. Para crear este formulario podemos usar el siguiente código:

	<H2><FONT COLOR="#8080FF">Formulario de autenticación</FONT></H2>
	<FORM>
	<P>Introduzca su nombre: <INPUT TYPE="text" NAME="nombre">
	<P>Introduzca su clave: <INPUT TYPE="password" NAME="clave">
	<P><INPUT TYPE="submit" VALUE="Enviar">
	</FORM>
      

Visualizando este código con Explorer obtenemos el resultado de la figura 12.9. En ella vemos como el texto que hemos escrito en el segundo campo, el de la caja de texto para passwords, no ha sido mostrado siendo sustituido por asteriscos.

La caja de texto para claves o passwords simplemente impide que el texto que se escribe sea mostrado en pantalla, sin embargo este texto no es codificado al ser mandado al servidor Web, y por tanto no es seguro mandar datos confidenciales.

Las cajas de texto para claves también tienen los atributos SIZE, MAXLENGTH, VALUE y ALIGN que vimos en las cajas de texto. Al igual que hicimos con estas, veamos un resumen de todos los atributos de las cajas de texto para claves:

	<INPUT TYPE="password" NAME="clave" SIZE="tamaño" MAXLENGTH="longitud_máxima" VALUE="clave por defecto" ALIGN="alineamiento">
      

2.3. 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&oacute;n
	<P><INPUT TYPE="radio" NAME="cine" VALUE="Comedia">Comedia
	<P><INPUT TYPE="radio" NAME="cine" VALUE="CienciaFiccion">Ciencia-Ficci&oacute;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">
      

2.4. 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">
      

2.5. 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 &nbsp;&nbsp;
	<INPUT TYPE="radio" NAME="tipoHabitacion" VALUE="doble" CHECKED>Doble
	
	</FORM>
      

Los espacios &nbsp 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 &nbsp;&nbsp;
	<INPUT TYPE="checkbox" NAME="jakuzzi">Jakuzzi &nbsp;&nbsp;
	<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">
      

2.6. Botón de borrado

La mayoría de los controles anteriores permitían al usuario introducir una serie de datos o elegir entre una serie de opciones. Inicialmente las cajas de texto aparecían vacías, a no ser que hubiésemos usado el atributo VALUE para asignarles por defecto. Igualmente los botones de elección y cajas de selección aparecían en posición de no seleccionados a no ser que hubiésemos indicado lo contrario usando el atributo CHECKED. Una vez a cargado la página con el formulario en blanco o con unas opciones por defecto el navegante puede actuar sobre los controles y modificar sus valores (en esto se basa la interactividad). Pero quizás en algún momento decida que quiere dar marcha atrás y recuperar los datos que aparecieron al principio. Con este fin existe en el lenguaje HTML un control que permite borrar los datos actuales de todos los campos del formulario y restablecer los valores por defecto, si es que los había. Este control recibe el nombre de botón de borrado o botón de reseteado (reset button ). La creación de este control es muy sencilla. De nuevo usaremos la etiqueta INPUT, esta vez con TYPE="reset":

	<INPUT TYPE="reset">

      

Este código provocará la aparición de un botón como el botón de envío con un texto por defecto que indica su función. Por ejemplo Internet Explorer 4.0 muestra el mensaje 'Restablecer'. Este texto dependerá del navegador que usen los visitantes de nuestra página, y dado que esto no siempre es deseable podemos usar el atributo VALUE, al igual que hacíamos con el botón de envío, para especificar el texto que prefiramos. Veamos un ejemplo algo más completo:

	<H2>
	<FONT COLOR="#8080FF">
      	Formulario de identificación
	</FONT>
	</H2>

	<FORM>

	<P>Introduzca su nombre:
	<INPUT TYPE="text"
	  NAME="nombre"
	  VALUE="Introduzca su Nombre"
	  SIZE="30">
	<P>Sexo:
	<INPUT TYPE="RADIO"
	  NAME="sexo"
	  VALUE="hombre"
	  CHECKED>Hombre   
	<INPUT TYPE="RADIO"
	  NAME="sexo"
	  VALUE="mujer">Mujer
	<P>Comentarios:
	<INPUT TYPE="text"
	  NAME="comentarios"
	  SIZE="40">
	<P>
	<INPUT TYPE="submit"
	  VALUE="Enviar">
	<INPUT TYPE="reset"
	  VALUE="Restablecer">
	</FORM>

      

En la figura 12.15 podemos ver este formulario con unos datos introducidos por un usuario (arriba) y tras pulsar el botón de borrado (abajo). Si no hubiésemos puesto unos valores por defecto en nuestro código HTML los datos campos simplemente se hubieran quedado vacíos.

Al igual que hemos hecho con los controles anteriores concluiremos con un resumen del código del botón de borrado. En éste hemos incluido el atributo NAME, que, como comentamos al principio, está presente en todos los controles:

	
	  <INPUT TYPE="reset"
	  NAME="nombre"
	  VALUE="Texto del botón">
	

      

2.7. Botón genérico

Para completar la colección de botones de los formularios, nos encontramos con la posibilidad de insertar un botón genérico, es decir, que no tiene ninguna función definida, sino la que nosotros queramos darle. Para insertar un botón genérico usaremos la etiqueta INPUT con TYPE="button":

	<INPUT TYPE="button"
	  VALUE="Pulseme">

      

Las acciones que debe llevar a cabo este botón al ser pulsado sólo pueden indicarse con lenguajes de script como JavaScript o VBScript y no con HTML estándar. Para insertar el código de estos lenguajes se usa el atributo ONCLICK:

	
	  <INPUT TYPE="button"
	  VALUE="Texto del botón"
	  ONCLICK="código de script">
	

      

No todos los navegadores soportan los lenguajes de script, y por tanto el botón genérico debe ser considerado como una extensión. Si lo usamos debemos ser conscientes que únicamente los navegadores que soporten el script usado podrán hacer uso suyo.

Por ahora no nos adentraremos en ningún lenguaje de script, ya que más adelante en esta obra, éstos serán tratados más en detalle, pero mostraremos dos ejemplos sencillos que ilustran el funcionamiento de este tipo de botones. Estos ejemplos han sido probados con los navegadores Internet Explorer y Netscape Navigator en sus versiones 3.0 y posteriores, pero pueden no funcionar con otros navegadores.

El primero consistirá en un botón cuya función será cerrar una ventana del navegador. El código necesario será:

	<FORM>

	
	  <INPUT TYPE="button"
	  VALUE="Cerrar ventana"
	  onClick="window.close();">
	

	</FORM>

      

Es probable que al pulsar el botón nos aparezca un mensaje de aviso del navegador pidiéndonos confirmación para cerrar la ventana (ver figura 12.16).

El segundo ejemplo es más usado aún y consiste en usar el botón con la misma función que un enlace hipertexto. El resultado es más atractivo, pero debemos usarlo con moderación, ya que no todos los visitantes tendrán navegadores que entiendan este código:

	<FORM>

	
	  <INPUT TYPE="button"
	  VALUE="Cargar otra ventana"
	  onClick="window.location.replace
	  ('button2.html');">
	

	</FORM>

      

En el directorio botones podemos encontrar un archivo con ambos códigos para que el lector pueda probarlos. En la figura 12.16 vemos una muestra de este documento junto con el cuadro de diálogo con el que Internet Explorer 4.0 pide confirmación para cerrar la ventana tras pulsar el botón del primer ejemplo.

El nuevo estándar HTML 4.0 introduce una nueva etiqueta para insertar botones en nuestra página: BUTTON. Esta etiqueta tiene un atributo, llamado TYPE, que nos permitirá elegir entre los tres tipos de botones disponibles: envío (TYPE=submit), borrado (TYPE=reset) o genérico (TYPE=button). La gran innovación de esta etiqueta es que podemos insertar en el botón imágenes o texto formateado con código HTML. Veamos un ejemplo de cómo funcionará BUTTON: <BUTTON name="reset" type="restablecer"> Restablecer<IMG src="pics/imagen.gif" alt=""> </BUTTON> El texto e imagen entre la instrucción de inicio y la de fin se insertarán en el botón.

2.8. Campos ocultos

Los campos ocultos son un tipo de control que únicamente sirve para incluir información adicional entre los datos del formulario. Este tipo de control es invisible, y por tanto el navegador no muestra ningún tipo de gráfico para advertir de su existencia.

¿Para qué sirve entonces un control oculto?. Si no aparece en la página y el navegante no puede hacer nada con él ¿Cuál es su función?. En general, los campos ocultos se usan para enviar información específica al programa del servidor Web que procesará los datos enviados, por ejemplo si este programa es capaz de realizar varias funciones distintas con estos datos, podemos usar un campo oculto para pasarle la información de que debe hacer con los datos de este formulario concreto (debemos tener en cuenta que este mismo programa puede procesar la información de otros formularios también). Aún así esta problemática queda fuerae de lo que pretendemos abarcar en esta sección dedicada al lenguaje HTML.

Los campos ocultos se crean usando la etiqueta INPUT con TYPE="hidden". Además debemos usar los atributos VALUE y NAME, para indicar los datos y su nombre:

	<INPUT TYPE="hidden"
	  NAME="nombre"
	  VALUE="datos">

      

Por ejemplo:

	<INPUT TYPE="hidden"
	  NAME="funcion"
	  VALUE="enviar_mail">

      

2.9. Los formularios vistos desde Lynx

Hasta ahora nos hemos limitado a mostrar como se veían los controles con navegadores gráficos, usando como ejemplo a Microsoft Internet Explorer 4.0. Pero los formularios pertenecen al estándar HTML 2.0 y por tanto funcionan con todo tipo de navegadores, incluidos los que trabajan en modo texto como Lynx. Es interesante para los programadores de páginas Web conocer como son mostrados cada uno de los controles que hemos visto desde este navegador, para hacerse una idea de cómo se verán los formularios que de sus páginas. Dado que no siempre es fácil encontrar un ordenador donde comprobar los resultados con Lynx, mostraremos una serie de capturas en las que hemos usado este navegador y las comentaremos brevemente.

Lo primero que debemos tener en cuenta es que el botón de envío no será gráfico, sino que será similar a un enlace hipertexto, como ya comentamos en su momento. Las cajas de texto y las cajas de texto para claves se muestran con una línea horizontal, y en estas últimas lo escrito es sustituido por asteriscos. En la figura 12.17 vemos un ejemplo, un cursor parpadeante (que no puede apreciarse en una imagen) indica el lugar donde podemos empezar a escribir:

El código usado es el mismo que el de la figura 12.9, en aquel caso el navegador usado para mostrar el resultado fue Internet Explorer, las diferencias son apreciables.

Pero más interesante aún puede ser ver con este navegador nuestro ejemplo 1 de este capítulo (figura 12.14) con Lynx. El resultado que obtenemos puede ser apreciado en la figura 12.18 donde vemos que este navegador también puede mostrar botones de radio y cajas de selección.

En este caso es también interesante ver que la imagen que usábamos como botón de envío ha sido sustituido por el texto ' [IMAGE]-Submit', pero sigue funcionando.

2.10. Innovaciones de Microsoft

La compañía Microsoft en sus navegadores Internet Explorer 3.0 y posteriores ha incorporado una serie de extensiones a la etiqueta INPUT para incrementar las posibilidades de los programadores de HTML. Estas extensiones afectan a todos los controles que hemos visto que hacen uso de esta etiqueta.

La primera extensión resultará conocida a los lectores, se trata del atributo TITLE, y su función será mostrar un bocadillo explicativo cuando el usuario pase el cursor por encima del control. Veamos un ejemplo:

	<FORM>

	<P>Introduzca su nombre:
	
	  <INPUT TYPE="text"
	  NAME="nombre"
	  TITLE="Introduzca aquí su Nombre"
	  SIZE="30">
	

        </FORM>

      

Como podemos ver en la figura 12.19, cuando se mantiene el cursor un tiempo aparece un bocadillo con fondo amarillo (estándar de Windows) con el texto 'Introduzca aquí su nombre ':

Este atributo puede usarse con entera libertad, a pesar de tratarse de una extensión, porque los usuarios de Internet Explorer podrán beneficiarse de ella y los usuarios de navegadores que no lo entiendan no saldrán perjudicados, simplemente se quedarán igual que si no lo hubiésemos usado.

La segunda extensión está formada por dos atributos: TABINDEX y NOTAB. Cuando nos encontramos ante un formulario formado por varios controles, como el del ejemplo 1 (figura 12.14), se puede usar la tecla tabulador o TAB para pasar de uno a otro. Por defecto al pulsar esta tecla se pasa al siguiente control en el orden en que fueron insertados en el código HTML. El atributo TABINDEX nos permitirá cambiar el orden. La forma de usarlo consiste en incluirlo en todos y cada uno de los controles asignándole un número, este número representará la posición de ese control. El atributo NOTAB, por su parte indicará que este control está fuera de la lista, y por lo general será situado el último de todos. Para entender ambos atributos mejor es necesario verlo con un ejemplo, para ello usaremos parte del código del ejemplo 1:

	<FORM>

	<P>1) Introduzca su nombre:
	<INPUT TYPE="text"
	  NAME="nombre"
	  TABINDEX="1">
	<P>3) Introduzca una clave para su
	identificación (4 letras):
	<INPUT TYPE="password"
	  NAME="clave"
	  TABINDEX="3">
	<P>4) Dirección
	<INPUT TYPE="text"
	  NAME="direccion"
	  NOTAB>
	<P>
	2) Tipo de habitación
	</P>
	<INPUT TYPE="Radio"
	  NAME="tipoHabitacion"
	  VALUE="individual"
	  TABINDEX="2">
	Individual  
	<INPUT TYPE="Radio"
	  NAME="tipoHabitacion"
	  VALUE="doble"
	  CHECKED
	  TABINDEX="2">
	Doble

	</FORM>

      

Tras introducir el nombre, cuando el usuario pulse el tabulador pasará a elegir el tipo de habitación, después introducirá la clave y por último la dirección. En el directorio ejem2 hemos incluido este ejemplo para que el lector pueda probarlo y compruebe el funcionamiento de los atributos TABINDEX y NOTAB. Debemos recordar que únicamente funcionarán con Internet Explorer 3.0 o posterior.

La última innovación que ha introducido Microsoft son los atributos READONLY y DISABLED. Estos atributos funcionan exclusivamente con Internet Explorer 4.0 (y posteriores), por lo que debemos tener cuidado al usarlos.

Cuando usamos el atributo DISABLED en un control lo deshabitamos. En general este atributo únicamente es usado con cajas de texto. Cuando una caja de texto usa este atributo podrá seguir mostrando texto (si usamos el atributo VALUE para poner un texto inicial), pero el usuario no podrá cambiarlo. Este control tampoco podrá ser seleccionado, prácticamente actúa como si no estuviera. La función del atributo READONLY es muy similar, con la única diferencia de que el control actúa como tal, por ejemplo en una caja de texto podemos seleccionar con el ratón el texto que hay en ella, pero tampoco podrá modificarse el contenido.

Aunque en la documentación ofrecida por Microsoft no aparece así, el atributo READONLY sólo funciona correctamente en las cajas de texto, pero no en los botones de elección o en las cajas de selección. Quizá sea un fallo que se solucione en próximas versiones, pero hoy por hoy, para deshabilitar estos dos últimos controles, debemos usar el atributo DISABLED.

Veamos unos ejemplos con cajas de texto y botones de selección:

	<H2>
	Cajas de texto
	</H2>
	Normal:
	<INPUT TYPE="text"
	  NAME="texto1"
	  VALUE="Texto inicial">
	<BR>
	DISABLED:
	<INPUT TYPE="text"
	  NAME="texto2"
	  VALUE="Texto inicial"
	  DISABLED>
	<BR>
	READONLY:
	<INPUT TYPE="text"
	  NAME="texto2"
	  VALUE="Texto inicial"
	  READONLY>
	<BR>
	<H2>
	Botones de elección
	</H2>
	Normal:
	<INPUT TYPE="radio"
	  NAME="boton"
	  CHECKED>
	<BR>
	DISABLED:
	<INPUT TYPE="radio"
	  NAME="boton"
	  DISABLED>
	<BR>
	READONLY:
	<INPUT TYPE="radio"
	  NAME="boton"
	  READONLY>
	<BR>

      

En la figura 12.20 podemos ver el resultado de visualizar este código con Internet Explorer 4.0.

En los casos de la caja de texto y el botón de elección se observa claramente que el navegador le da una apariencia distinta para resaltar que está deshabilitado. En el directorio disabled se ha incluido este ejemplo añadiendo también las cajas de selección para que el lector pueda probarlos.