¿COMO SE HACE UNA PAGINA WEB?

LECCION 8
COMO PUEDO PONER UN FORMULARIO EN MI PAGINA?


LECCION 8:    ¿Cómo puedo poner un formulatio en mi página?

¡¡¡ NECESARIO SABER HTML !!!

          Muchas páginas necesitan tener una relación mas directa con las personas que las visitan y para ello se hace necesario el uso de formularios o 'FORMAS'.

           Las FORMAS no son mas que campos en donde pedimos que el visitante ponga los datos que nos interesan, por ejemplo: el nombre, correo electrónico, dirección postal, fecha de nacimiento, etc. etc. Pero debido a que en una página WEB no queda grabada la información que los usuarios escriben, debemos recurrir a nuestro correo electrónico para recibir la información que los usuarios nos llenan en las FORMAS.

          Ahora bien, para que esto funcione necesitamos tener un programa que se llama "FORM MAIL" el cual está hecho en lenguaje CGI (no todos los servidores dan acceso a programas CGI, pregunte con el administrador del servidor en donde usted tiene puesta su página si ellos tienen este programa disponible). Además, deberemos aprender algunos comandos de HTML.

          Un ejemplo de una forma en donde pidamos el nombre y el correo electrónico sería:

<FORM METHOD="Post" ACTION="http://www.ejemplo.com/cgi-bin/formmail">
      < INPUT TYPE="hidden" NAME="recipient" value="su dirección email va aquí!">
     < INPUT TYPE="hidden" NAME="subject" value="ASUNTO que ud. recibirá">
     < INPUT TYPE="hidden" NAME="redirect" value=" URL a donde va a regresar">
     Ingrese su Nombre:
     < INPUT TYPE="text" NAME="nombre" size="30" maxlength="40">
     Ingrese su E-mail:
     < INPUT TYPE="text" NAME="email" size="30" maxlength="40">
     < INPUT TYPE="submit" VALUE="ENVIAR">
     < INPUT TYPE="reset" VALUE="BORRAR">
</FORM>

          Lo anterior se vería de esta forma (no oprima enviar ya que esta forma no está funcionando):


Nombre:
E-mail:   

          Cada una de las líneas HTML anteriores se debe de entender de la siguiente manera:

          <FORM METHOD="Post" ACTION="http://www.ejemplo.com/cgi-bin/formmail">
          
Aquí estamos definiendo que vamos a utilizar una FORMA, el METODO a utlizar es POST, y la ACCION que vamos a ejecutar es un programa FormMail que se encuentra en la dirección: http://www.ejemplo.com/cgi-bin/formmail (este es un programa verdadero de FormMail, si su proveedor de espacio no le da el programa CGI para FORMAS, puede utilizar este).

          <INPUT TYPE="hidden" NAME="recipient" value=" su dirección email va aquí!">
          
En esta línea le estamos indicando al programa CGI anterior cual es la dirección de correo en donde deseamos recibir la información que el usuario está llenando. Cuando se declara HIDDEN la información quiere decir que el usuario no va a ver esta línea en nuestra página WEB.

         <INPUT TYPE="hidden" NAME="subject" value=" subject que ud. recibirá">
          Como es un correo el que vamos a recibir desde nuestra página, deberemos indicarle al programa CGI que nos envie el ASUNTO o SUBJECT del correo. Aquí usted puede escribir cualquier cosa, por ejemplo "Datos enviados desde mi página..." y el nombre de la página. Esto se hace por aquello de que tengamos varias páginas desde donde vamos a recibir información, sepamos de cual de ellas vienen los datos.

         <INPUT TYPE="hidden" NAME="redirect" value=" URL a donde va a regresar">
          Aquí le estamos indicando al programa CGI que al terminar de recibir la información, lleve al usuario a una página WEB. Por lo general se envia al usuario a una página de agradecimiento por haber llenado la FORMA.

         <INPUT TYPE="text" NAME="nombre" size="30" maxlength="40">
         
En esta instrucción estamos diciendo al programa CGI que tenemos una variable que se llama NOMBRE, la cual tiene un largo de 30 caracteres visibles y un máximo de 40. Si nos fijamos la siguiente línea HTML lo único que cambia es el nombre de la variable que se llama "email". Esto nos indica que podemos poner tantas variables como querramos, los largos visibles y máximos pueden ser cualquier tamaño. Al declarar a estas variables como tipo "TEXT" lo estamos dejando abierto para que el usuario pueda escribir cualquier cosa.

         <INPUT TYPE="submit" VALUE="ENVIAR">
         Este comando sirve para enviar toda la información que se acaba de llenar al programa CGI y este a su vez nos lo enviará a la dirección de correo que se definió anteriormente.

         <INPUT TYPE="reset" VALUE="BORRAR">
         Este comando nos permite borrar toda la FORMA y poder volver a meter la información nuevamente.

         </FORM>
         Esto le indicará al código HTML que nuestra definición de la FORMA ya terminó. Este comando es muy importante ya que si no lo agregamos nuestra página contendrá errores.

         Como ve, el crear FORMAS no es tan difícil. Lo único es tener un poco de experiencia con código HTML para saber donde poner esta información.

         Si desea ver ejemplos de una FORMA vaya a las siguientes direcciones:

EJEMPLO DE FORMAS #1
EJEMPLO DE FORMAS #2


¿Tiene alguna pregunta?

FORO LECCIONES WEB



Sergio Cabrera
30 / junio / 2004

Visite las páginas creadas con nuestras lecciones:

(haga CLICK en la imagen)