Formularios HTML

Valoración del artículo:
Empezamos la explicación de la creación de formularios con el lenguaje HTML.
Publicado: 12/1/02
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
Hasta ahora hemos visto la forma en la que el HTML gestiona y muestra la información, esencialmente mediante texto, imágenes y enlaces. Nos queda por ver de qué forma podemos intercambiar información con nuestro visitante. Desde luego, este nuevo aspecto resulta primordial para gran cantidad de acciones que se pueden llevar a cabo mediante el Web: Comprar un articulo, rellenar una encuesta, enviar un comentario al autor...

Hemos visto anteriormente que podíamos, mediante los enlaces, contactar directamente con un correo electrónico. Sin embargo, esta opción puede resultar en algunos casos poco versátil si lo que deseamos es que el navegante nos envíe una información bien precisa. Es por ello que el HTML propone otra solución mucho más amplia: Los formularios.

Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas páginas web. Son muy utilizados para realizar búsquedas o bien para introducir datos personales por ejemplo en sitios de comercio electrónico. Los datos que el usuario introduce en estos campos son enviados al correo electrónico del administrador del formulario o bien a un programa que se encarga de procesarlo automáticamente.

Usando HTML podemos únicamente enviar el formulario a un correo electrónico. Si queremos procesar el formulario mediante un programa la cosa puede resultar un poco más compleja ya que tendremos que emplear otros lenguajes más sofisticados. En este caso, la solución más sencilla es utilizar los programás prediseñados que nos proponen un gran número de servidores de alojamiento y que nos permiten almacenar y procesar los datos en forma de archivos u otros formatos. Si vuestras páginas están alojadas en un servidor que no os propone este tipo de ventajas, siempre podéis recurrir a servidores de terceros que ofrecen este u otro tipo de servicios gratuitos para webs. Por supuesto, existe otra alternativa que es la de aprender lenguajes como ASP o PHP que nos permitirán, entre otras cosas, el tratamiento de formularios.

Los formularios son definidos por medio de las etiquetas <form> y </form>. Entre estas dos etiquetas colocaremos todos los campos y botones que componen el formulario. Dentro de esta etiqueta <form> debemos especificar algunos atributos:

action

Define el tipo de acción a llevar a cabo con el formulario. Como ya hemos dicho, existen dos posibilidades:

  • El formulario es enviado a una dirección de correo electrónico
  • El formulario es enviado a un programa o script que procesa su contenido
En el primer caso, el contenido del formulario es enviado a la dirección de correo electrónico especificada por medio de una sintaxis de este tipo:

<form action="mailto:direccion@correo.com" ...>

Si lo que queremos es que el formulario sea procesado por un programa, hemos de especificar la dirección del archivo que contiene dicho programa. La etiqueta quedaría en este caso de la siguiente forma:

<form action="dirección del archivo" ...>

La forma en la que se expresa la localización del archivo que contiene el programa es la misma que la vista para los enlaces.

method

Este atributo se encarga de especificar la forma en la que el formulario es enviado. Los dos valores posibles que puede tomar esta atributo son post y get. A efectos prácticos y, salvo que se os diga lo contrario, daremos siempre el valor post.

enctype

Se utiliza para indicar la forma en la que viajará la información que se mande por el formulario. En el caso más corriente, enviar el formulario por correo electrónico, el valor de este atributo debe de ser "text/plain". Así conseguimos que se envíe el contenido del formulario como texto plano dentro del email.

Si queremos que el formulario se procese automáticamente por un programa, generalmente no utilizaremos este atributo, de modo que tome su valor por defecto, es decir, no incluiremos enctype dentro de la etiqueta <form>

Ejemplo de etiqueta <form> completa

Así, para el caso más habitual -el envío del formulario por correo- la etiqueta de creación del formulario tendrá el siguiente aspecto:

<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">

Entre esta etiqueta y su cierre colocaremos el resto de etiquetas que darán forma a nuestro formulario, las cuales serán vistas en capítulos siguientes.

Referencia: Mandar formulario por correo electrónico

Los formularios se utilizan habitualmente para implementar un tipo de contacto con el navegante, que consiste en que éste pueda mandarnos sus comentarios por correo electrónico a nuestro buzón.

Para este tipo de utilización de los formularios hemos publicado hace tiempo en DesarrolloWeb.com un artículo que puede resultar muy interesante para los que deseen un referencia extremadamente rápida para construir un formulario que envíe los datos por correo electrónico al desarrollador de la página.

El artículo en cuestión se llama contacto con el navegante.

Comentarios
Fueron enviados 33 comentarios al artículo
21 comentarios no revisados
12 comentarios revisados:
Por: Argie
15/9/03
El artículo es interesante, pero quisiera saber como hacer para no poner directamente el email en el código html. Porque de esta manera evito que los robots que roban direcciones de email para enviar Spam lo puedan capturar.
Alguien sabe como se hace ???
Gracias.
Por: José Manuel González Barragán
06/2/04
Para Argie:
De hecho, esto es mucho más útil. Tienes que encontrar un servidor que procese tus forms... en www.melodysoft.com te dan uno gratuito muy bueno, sin publicidad para tus visitantes.
Si tienes un Hosting de paga, lo más seguro es que ellos tengan instalado esto.
Por: Pedro
28/2/04
El inconveniente de poner la dirección email en el mailto del action del formulario es el SPAM. Se me ocurre una solución que es poner antes y después de la @ unos corchetes: nombre[@]dominio.com Así se supone que evitamos el SPAM. Inconveniente: que el usuario ha de darse cuenta del "error" y corregirlo antes de enviar el correo.
¿Puede haber una solución mejor?
Por: Javier
07/10/04
Hay por ahí un sencillo javascript q separa tu nombre de usuario del resto de la dirección "@hotmail.com" por ejemplo, de manera q los robots no pillan la dirección ,pq en el código está literalmente partida.

Lo podrás encontrar en páginas especializadas en javascript, como esta misma u otras como "hotscripts", por ejemplo.

Un saludo. Felicidades a desarrollo web por la página.
Por: Conny
29/1/05
Hola, para que tu mail no aparezca necesariamente debes trabajar con asp, que no muestra nunca el mail y es mucho mas seguro.

Conny Diseñadora
Por: Jose
31/1/05
Para evitar el SPAM lo mas facil es no poner la direccion. En su lugar se usa un formulario que envie los datos a un script PHP, ASP, CGI o lo que caiga, que si tendrá la direccion internamente y que se ocupa del "trabajo sucio". En HotScripts los hay por toneladas y son muy fáciles de usar y personalizar. Uno que parece facil es http://www.mycostar.com/products.php#contactusform y es gratuito. Para lo de enviar imágenes en el correo (poco recomendable), habría que modificar el script para que se envie como HTML (no es demasiado dificil). Si alguien quiere una explicación o simplemente que le pase el código de cómo lo resolví yo, puede visitar http://www.iliberis.net/cuerpo.php?seccion=contacto y dejarme un mensaje en la dirección que se indica en el pie de la pagina. Por cierto, para poder poner esa direccion y evitar SPAM, lo que he hecho es simplemente poner un GIF. Saludos a todos/as...
Por: Alejandro
01/2/05
Que tal!! quería saber como enviar un formulario html a un mail, sin que me habra el outlook con los datos del formulario, es decir directamente a un mail. Gracias.

RESPUESTA

Esto lo puedes hacer con algún lenguaje de programación del lado del servidor como ASP o PHP. Lee el manual Envío de formularios avanzado

Por: Phantom EZ Form
02/3/06
Nuevo servicio para crear formularios web customizados con tan sólo unos cliqs. El servicio es gratuito:
http://www.phantomezform.com/
Por: Jan Fan Lee
09/7/06
Hola a todos.

Lo que pasa quando pongo una direccion destino en el "Mailto" dentro de "action" y (todo eso en un boto) relleno el formulario y le doy a enviar, me habre el "Outlook Express" del windows, saben como hacer que el formulario se envie directamente a la direccion destina sin que se abra el "Outlook Express" ? me refiero de que se envie como si te registraras en una pagina y se envia a tu correo. Lo siento porla pregunta soy ahun principiante en HTML. Gracias y espero vuestra ayuda.
Por: dani
13/9/06
Sino qieres q te lo cazen tanto paso los caracteres por su correspondiente codigo en &...; asi no dectectaran ni el nombre ni la @...
Por: TU PAPA
14/12/06
para evitar el spam hay q hacer un script q parta el correo a partir de q lo escriba y luego
este mismo script lo envie a nuestra cuenta de correo electronico para usarlo o a otro script q haga algo con el.

nani242...
No llega a mi correo
18/6/09
Hola buenas tardes a todos.

Sin mentirles llevo como 1 semana tratando de que un formulario llegue a un correo pero no he podido ya me avente todos los manuales, ya tengo las paginas el formulario ya esta direccionado el boton pero al dar clik no se envia a mi correo, me dicen que tengo que poner algo en el servidor, pero la verdad no le entiendo. les agradeceria si me pudieran ayudar: esta es la pagina
http://www.heuristica-ti.com.mx/public_html/asocam/index.php
de esa direccion hay una palabra con link dice registro ahi sale el formulario pero al darle envir sale un mensaje pero no me llega a mi correo porque sucede eso necesito mucha ayuda plis!!!

Manuales relacionados
Categorias relacionadas
El autor
Rubén Alvarez
Redactor de DesarrolloWeb.com
http://www.desarrolloweb.com
Lectura recomendada
Compra este libro en Agapea, la librería urgente a domicilio.
Últimas noticias
Alojados en el grupo