3. OTROS CONTROLES

En esta sección hemos incluido dos controles ligeramente diferentes a los que hemos visto hasta ahora, las cajas de texto multilínea y los cuadros de selección. Ambos tienen sus propias etiquetas de HTML, y por tanto no usarán INPUT.

3.1. Cajas de texto multilínea: TEXTAREA

Las cajas de texto multilínea o áreas de texto son unos campos que funcionan de manera similar a un editor de texto muy sencillo en el que el usuario puede escribir. Al contrario de lo que sucedía con las cajas de texto convencionales (<INPUT TYPE="text">), en esta ocasión será posible escribir varias líneas de texto, lo que es muy útil para campos en los que se requiere una respuesta extensa. Por ejemplo, si deseamos que el usuario pueda escribir el texto de un mail , o escribir una serie de comentarios largos, las áreas de texto serán tremendamente útiles.

La etiqueta usada para insertar este nuevo control es TEXTAREA, que consta de cuatro atributos:

La etiqueta TEXTAREA está compuesta por una instrucción de inicio y una instrucción de fin, siendo obligatorio el uso de ambas. Entre ellas únicamente podrá insertarse texto llano (sin ninguna etiqueta HTML) y éste será mostrado como contenido inicial del área de texto. Veamos un ejemplo:

	Por favor haga sus comentarios sobre esta página.

	<FORM>

	<TEXTAREA NAME="texto"
	  ROWS="10"
	  COLS="50">
	Es la mejor que he visto nunca.
	</TEXTAREA>

	</FORM>

      

En la figura 12.21 podemos ver este código tal y como es mostrado por Internet Explorer 4.0:

Figura 12.21. Las áreas de texto (<TEXTAREA> </TEXTAREA>) permiten al usuario introducir texto de varias líneas como si de un sencillo editor de texto se tratara.

Y en la figura 12.22 el mismo visto con Lynx:

Figura 12.22. Lynx muestra las áreas de texto como un conjunto de líneas (tantas como hemos indicado con el atributo COLS) sobre las que el usuario podrá escribir.

Pulsando sobre el área de texto podremos empezar a escribir, al igual que hacíamos en las cajas de texto, pero con la diferencia de que ahora podremos pulsar ENTER cuando queramos para cambiar de línea.

Si no pulsamos ENTER y llegamos al final de la línea el navegador debe decidir que hacer. Esta decisión variará, por lo general, del navegador que estemos usando. Algunos, como Internet Explorer 4.0, cambian automáticamente a la siguiente línea (text wrapping), otros simplemente desplazarán el texto como ocurría con las cajas de texto y no cambiará de línea hasta que pulsemos ENTER y una minoría simplemente ignorará lo que pulsemos hasta que cambiemos de línea pulsando esta misma tecla.

El navegador Netscape introdujo una extensión al lenguaje HTML estándar, que actualmente es soportada también por Internet Explorer , y que nos permitirá tener un mayor control sobre la forma de actuar del navegador cuando se llegue al final de la línea. Esta extensión se basa en un nuevo atributo, WRAP , que puede tomar los siguientes valores:

En la figura 12.23 vemos una página con los tres tipos de área de texto que hemos incluido en el directorio textarea para que el lector pueda probarlos. La diferencia entre los dos últimos tipos no es apreciable por el usuario, pero si existen diferencias en el mensaje que se envía al servidor.

Nota

La etiqueta TEXTAREA también admite el atributo ALIGN y las extensiones introducidas por Microsoft que hemos visto anteriormente. Nos referimos a los atributos DISABLED, READONLY, TABINDEX, NOTAB y TITLE.

Concluiremos las áreas de texto con un resumen de la etiqueta TEXTAREA y sus atributos:

	
	  <TEXTAREA NAME="nombre"
	  ROWS="filas"
	  COLS="columnas"
	  ALIGN="alineamiento"
	  WRAP="off | soft | hard">
	
	Texto inicial
	</TEXTAREA>

      

3.2. Cuadros de selección

Éste es el último control para crear formularios que nos ofrece el lenguaje HTML. Su función será dar a elegir entre una serie de opciones de manera que el usuario pueda elegir una o varias de ellas. Existen dos formas de mostrar estas opciones, como una lista con desplazamiento, o mediante una persiana desplegable. Enseguida veremos cómo es cada una y cómo crearlas.

Para insertar un cuadro de selección usaremos la etiqueta SELECT, que consta de una instrucción de inicio y de una instrucción de fin, entre las cuales introduciremos las diferentes opciones para el usuario. Para insertar estas opciones usaremos una nueva etiqueta, OPTION, que consta de una única instrucción. Veamos un ejemplo que ilustra el uso de uso de este tipo de control:

	<FORM>

	Elija un color:<BR>
	<CENTER>
	<SELECT NAME="color">
        <OPTION>Verde
	<OPTION>Negro
	<OPTION>Rojo
	<OPTION>Azul
	</SELECT>
	</CENTER>
	
	  <INPUT TYPE="submit"
	  VALUE="Enviar elección">
	

	</FORM>

      

Cuando se pulse el botón 'Enviar elección' se mandará al servidor el texto que sigue a la etiqueta OPTION, que se haya escogido (Por ejemplo 'color=Rojo').

Como podemos ver en la figura 12.24, este control suele ser mostrado, en los navegadores gráficos, como una persiana desplegable, es decir, únicamente la opción actualmente seleccionada es visible, y pulsando sobre una flecha se muestran el resto de opciones.

Figura 12.24. Los cuadros de selección permiten mostrar varias opciones para que el usuario pueda elegir. En esta ocasión vemos su forma de persiana desplegable.

Existe un atributo, SELECTED, que nos permitirá elegir la opción que debe estar seleccionada por defecto. Por ejemplo, si en el código anterior queremos que el color negro aparezca seleccionado inicialmente tendremos que escribir:

	<SELECT NAME="color">
	<OPTION>Verde
	<OPTION SELECTED>Negro
	<OPTION>Rojo
	<OPTION>Azul
	</SELECT>

      

Al principio hemos comentado que los cuadros de selección pueden mostrarse como persianas desplegables, o bien como listas con desplazamiento. Hasta ahora sólo hemos visto el primer caso en el que únicamente la opción seleccionada es visible. En ocasiones puede ser conveniente que todas, o al menos algunas de las posibilidades sean mostradas directamente, sin tener que pulsar un botón. Para conseguir esto el lenguaje HTML ofrece el atributo SIZE, que determina el número de opciones que pueden ser vistas simultáneamente. Si este valor es 1 (o no se usa el atributo SIZE), se mostrará una persiana desplegable, como hemos visto hasta ahora. Si es mayor, se mostrará una lista, que podrá tener barras de desplazamiento si no caben todas las opciones disponibles. Veamos un ejemplo:

	<FORM>

	Lista de la compra:<BR>
	<CENTER>
	<SELECT NAME="compra"
	  SIZE="6">
	
	  <OPTION VALUE="Fruta">
	Fruta
	
	  <OPTION VALUE="Verdura">
	Verdura
	
	  <OPTION VALUE="Ternera">
	Ternera
	
	  <OPTION VALUE="Mantequilla">
	Mantequilla
	
	  <OPTION VALUE="Salchichas">
	Salchichas
	
	  <OPTION VALUE="Pasta">
	Pasta
	</SELECT>
	</CENTER>
	<P>
	
	  <INPUT TYPE="submit"
	  VALUE="Enviar lista de la compra">
	

	</FORM>

      

En la figura 12.25 vemos este ejemplo:

Figura 12.25. Usando el atributo SIZE con un valor mayor que uno conseguimos que el cuadro de selección se muestre como una lista.

En este caso el número de opciones es igual al tamaño que le hemos dado al control, por lo que no han sido necesarias barras de desplazamiento.

Si no indicamos lo contrario, los cuadros de selección actúan como los botones de radio, es decir, sola una opción puede ser elegida simultáneamente. Afortunadamente, es posible cambiar este comportamiento, y permitir la selección de varias opciones, usando el atributo MULTIPLE en el interior de la etiqueta SELECT. En el ejemplo de la lista de la compra esta posibilidad es de gran utilidad, añadiendo este atributo al código anterior queda:

	<FORM>

	Lista de la compra:<BR>
	<CENTER>
	<SELECT NAME="compra"
	  SIZE="6"
	  MULTIPLE>
	
	  <OPTION VALUE="Fruta">
	Fruta
	
	  <OPTION VALUE="Verdura">
	Verdura
	
	  <OPTION VALUE="Ternera">
	Ternera
	
	  <OPTION VALUE="Mantequilla">
	Mantequilla
	
	  <OPTION VALUE="Salchichas">
	Salchichas
	
	  <OPTION VALUE="Pasta">
	Pasta
	</SELECT>
	</CENTER>
	NOTA (usuarios de Windows): Para seleccionar varias opciones
	mantengan pulsada la tecla <CODE>Control
	</CODE> y selecciónenlas con el ratón.
	<P>
	
	  <INPUT TYPE="submit"
	  VALUE="Enviar lista de la compra">
	

	</FORM>

      

La forma de seleccionar varias opciones simultáneamente dependerá del navegador que usemos. En general consistirá en mantener apretada una tecla mientras se seleccionan las diferentes opciones con el ratón. Para facilitar la tarea de los navegantes puede ser conveniente añadir a la página una nota explicativa sobre la manera de elegir varias opciones, tal y como hemos hecho en este ejemplo. En la figura 12.26 podemos ver como es mostrado Internet Explorer 4.0:

Figura 12.26. Usando el atributo MULTIPLE el usuario podrá seleccionar varias de las opciones que se ofrecen en la lista.

Y en la figura 12.27 el mismo código, esta vez visto desde Lynx:

Figura 12.27. El navegador Lynx también es capaz de mostrar cuadros de selección, por lo que podremos usarlo con libertad.

Nota

La etiqueta SELECT también consta del atributo ALIGN para elegir su alineamiento. En lo que a extensiones se refiere, también podemos usar el atributo DISABLED en la etiqueta SELECT para desabilitarla, aunque solo funcionará con Internet Explorer 4.0. Igualmente podemos usar el atributo TITLE tanto en SELECT como en OPTION para incluir una descripción que será mostrada en un bocadillo cuando el usuario sitúe el ratón sobre el control, en el primer caso, o sobre la opción específica, en el segundo.

Para concluir con los cuadros de selección sólo nos resta hacer un breve resumen de las etiquetas SELECT y OPTION, y de sus atributos:

	<SELECT NAME="nombre"
	  SIZE="nº_elementos_visibles"
	  MULTIPLE
	  ALIGN="alineamiento"
	  TITLE="texto_bocadillo"
	  TABINDEX="n"
	  DISABLED>
	
	  <OPTION SELECTED
	  VALUE="nombre de esta opción"
	  TITLE="texto_bocadillo">
	
	...
	</SELECT>