El botón básico para la creación de un formulario es "NewForm". Al pulsar sobre él obtendrás el siguiente código:

<FORM ACTION= "http://YourCGIScript" METHOD= "POST" >

</FORM>

Como verás, la etiqueta principal de los formularios se llama "FORM" y tiene tanto su apertura como su cierre. Es muy importante que TODO el formulario que vas a crear quede dentro de este par de etiquetas.

La etiqueta FORM tiene dos atributos, siendo ACTION el primero de ellos. ACTION indica dónde se encuentra (en forma de URL) el programa que va a procesar los datos del formulario (¡Sí!, ¡hace falta un programa para procesar esto!). Luego hablaremos de este asunto con más detalle.

Por su parte, METHOD se refiere a uno de los dos métodos para la transmisión de información. Aparte de "POST" existe "GET", pero el primero es con mucho el más utilizado y por lo pronto lo dejaremos tal cual está.

Para incluir los elementos o "campos" del formulario, utilizaremos las facilidades de la barra de herramientas. Primero utilizaremos "InText":

Esta es una caja de texto y sirve para introducir todo tipo de datos genéricos. El código correspondiente es:

<INPUT TYPE= "text" NAME= "var name" SIZE= "40" MAXLENGTH= "80" VALUE= "default value" >

Podemos ver que el tipo (TYPE) es "text" (texto), el tamaño (SIZE) de la caja es de 40 caracteres, pero caben en total 80 caracteres (MAXLENGTH). El valor por defecto (VALUE) es "default value".

Pero esto es muy genérico. Vamos a adecuarla para que le pida al usuario su dirección electrónica. Para ello, escribiremos E-MAIL: en texto simple antes de la etiqueta, reduciremos el tamaño de la caja a 20 caracteres y el largo total a 35, y colocaremos algo significativo en VALUE.

Adicionalmente, esta caja retornará una VARIABLE, y la misma debe tener un nombre (NAME) único y significativo. A esta caja la llamaremos email-del-visitante. El resultado final está abajo y anexo el código ya modificado:

E-MAIL: <INPUT TYPE= "text" NAME= "email-del-visitante" SIZE= "20" MAXLENGTH= "35" VALUE= "(coloca aquí tu email)" >

Le toca el turno ahora al botón InRadio. Con el mismo creamos "radio buttons" o "botones de radio", que se aplican a variables en donde solamente tiene sentido elegir una de las opciones disponibles. Pulsaré InRadio tres veces para crear tres opciones para la variable "sexo-visitante". Luego de agregar texto orientativo, el resultado y el código serán los siguientes:

SEXO: <BR>
<INPUT TYPE= "radio" NAME= "sexo-visitante" VALUE= "masculino" CHECKED > Masculino <BR>
<INPUT TYPE= "radio" NAME= "sexo-visitante" VALUE= "femenino" > Femenino <BR>
<INPUT TYPE= "radio" NAME= "sexo-visitante" VALUE= "otro" > Otro <BR>

Lo primero que tienes que notar es que las tres etiquetas tipo "radio" tienen el mismo nombre de variable pero diferentes valores, uno por cada una de las opciones. Adicionalmente, la palabra clave CHECKED preselecciona una de las opciones, si lo deseas.

El botón "InCheck" funciona prácticamente igual, pero se utiliza cuando sí tiene sentido escoger varias opciones al mismo tiempo. Por ejemplo:

PELÍCULAS QUE TE GUSTAN: <BR>
<INPUT TYPE= "checkbox" NAME= "tipo-pelicula" VALUE= "accion" > Acción <BR>
<INPUT TYPE= "checkbox" NAME= "tipo-pelicula" VALUE= "romance" CHECKED > Romance <BR>
<INPUT TYPE= "checkbox" NAME= "tipo-pelicula" VALUE= "comedia" > Comedia <BR>

Como podrás notar, en este caso también se cumple que cada opción tiene un valor diferente (accion, romance, comedia), pero todas poseen el mismo nombre de variable, cosa que es sumamente importante. Adicionalmente, aquí también se puede preseleccionar una opción mediante la palabra "CHECKED".

Hay muchas otras opciones que puedes agregarle a tu formulario...

Atrás	Inicio	Próxima