Formularios HTML

  • 12 de enero de 2002
  • Valoración:
  • 47 Comentarios
  • HTML, Manuales de HTML
Empezamos la explicación de la creación de formularios con el lenguaje HTML.
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 a direcciones de email, 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 y además requiere que el visitante tenga instalado en su ordenador algún correo electrónico en un programa como Outlook Express. 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.

Qué se puede hacer con un formulario

Usando HTML podemos únicamente enviar el contenido del formulario a un correo electrónico, es decir, construir un formulario con diversos campos y, a la hora pulsar el botón de enviar, generar una ventana de redacción de un email con los datos que el usuario haya escrito en cada uno de esos campos.

A menudo desearemos hacer cosas más complejas con los formularios, como que se envíe automáticamente el correo a un email sin necesidad que el contenido pase por ningún programa de email. Para ello tendremos que 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 que el propio HTML. En este caso, la solución más sencilla es utilizar los programás prediseñados que nos ofrecen 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.

Así pues, en resumen, con HTML podremos construir los formularios, con diversos tipos de campos, como cajas de texto, botones de radio, cajas de selección, menús desplegables, etc. Sin embargo, debe quedar claro que desde HTML no se puede enviar directamente el correo, sino que se generará un email en el ordenador del visitante, que éste tendrá que enviar "manualmente" por medio de su programa de correo. Si queremos que el formulario se envíe automáticamente o se procese en el servidor para generar otro tipo de respuesta, necesitaremos lenguajes de programación. En este Manual de HTML nos limitaremos a explicar la creación de formularios y os proponemos buscar otras formas de proceso de los mismos a través de otros artículos en DesarrolloWeb.com.

Cómo hacer un formulario en HTML

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.

Para continuar, vamos a ver cómo insertar cada uno de los campos posibles en un formulario HTML, comenzando por los campos de texto.

Referencia: Si deseas la formación en vídeo, puedes ver este videotutorial sobre formularios, publicado en DesarrolloWeb.com.

Autor

Rubén Alvarez

Redactor de DesarrolloWeb.com

Comentarios

Argie

15/9/2003
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.

José Manuel González Barragán

06/2/2004
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.

Pedro

28/2/2004
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?

Javier

07/10/2004
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.

Conny

29/1/2005
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

Jose

31/1/2005
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...

Alejandro

01/2/2005
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

Phantom EZ Form

02/3/2006
Nuevo servicio para crear formularios web customizados con tan sólo unos cliqs. El servicio es gratuito:
http://www.phantomezform.com/

Jan Fan Lee

09/7/2006
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.

dani

13/9/2006
Sino qieres q te lo cazen tanto paso los caracteres por su correspondiente codigo en &...; asi no dectectaran ni el nombre ni la @...

TU PAPA

14/12/2006
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.

Yeli

19/10/2007
Me gustaría saber que debo hacer para enviar los datos del formulario a una tabla de Access y no a una dir de correo.

ale

05/11/2007
esto de mandar mi formulario a mi mail me esta rompiendo la cabeza! necesito una solucion, si alguien la tiene es un dios! mi server no contiene el pack con formail.cgi! asique no se que hacer, alguien tiene idea! por favor jainc_arg@hotmail.com (estamos llegando a martes y yo todavia no puede hacer que un formulario se mande a mi mail) dejo mucho que decear! jejej saludos!!! y por favor! ayuda!

Isabel

20/2/2008
hola a todos.
Les quiero hacer una super pregunta, como puedo hacer para que los datos que envio del formulario, se vayan a un correo y a una base de datos, dentro de una tabla, como de sql, u otra tabla. Gracias por su tiempo.

Yop

10/3/2008
Buenas, yo quisiera saber como hago para colocar un formulario dentro de mi pag web, para que los visitantres me dejen sus opiniones.... como puedo hacer para insertarlo y que los mj se queden ahi cada vez q me escriban¿?¿?

Fernando

11/11/2008
Como hago para hacer que el outlook no aparezca?
Perdon pero soy novato

marcelo

14/12/2008
Hola a todos necesito un formulario muy simple en html ya que estoy en un servidor gratuito y no acepta ninguna otra cosa.

Lo que necesito es muy siemple.

Nombre
Apellido
Email
Dirección
Cp
Localidad
Pais
Nª de item

Enviar - Limpiar formulario

Si alguien me lo puede enviar desde ya muy agradecido

aaszaza

23/12/2008
sejdijdowe

estudiantexD

21/5/2009
miren
esque yo lo pongo
asi <form action="mailto:nombre@correo.com"> pero con mi corre pero no me abre diganme ay otra etiqueta aparte arriba antes q esa para poder enviar el formulario y entrar a outlook diganme plis es q soy estudiante no muy expertos como uistedes

jose a

27/5/2009
chido
dhido

maycol ruiz

17/6/2009
consulta
quisiera que por favor me ayuden a insertar un formulario en mi website donde los visitantes de mi pagina puedan enviarme una sugerencia o consulta a mi correo direccionado en el mismo formulario, por ejemplo : este mismo formulario donde yo puedo enviarle este comentario a ustedes

nani2429

18/6/2009
No llega a mi correo
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!!!

joseba

24/6/2009
no consigo hacerlo
yo estoy intentando hacer un formulario para la web http://www.ojoglobal.com y no consigo que se me envie, he visto varios tutoriales en internet pero la gran mayoria en php.

Crazy

01/7/2009
DUDA
Hola!
pues, esta bien el tutorial y eso, pero cuando pongo action="mailto:[mi email]"
y luego alguien reyena el formulario y da enviar se le abre el OUTLOOK y no lo manda directo a mi correo
que puedo hacer?
Por favor agradeceria que respondieras

Enrique

17/7/2009
Formularios
Hola, espero dar a entender bien mi duda.

Yo quiero solicitar un password y un usuario a las personas que se logean a la página, y mejor aún, que se certifiquen con una base de datos en un servidor, yo creo que es con formularios, pero he intentado copiar y guardar lo explicado en este tema, pero no consigo tampoco dar esta secuencia en mi página.

Gracias de antemano por responderme.

P.D. Si necesitan que les mande mi código, con gusto.

odio_las_malditas_cadenas@hotmail.es

ArCiGo

17/7/2009
.html
Publica un .html de código que no diga que hay que cargar perfiles de Faxes. Vale

marcos

19/7/2009
error en formulario
<form action="https://gestiondecuenta.com/php/formulario/check.php" method="POST"><tr>
<td width="198">* Nombre del archivo no encontrado</td>
<td width="144"><input type="text" name="peli" class="todo"></td>
</tr><tr>
<td>* Su nombre</td>
<td><input type="text" name="nombre" class="todo"></td>
</tr><tr>
<td>* Su E-MAIL en el caso de que quiera respuesta sobre el error</td>
<td><input type="text" name="email" class="todo"></td>
</tr><tr>
<td>* Este archivo fue visitado anterior mente por usted y funcionaba correctamente?</td>
<td>Si
<input type="radio" value="TRUE" name="funciona" class="todo">No<input type="radio" value="FALSE" name="dddd" class="todo"></td>
</tr><tr>
<td colspan="2">
<input type="hidden" name="asunto" value="megapeliculon">
<input type="hidden" name="redirigir" value="http://www.megapeliculon.com/gracias.htm" target="centro">
<input type="hidden" name="recipe" value="llraven@hotmail.es">
<input type="hidden" name="required" value="peli;nombre;email;funciona">
<input type="hidden" name="dominio" value="megapeliculon.com">
<input type="hidden" name="from" value="">
<input type="hidden" name="gdc_directorio_base" value="/home/gdc3/www/">
<input type="hidden" name="idioma" value="es">
<INPUT TYPE="SUBMIT" value="Enviar" class="todo">
</td>
</tr>
</form>



bien cuando envio el formulario me suelta

Envio de formulario no autorizado. Contacta con llraven@hotmail.es.

mi correo es llRaven@hotmail.es

si alguien me puede ayudar !

luis hernandez

10/8/2009
cual es la estructura general de un foro, se utiliza BD?
quiero diseñar un foro para mi sitio, es necesario crearle una base de datos?
y como es la estructura general con los formularios o paguias html.
gracias.

belen

12/8/2009
como abrir una pagiana automaticamente
hola soy nueva en esto estoy creando una pagina y pues tengo un formulario donde despues de llenar los datos requeridos se envien pero que me mustre un mensaje de que los datos fueron eviados correctamente y despues se cierre y se habra una pagina
gracias

belen

12/8/2009
saber como hicieron este formulario
saber como hicieron para que despues de haber llenado los datos correctamente me muestre que mis datos fueron neviados correctamente gracias

vicente

24/8/2009
ayuda
hola kisiera ke me ayudaran ya ke yo he hecho mi pagina web mas o menos tengo conocimientos de lo basico pero en mi pagina kisiera poner cajas de texto y en esas cajas de texto ke los visitantes puedan dejamer sus comentarios y ke se visualicen en mi pagina gracias

carlos alberto lopez

22/9/2009
opinion
esta es una prueba

Lidia

19/11/2009
Felicitasiones
hola felisitaciones por su pagina.
FELICITASIONES love
BUEN TRABAJO TIENE UN 100

guillermo

23/11/2009
diseno web
no se como ordenarle al formulario que envie la informacion a mi mail

Dany

03/2/2010
Como hago?
Hola tengo una pag web y yo se muy bien como poner codigo HTML solo que no entiendo donde se pone el php, este codigo lo pongo abajo de HTML y cuando trato de probar el formulario dice: "pagina no encontrada" que estoy haciendo mal?

juan_de_dios_aguilar_jurado

02/3/2010
Tablas y formularios
¿Se puede encerrar un formulario en una tabla?

nury caterin

22/4/2010
ayuda
como hago para crear un formulario de una encuesta en html?

Alejandra

24/8/2010
quiero saber
Necesito crear un formulario donde los usuarios escriban preguntas o comentarios y llegue a mi buzón como lo hago?

PEKÉ

24/9/2010
UNA OPCION MAS
CREO KE ES BUENO PERO HACE FALTA ALGO MAS ME REFIERO A LAS IMAGENES O EJEMPLOS KE PUEDES PONER DEBERIAN DE VER WEBEXPERTO.COM PARA KE TE DES UNA IDEA Y VEAS A LO KE ME REFIERO GRACIAS DE CUALKIER FORMA BYE

Ina

06/10/2010
El incordio de mi formulario
Hola gente, estoy haciendo un formulario y no se si alguien me puede ayudar. He hecho un formulario para que mis clientes se puedan registrar y apuntar a ciertos cursos. Lo que pasa esque tengo algunas opciones en las k puedes elegir el numero de cursos k kieres dar..ahora kiero juntar ese numero con las especificaciones: osea, que curso (multiple choice) y a que hora (multiple choice) tambien. Pero no se como unir las informaciones para k cuando un cliente ponga que solo quiere 1 curso...solo salga 1 vez las opciones de multiple choice y cuando uno quiera 2 por ejemplo el multiple choice salga dos veces. Que me proponeis?? Muchas gracias :)

toni

12/1/2011
he creado un formulario
hola me llamo toni tengo una pagina www.sagradacenysalud.es la cual he creado un formulario para que se pongam en contacto conmigo, todo funciona perfectamente hasta que le sad al boton de envia, en vez de enviarlo lo que hace es que se me abre el outlook o en su defecto el windows mail , a todo los usuarios les pasa lo mismo ya que yo creia que era un defecto de configuracio9n de mi pc pero veo que no es asi. ¿me podeis ayudar?

Topo

05/4/2012
Tutorial HTML
Muy buena explicación. Además encontré también otro curso de HTML muy completo que explica con muchos detalles y ejemplos el funcionamiento de formularios desde 0. Creo que leyendo ese tutorial junto a este uno aprende bien como crear formularios. http://www.youbioit.com/es/article/shared-information/4971/curso-de-html-tercera-parte

Lo recomiendo

bulgarcito

22/5/2012
no me jodan
no ke pasa por ke tanto ke es lo ke kreen k uno vive leyendo o k ijueputas gran malparidos nacxidos por el culo de un burro

Alan

21/6/2012
Duda en formulario
Hola buenas noches que tal, me gustaria saber si alguien me ayuda con la siguiente duda..

Yo tengo un formulario con Distintos campos que llenar, es como para generar facturas dspues de la venta de un articulo. en el mismo coloco todos los datos del cliente pero me gustaria saber como puedo hacer para que: al momento de colocar el nro de factura o cedula de identificacion automaticamente me muestre los datos de un cliente ya registrado en la base de datos y tambien que al momento de ingresar uno o varios productos a la factura en el mismo formulario me traiga automaticamente el precio por unidad y si son varios que me sume los precios y me de un total.. Debo hacer un procedimiento con javascript o con php para lograr esto? Agradezco su ayuda. Metal_gear_33@hotmail.com

Gaston

28/8/2012
herramientas para formularios html automaticos
Hola ! yo prefiero utilizar productos ya disponibles para armar los formularios. En español está muy bueno Groobix (http://www.groobix.com/web_forms_gratis.html), es muy simple, gratuito y además de capturar los datos y enviarlos por email, te permite administrar las respuestas. Hay otros en inglés como woofo, o zoho. Espero te sirva el comentario!

mayk

07/12/2013
no me justo porque la informacion no es entendible
LA INFORMACION ES TOTALMENTE INNACEPTABLE

sakhi

30/12/2013
gracias
Fue una muy buena ayuda que ha ofrecido a través de su artículo en el blog. Yo estaba buscando la forma de crear un formulario utilizando HTML y este artículo se explica claramente brevemente. Realmente muchas gracias por compartir estos aquí. Gracias.

Compartir