Una de las mayores ventajas de la web es que resulta interactiva. Los usuarios de una página no tienen más que escribir al autor de la misma para comentarle cualquier cosa de la misma. Sin embargo, si deseamos que nos digan sólo unas cosas concretas (responder a alguna pregunta, seleccionar entre varias opciones, etc..) deberemos utilizar formularios. Por ejemplo,
<FORM ACTION=" " METHOD=POST>
Nombre:<BR><INPUT NAME="nombre" TYPE=TEXT SIZE=32>
<BR>¿Cuántos son dos y dos?<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">3<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien">4<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">5<BR>
<INPUT TYPE="Submit" VALUE="Comprobar">
</FORM>
se verá:
Nombre:
¿Cuantos son dos y dos?
3
4
5
Todos los elementos de un formulario deben estar encerrados entre <FORM>y </FORM>. Como parámetros cabe destacar tres. ACTION define el URL que deberá gestionar el formulario. Puede ser una dirección de correo (precedida del inevitable mailto:, en cuyo caso deberemos añadir el parámetro ENCTYPE="text/plain" para que lo que recibamos resulte legible.
Por otro lado, tenemos el parámetro METHOD define la manera en que se enviará el formulario. Es recomendable utilizar POST.
En el caso de que estemos mandando el formulario a nuestra dirección de correo electrónico es obligado usarlo. Ahora se va a tratar uno a uno todos los elementos que podemos incluir en un formulario. Veremos que todos ellos tienen algo en común. Como el resultado de cualquier formulario es una lista de variables y valores asignados a las mismas, todos ellos tendrán un atributo en común: el nombre de su variable. El parámetro también será común a todos: NAME.
Cajas de texto
Existen tres maneras de conseguir que el usuario introduzca texto en nuestro formulario. Las dos primeras se obtienen por medio de la etiqueta <INPUT>:
|| <INPUT TYPE=TEXT> || ||
|| <INPUT TYPE=PASSWORD> || ||
El primero nos dibujará una caja donde escribir un texto (de una sola línea). El segundo es equivalente, pero no veremos lo que tecleemos en l. Estos son los atributos para modificarlos:
|| Parámetro || Utilidad ||
|| SIZE || Tamaño de la caja de texto. ||
|| MAXLENGTH || Número máximo de caracteres que puede introducir. ||
|| VALUE || Texto por defecto que contendrá la caja. ||
Por otro lado, puede que necesitemos que el usuario pueda introducir más de una línea. En ese caso se utilizará la siguiente etiqueta:
|| <TEXTAREA><br/>Por defecto<br/></TEXTAREA> || Por defecto ||
Lo que incluyamos entre las dos etiquetas será lo que se muestre por defecto dentro de la caja. Admite estos parámetros:
|| Parámetro || Utilidad ||
|| ROWS || Filas que ocupará la caja de texto. ||
|| COLS || Columnas que ocupará la caja de texto. ||
Opciones
Si lo que deseamos es que el usuario decida entre varias opciones podremos hacerlo de dos formas. La primera es la que se vio en el ejemplo inicial:
|| 3<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR> 4<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien"><BR>5<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR> || 3
4
5 ||
Para asociar varios botones de radio a una misma variable les pondremos a todos ellos el mismo NAME. Aparte de esto acepta los siguientes parámetros:
|| Parámetro || Utilidad ||
|| VALUE || Este es el valor que asignará a la variable. ||
|| CHECKED || Si lo indicamos en una de las opciones esta será la que esté activada por defecto. ||
Pero también tenemos una posibilidad que ocupa bastante menos: las listas desplegables. Para emplearlas deberemos utilizar dos etiquetas, SELECTy OPTION:
|| <SELECT NAME="Navegador"> <OPTION>Mozilla <OPTION>Explorer <OPTION>Opera <OPTION>Lynx <OPTION>Otros</SELECT> || MozillaExplorerOperaLynxOtros ||
Los parámetros que admite SELECT son las siguientes:
|| Parámetro || Utilidad ||
|| SIZE || El número de opciones que podremos ver. Si es mayor que 1 veremos una lista de selección y, si no, veremos una lista desplegable. ||
|| MULTIPLE || Si lo indicamos podremos elegir más de una opción. ||
Y OPTION estos:
|| Parámetro || Utilidad ||
|| VALUE || Este es el valor que asignará a la variable. ||
|| SELECTED || Si lo indicamos en una de las opciones esta será la seleccionada por defecto. ||
Botones del formulario
Existen dos: uno que se utiliza para mandar el formulario y otro que sirve para limpiar todo lo que haya rellenado el usuario:
|| <INPUT TYPE=SUBMIT><BR><INPUT TYPE=RESET> ||
||
Podemos cambiar el texto que el navegador pone por defecto en esos botones utilizando el parámetro VALUE.
Otros elementos
Puede que necesitemos que el usuario sencillamente nos confirme o niegue algo. Se consigue por medio de controles de confirmación:
|| <INPUT NAME="Belleza" TYPE=CHECKBOX>Me considero guapo/a || Me considero guapo/a ||
Si queremos que el control está activado por defecto le añadiremos el parámetro CHECKED. El formulario asignará a la variable NAME el valor
on u
off.
Por último, existe la posibilidad de que necesitemos que, en el formulario, tengamos alguna variable con un valor previamente asignados.
Botones
Una de las cosas que más han mejorado son los botones. Ahora disponen de una etiqueta propia, de modo que se pueda encerrar con ella todo tipo de elementos HTML, como gráficos o, incluso, tablas enteras.
Como no podía ser de otra manera, la etiqueta en cuestión se llama BUTTON:
|| <BUTTON TYPE="button"> <table border="1"> <tr><BR/> <th>Soy una</th><BR/> <th>tabla</th> </tr> <tr> <td>que está</td> <td>en un botón</td> </tr> </table> </BUTTON> || || Soy una || tabla || || que está || en un botón || ||
Los parámetros de dicha etiqueta son los normales, TYPE, que podrán tomar los valores SUBMIT (por defecto), RESET y BUTTON,NAME y VALUE.
Por otro lado, ahora podemos declarar un gráfico como un elemento más de entrada. como un nuevo tipo dentro del elemento INPUT:
||
<INPUT TYPE="image" SRC="graficos/nav.gif" alt="Elije navegador"> || ||
Este elemento se comportará de mismo modo que un botón de tipo SUBMIT, pero añadirá como información en el formulario las coordenadas x e y donde el usuario lo pulsó.
Etiquetas
Hasta hora, el texto que acompañaba a los campos de entrada no estaba asociado a los mismos de ninguna manera. Así, por ejemplo, si pulsábamos en el texto que acompañaba a un control de confirmación, no sucedía nada. Ahora, en cambio, si utilizamos la etiqueta LABEL, el control cambiará de estado (sólo disponible a partir de Netscape 5):
|| <LABEL> <INPUT NAME="Belleza" TYPE=CHECKBOX> Me considero guapo/a</LABEL> || Me considero guapo/a ||
Lo bueno que tiene es que se puede usar sin peligro, ya que no afectar a los usuarios de navegadores antiguos.
Agrupación de elementos
Hasta ahora, no disponíamos de ninguna manera de agrupar visualmente varios controles, si no echábamos mano de elementos que no son del formulario, como tablas o imágenes.
Ahora, si encerramos una parte de un formulario dentro de la etiqueta FIELDSET se mostrará un rectángulo alrededor de los mismos. Si además, le indicamos un título por medio de la etiqueta LEGEND nuestros formularios quedarán hechos un verdadero primor:
|| <FIELDSET> <LEGEND>Mi hermoso formulario</LEGEND> <LABEL> Mi texto: <INPUT TYPE="text"> </LABEL></FIELDSET> || Mi hermoso formularioMi texto: ||
Desactivación de elementos
Todos los controles de un formulario se pueden desactivar, impidiendo así al usuario que los utilice. Se seguirán mostrando en pantalla, aunque con un aspecto distinto para indicar su triste estado. Para ello sólo tenemos que indicarle el parámetro DISABLED:
|| <LABEL DISABLED>Texto: <INPUT TYPE=TEXT DISABLED> </LABEL> || Texto: ||
