Curso completo de HTML - Otros controles

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:

• NAME: El nombre que queremos asignarle al control. Como siempre, este nombre será enviado junto con los datos del área de texto al mandar el formulario.

• ROWS: El número de líneas de la caja de texto.

• COLS: El número de caracteres visibles de cada línea. Este atributo es similar al atributo SIZE que vimos en las cajas de texto convencionales.

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:

Y en la figura 12.22 el mismo visto con Lynx:

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:

• WRAP=OFF: Es el valor por defecto en Netscape Navigator y provocará que el texto sea mostrado en una sola línea, desplazándose hacia la izquierda si es necesario, hasta que el usuario pulse ENTER.

• WRAP=SOFT: Este es el valor por defecto en Internet Explorer y provoca que el navegador pase automáticamente a la siguiente línea cuando se llega al final del área reservada. Sin embargo cuando se pulsa el botón de envío, antes de mandar el contenido, el propio navegador vuelve a juntar todo el texto que fue escrito seguido en una sola línea.

• WRAP=HARD: Al igual que el valor anterior, éste provoca que el navegador pase automáticamente a la siguiente línea, pero ahora la información se mandará al servidor Web con los saltos de línea, de la misma manera que si hubiésemos pulsado ENTER nosotros mismos al llegar al final de cada línea.

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.

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>
 
       

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.

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:

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:

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

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>