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:

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:

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:

SIZE:

Determina la anchura de la caja de texto. El valor por defecto de este atributo es 20 caracteres, esta es la longitud de los ejemplos que veíamos en las figuras 12.3 a 12.6. En ocasiones convendrá decrementar o incrementar este valor por defecto, pero en todo caso siempre será conveniente mantener un valor menor de 50 caracteres de manera que la caja de texto quepa en la mayoría de pantallas. Un problema adicional que dificulta una correcta elección del tamaño de la caja es que este tamaño será considerado de distinta forma por los distintos navegadores y más aún si estos son de distintos sistemas operativos. En la figura 12.7 podemos ver una serie de cajas de texto de diferentes tamaños y las diferencias entre Internet Explorer y Netscape Navigator al mostrar el mismo código.

Figura 12.7. El atributo SIZE nos permite variar la longitud de la caja de texto. Debemos tener en cuenta que en diferentes navegadores un mismo valor no se corresponde a una misma longitud.

MAXLENGTH:

Con este atributo limitamos el número máximo de caracteres que pueden ser escritos en una caja de texto. El valor de este atributo puede ser mayor o menor que el especificado en SIZE, y que es totalmente independiente. Si es mayor cuando lleguemos al final de la caja de texto los nuevos caracteres que insertemos irán desplazando hacia la izquierda a los primeros, que dejarán de estar a la vista (OJO, esto no quiere decir que sean borrados). Para entender el funcionamiento es mejor comprobarlo in situ con unos ejemplos. Recomendamos al lector que pruebe a visualizar los siguientes códigos, y que intente escribir una frase algo larga en cada uno de ellos:

Por último queda decir que si no usamos el atributo MAXLENGTH el número de caracteres que pueden introducirse en la caja de texto no tendrá límite.

VALUE:

Sirve para especificar un texto que debe aparecer por defecto en la caja de texto, antes de que el usuario escriba nada. Este texto suele ser, en general, o bien instrucciones o bien la respuesta más probable. Veamos un ejemplo que ilustra estos dos casos:

Invitamos al lector a que pruebe este ejemplo en su navegador y compruebe los resultados.

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:

ALIGN=»top»:

Alinea verticalmente el control con la parte superior de la línea en que es insertado.

ALIGN=»bottom»:

Alinea verticalmente el control con la parte inferior de la línea.

ALIGN=»middle»:

Sitúa el control a una altura media entre el resto de elementos de la línea.

ALIGN=»left»:

En este caso estamos alineando el control horizontalmente a la izquierda. Al contrario de lo que ocurría con las imágenes y con las tablas, el texto no bordeará el control por su derecha, situándose éste en una línea propia. En la figura 12.8 podemos ver un ejemplo de este tipo de alineamiento y del siguiente:

Figura 12.8. El atributo ALIGN de la etiqueta INPUT nos permite alinear los controles. En este caso vemos una caja de texto alineada a la izquierda (ALIGN=»left»).

ALIGN=»right»:

Este valor es idéntico al anterior en funcionamiento, sólo que ahora el control se situará a la derecha de la ventana del navegador.

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:

Fuente: Copyright Jorge Ferrer, Rodrigo Garcia y Victor García, licencia Documentación Libre GNU, Versión 1.1