Curso de creación de sitios web - Lección 6 - Página 5

Formulario de ejemplo

Tal y como planteamos en la página anterior, veamos un formulario de ejemplo para pedir información acerca de libros.

Este es el código que hemos utilizado para generar el formulario anterior:

<form name="form1" method="post" action=""><br> <table width="75%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolordark="white" bordercolorlight="#CCCCCC"><br> <tr><br> <td width="25%"><b>Nombre</b></td><br> <td width="75%"><b><br> <input name="Nombre" type="text" id="Nombre"<br> size="40"><br> </b></td><br> </tr><br> <tr><br> <td><b>Apellidos</b></td><br> <td><b><br> <input name="Apellidos" type="text" id="Apellidos"<br> size="40" ><br> </b></td><br> </tr><br> <tr><br> <td><b>Edad</b></td><br> <td><b><br> <input name="Edad" type="text" id="Edad"<br> size="7" ><br> </b></td><br> </tr><br> <tr><br> <td><b>Pa&iacute;s</b></td><br> <td><b><br> <input name="País" type="text" id="País"<br> size="30" ><br> </b></td><br> </tr><br> <tr><br> <td><b>E-mail</b></td><br> <td><b><br> <input name="E-mail" type="text" id="E-mail"<br> size="40" ><br> </b></td><br> </tr><br> <tr><br> <td>&nbsp;</td><br> <td><b> &nbsp;</b></td><br> </tr><br> <tr><br> <td><b>T&iacute;tulo</b></td><br> <td><b><br> <input name="Título" type="text" id="Título"<br> size="40" ><br> </b></td><br> </tr><br> <tr><br> <td><b>Autor</b></td><br> <td><b><br> <select name="Autor" id="Autor" ><br> <option>Pedro</option><br> <option>Juan</option><br> <option>Alberto</option><br> <option>Jorge</option><br> <option>Daniel</option><br> <option>Fernando</option><br> </select><br> </b></td><br> </tr><br> <tr><br> <td><b>A&ntilde;o</b></td><br> <td><b><br> <select name="Año" id="Año" ><br> <option>1980</option><br> <option>1981</option><br> <option>1982</option><br> <option>1983</option><br> <option>1984</option><br> <option>1985</option><br> <option>1986</option><br> <option>1987</option><br> <option>1988</option><br> <option>1989</option><br> <option>1990</option><br> <option>1991</option><br> <option>1992</option><br> <option>1993</option><br> <option>1994</option><br> <option>1995</option><br> </select><br> </b></td><br> </tr><br> <tr><br> <td>&nbsp;</td><br> <td>&nbsp;</td><br> </tr><br> <tr><br> <td><b>Observaciones</b></td><br> <td><b><br> <textarea name="Observaciones"<br> rows="5" cols="40" ></textarea><br> </b></td><br> </tr><br> <tr><br> <td>&nbsp;</td><br> <td>&nbsp;</td><br> </tr><br> <tr><br> <td><b>&iquest;Desea recibir m&aacute;s informaci&oacute;n? </b></td><br> <td><input name="Más información" type="radio" value="Si" checked><br> Si&nbsp;&nbsp; <br> <input name="Más información" type="radio" value="No"> <br> No</td><br> </tr><br> <tr><br> <td>&nbsp;</td><br> <td>&nbsp;</td><br> </tr><br> <tr><br> <td><b>Confirmaci&oacute;n</b></td><br> <td><b><br> <input name="Enviar" type="submit" value="Enviar"><br> <input type="reset" value="Restablecer"><br> </b></td><br> </tr><br> </table><br> </form>

Podríamos haber complicado el código mucho más, pero eso ya va en cuenta de cada webmaster, dependiendo del tipo de formulario y página que posea. Animamos a que se repase completamente el código anterior, para así repasar todos los conceptos vistos hasta ahora. Te dará mucha experiencia y soltura.
A parte de los "adornos" lógicos que podríamos implementar en los formularios para que sean más vistosos a nuestros visitantes (negritas, tablas, colores,....) y que también están incluidos en el código, existen algunos detalles importantes que por fin, ha llegado el momento de comentar.

¿Cómo se envía un formulario?

Ya sabemos como añadir textos, botones, cajas, etc, pero ... ¿como hacemos que un formulario "funcione"?, o dicho de otro modo, ¿qué tenemos que añadir en nuestro código para que el contenido del formulario nos llegue vía e-mail? Seguro que muchos de nuestros "alunmos" del curso de Webmasters en MundoPC.NET se lo están preguntando desde el principio.
Pues bien, los detalles más importantes a los que nos referíamos antes y que tienen que ver con el envío de la información se encuentran justo al comienzo de cualquier formulario, dentro de la etiqueta <form ... >, y son los siguientes:

<form name="form1" method="post" action="">

METHOD: Puede ser o POST o GET. Post, indica que el contenido del formulario se enviará como un "paquete independiente", es decir, se envía de forma invisible. Get, indica que el contenido se enviará junto con la URL del formulario al pulsar "Enviar". Es decir, el valor del campo nombre, apellido y todo lo demás, se "copiará" y enviará junto a la dirección http://loquesea.com/formulario.cgi?nombre=Pedro&apellidos=Gonzalez ....
Normalmente usaremos siempre el método POST salvo que se nos indique lo contrario.

ACTION: Le indica al formulario la dirección de Internet o URL que deberá cargar después de pulsar el botón "ENVIAR". Si no asignamos ningún valor al formulario (como en el ejemplo anterior que está vacío) el formulario "no serviría de nada" y pulsar el botón no tendrá efecto alguno. Por tanto es necesario escribir dicha dirección.

Pero, ¿Qué dirección?...