Todos los controles que pueden usarse a la hora de crear un formulario permitirán al navegante insertar información. Unas veces esta información consistirá en la inserción de un texto, que podrá ser de una sola línea o varias y que podrá estar oculto o no. En otras ocasiones se ofrecerá entre una serie de opciones entre las que simplemente hay que elegir una o varias. Todo ello se podrá realizar de diferentes formas que ahora mismo comenzamos a estudiar.
Para empezar vamos a ver una serie de controles todos los cuales se crean con la etiqueta INPUT. Para diferenciar entre unos controles y otros se hará uso del atributo TYPE que puede tomar los siguientes valores: text, password, radio, checkbox, submit, image, reset, file y hidden. Además del atributo TYPE, esta etiqueta consta de algunos más cuya función variará del tipo de control estemos insertando, es decir, en función del valor del atributo TYPE. Uno común a todos es NAME, ya mencionado, con el que damos un nombre al control, y que es recomendable usarlo siempre. Otro también común a todos será ALIGN, que explicaremos con las cajas de texto.
Una vez hecho este comentario, podemos empezar a estudiar cada uno de los tipos de control uno a uno.
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:
- 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.
- 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:
<INPUT TYPE="text" SIZE="20" MAXLENGTH="20">
<INPUT TYPE="text" SIZE="20" MAXLENGTH="5">
<INPUT TYPE="text" SIZE="20" MAXLENGTH="40">
|
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:
<FORM>
<P>Nombre:<INPUT TYPE="text" VALUE="Introduzca aquí su nombre">
<P>¿Le gusta nuestro Web? <INPUT TYPE="text" VALUE="Si, muchísimo">
</FORM>
|
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:
- 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:
<INPUT TYPE="text" NAME="nombre" VALUE="valor por defecto" SIZE="tamaño" MAXLENGTH="longitud_máxima" ALIGN="alineamiento">
|
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"> |
