Envio, borrado y demás en formularios HTML

Valoración del artículo:
Enseñamos la manera de colocar botones de envio y borrado en formularios HTML. También conocemos los campos invisibles y los botones normales. Además, hacemos un ejemplo práctico.
Publicado: 12/1/02
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
Los formularios han de dar plaza no solamente a la información a tomar del usuario sino también a otra serie de funciones. Concretamente, han de permitirnos su envío mediante un botón. También puede resultar práctico poder proponer un botón de borrado o bien acompañarlo de datos ocultos que puedan ayudarnos en su procesamiento.

En este capitulo, para terminar la saga de formularios, daremos a conocer los medios de instalar todas estas funciones.

botón de envío

Para dar por finalizado el proceso de relleno del formulario y hacerlo llegar a su gestor, el navegante ha de validarlo por medio de un botón previsto a tal efecto. La construcción de dicho botón no reviste ninguna dificultad una vez familiarizados con las etiquetas input ya vistas:

<input type="submit" value="Enviar">

Con este código generamos un botón como este:

Como puede verse, tan solo hemos de especificar que se trata de un botón de envío (type="submit") y hemos de definir el mensaje del botón por medio del atributo value.

Nota: Al enviar el formulario se creará un mensaje con tu programa de correo, que se debe enviar con ese propio programa de correo, para que llegue al destinatario. Este es el comportamiento típico de los formularios que se programan con HTML, que requiere que el usuario tenga un programa de correo instalado y configurado para que funcione.

Una duda típica es cómo realizar el formulario para que se envíe directamente desde la página web, sin que el usuario deba tener un programa de correo, sino que se pulse el botón de enviar y se genere y envíe el mensaje automáticamente. Para ello es necesario realizar algo de programación, aparte del propio formulario en HTML, en un lenguaje avanzado, que sea del lado del servidor, como PHP, ASP... En DesarrolloWeb.com tienes todo lo que necesitas para aprender a conseguir el envío automático de correos, con explicaciones detalladas para obtener los resultados por varias vías. Te recomendamos leer el manual Envío de formularios avanzado.

botón de borrado

Este botón nos permitirá borrar el formulario por completo en el caso de que el usuario desee rehacerlo desde el principio. Su estructura sintáctica es análoga a la anterior:

<input type="reset" value="Borrar">

A diferencia del botón de envío, indispensable en cualquier formulario, el botón de borrado resulta meramente optativo y no es utilizado frecuentemente. Hay que tener cuidado de no ponerlo muy cerca del botón de envío y de distinguir claramente el uno del otro.

Datos ocultos

En algunos casos, aparte de los propios datos enviados por el usuario, puede resultar práctico enviar datos definidos por nosotros mismos que ayuden al programa en su procesamiento del formulario. Este tipo de datos, que no se muestran en la página pero si pueden ser detectados solicitando el código fuente, no son frecuentemente utilizados por páginas construidas en HTML, son más bien usados por páginas que emplean tecnologías de servidor. No os asustéis, veremos más adelante qué quiere decir esto. Tan solo queremos dar constancia de su existencia y de su modo creación. He aquí un ejemplo:

<input type=hidden name="sitio" value="www.desarrolloweb.com">

Esta etiqueta, incluida dentro de nuestro formulario, enviara un dato adicional al correo o programa encargado de la gestión del formulario. podríamos, a partir de este dato, dar a conocer al programa el origen del formulario o algún tipo de acción a llevar a cabo (una redirección por ejemplo).

Botones normales

Dentro de los formularios también podemos colocar botones normales, pulsables como cualquier otro botón. Igual que ocurre con los campos hidden, estos botones por si solos no tienen mucha utilidad pero podremos necesitarlos para realizar acciones en el futuro. Su sintaxis es la siguiente.

<input type=button value="Texto escrito en el botón">

Quedaría de esta manera:

El uso más frecuente de un botón es en la programación en el cliente. Utilizando lenguajes como Javascript podemos definir acciones a tomar cuando un visitante pulse el botón de una página web.

Ejemplo de formulario

Con este capitulo finalizamos nuestro tema de formularios. Pasemos ahora a ejemplificar todo lo aprendido a partir de la creación de un formulario que consulta el grado de satisfacción de los usuarios de una línea de autobuses ficticia. El formulario está construido para que envíe los datos por correo electrónico a un buzón determinado.

Vemos el formulario en esta página. Vosotros tratar de construirlo para ver si habéis entendido bien los temas sobre formularios.

Nombre
Email
Población
Sexo
Hombre
Mujer

Frecuencia de los viajes


Comentarios sobre su satisfacción personal


Deseo recibir notificación de las novedades en las líneas de autobuses.



El formulario se puede ver también en una página a parte. Recordad que podéis ver el código fuente de cualquier página web utilizando los menús de vuestro navegador, así podréis revisar el código que hemos utilizado para construir el formulario.

A continuación también mostraremos el código fuente de este formulario, que es importante que todos le echemos un vistazo, aunque sea rápidamente.

<form action="mailto:colabora@desarrolloweb.com" method="post" enctype="text/plain">
Nombre <input type="text" name="nombre" size="30" maxlength="100">
<br>
Email <input type="text" name="email" size="25" maxlength="100" value="@">
<br>
Población <input type="text" name="poblacion" size="20" maxlength="60">
<br>
Sexo
<br>
<input type="radio" name="sexo" value="Varon" checked> Hombre
<br>
<input type="radio" name="sexo" value="Hembra"> Mujer
<br>
<br>
Frecuencia de los viajes
<br>
<select name="utilizacion">
    <option value="1">Varias veces al dia
    <option value="2">Una vez al dia
    <option value="3">Varias veces a la semana
    <option value="4">varias veces al mes
</select>
<br>
<br>
Comentarios sobre su satisfacción personal
<br>
<textarea cols="30" rows="7" name="comentarios"></textarea>
<br>
<br>
<input type="checkbox" name="recibir_info" checked>
Deseo recibir notificación de las novedades en las líneas de autobuses.
<br>
<br>
<input type="submit" value="Enviar formulario">
<br>
<br>
<input type="Reset" value="Borrar todo">
</form>

Para acabar, vamos a ver lo que recibirían por correo electrónico en la empresa de autobuses cuando un usuario cualquiera rellenase este formulario y pulsase sobre el botón de envio.

nombre=Federico Mijo Silvestre
email=fede@terramix.com
poblacion=Astorga, León
sexo=Varon
utilizacion=2
comentarios=No creo que sea una buena linea. Poner más autobuses.
recibir_info=on

Referencia: Taller con formularios

Hemos publicado un taller de HTML con un formulario para valorar la página web. Muy sencillo y práctico. Puede ser interesante para afianzar estos conocimientos. Entrar

Comentarios
Fueron enviados 18 comentarios al artículo
14 comentarios no revisados
4 comentarios revisados:
Por: roverto
09/5/03
¿Cómo modifico el color y la fuente de las letras en un boton?

RESPUESTA

Tenemos un manual que se llama Botones con estilo donde se informa sobre el estilo de los botones y sobre cómo crear botones de envío de formulario variados. Botones básicos, con estilos y con características dinámicas.

Por: Meret
28/8/04
Generalmente este tipo de sitios pecan de un defecto. El que las hace sabe mucho sobre programación etc...pero no sabe enseñar lo que sabe.
Desarrolloweb sin embargo destaca por lo didáctica que es. Muy buena. Una petición:
-un manual vuestro sobre dreamweaver mx estaría muy bien.
Un comentario sobre esta lección: Me ha llamado la atención un detalle en el código del formulario. Imagino que a muchos os dará igual.
Pero si en vez de value=varón pusiera value=macho os chocaría seguramente.
¿Qué tal si en vez de value=hembra ponemos value=mujer?
Por: Juan Carlos
04/6/05
Rubén Alvarez. Realmente eres un docente de alma... que pa' que yo lo entienda.
Felicitaciones y mil gracias. Un abrazo desde Salta – Argentina.

Xiib
Porque no se muestra el botón enviar en el siguiente código
17/9/09
Hola... Estoy siguiendo este tutorial con atención y he estado haciendo ejercicios de lo que se menciona aquí. He realizado un formulario cuyos campos input están dentro de celdas para darle cierto orden al momento de presentar la página. El caso es que si uso una etiqueta "textarea" antes de la etiqueta que contiene el atributo "submit" entonces al visualizar la página no se muestra el botón de envió pero si retiro la etiqueta "textarea" el botón de envió aparece normalmente. ¿Qué es lo que sucede?

Adjunto el código para que lo analicen

<html>
<head>
<title>formulario</title>
</head>
<body>

<table>
<form action="mailto un_correo@gmail.com" method="post">
<tr><td>Nombre</td><td><input type="text" name="Nombre"> <br><br></td></tr>
<tr><td>Apellido</td><td><input type="text" name="apellido"><br><br></td></tr>
<tr><td>Ciudad</td><td><input type="text" name="ciudad"><br><br></td></tr>
<tr><td>Apodo</td><td><input type="text" name="apodo"><br><br></td></tr>
<tr><td>Correo electrónico</td><td><input type="text" name="c_electronico"><br><br></td></tr>
<!--<tr><td>Comentario</td><td><textarea name="comentario" rows="10" cols="17"><br><br></td><br></tr>-->
<tr><td></td><td align="right"><input type="submit" value="enviar"></td></tr>
</form>
</table>
</body>
</html>

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