Formularios.

Anuncio
Formularios.
La habilidad de interactuar con los usuarios es una de las principales características de los ordenadores y
las redes informáticas. La posibilidad de realizar preguntas y recibir respuestas es una de las formas
fundamentales de conseguir esta interactividad y el lenguaje HTML proporciona la habilidad de crear
formularios e insertar cajas de texto, botones de opción y otros controles que nos permitirán aprovechar
esa posibilidad de interactividad en nuestras páginas Web.
Para crear un formulario el lenguaje HTML proporciona la etiqueta FORM.
<HTML>
<HEAD>
<TITLE>Formulario de ejemplo</TITLE>
</HEAD>
<BODY>
<H1>FORMULARIO DE EJEMPLO</H1>
<FORM>
Introduzca su nombre: <INPUT TYPE="Text">
</FORM>
</BODY>
</HTML>
¿Cómo se crea un botón de envío? El lenguaje HTML consta de una etiqueta, INPUT, que permite insertar
varios tipos de controles, entre los que se encuentra el botón de envío. Para indicar el tipo de control que
queremos insertar se usa el atributo TYPE. Para crear el botón de envío debemos usar TYPE="submit".
<H1>FORMULARIO DE EJEMPLO</H1>
<FORM>
<P>Introduzca su nombre: <INPUT TYPE="Text">
<P><INPUT TYPE="Submit">
</FORM>
Controles de Formularios.
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.
Cajas de texto.
<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>
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.
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.
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>
Aviso
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">
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
<P><INPUT
<P><INPUT
<P><INPUT
</FORM>
TYPE="radio"
TYPE="radio"
TYPE="radio"
TYPE="radio"
NAME="musica"
NAME="musica"
NAME="musica"
NAME="musica"
VALUE="Jazz">Jazz
VALUE="Pop">Pop
VALUE="Rock">Rock
VALUE="Country">Country
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>
Aviso
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’.
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.
<CENTER> <INPUT TYPE="image" NAME="envio" SRC="envio.gif">
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.
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:
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>
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>
ACTION PARA ENVIO DE CORREO UTILIZANDO CLIENTE COMO INTERMEDIARIO:
<form action=mailto:[email protected]…></form>
Descargar