Videotutorial: Formularios HTML

  • Por
  • HTML
Vídeo tutorial sobre los formularios en HTML. Mostramos por la práctica, a través de varios ejemplos cómo construir formularios con todos los tipos de elementos posibles.

Presentamos la octava entrega del videotutorial de HTML, un nuevo vídeo en el que vamos a tratar acerca de los formularios. Cabe señalar antes de comenzar que ya estuvimos hablando sobre los formularios en el Manual de HTML en texto, en diversos capítulos, comenzando por el artículo sobre formularios.

Hasta este punto hemos visto muchas de las cosas más importantes de HTML y entre las pendencias más destacadas teníamos los formularios, que son uno de los recursos importantes para hacer la posibilidad la comunicación y la interacción con el visitante. Los formularios quizás sea una de las partes más complejas que existen dentro del HTML, por constar de muchas etiquetas para crearlos. El propio formulario tiene una etiqueta de inicio y de fin, dentro de la que colocaremos todos los campos de formulario, cada uno con su propia etiqueta, aunque hay campos que comparten una misma etiqueta y sólo cambian los valores de sus atributos.

Los formularios nos sirven para muchas cosas, pero en este vídeo vamos a centrarnos en la posibilidad de envío de éstos por correo electrónico. De hecho, si hacemos un formulario estrictamente con HTML, sin apoyarnos en otros lenguajes de programación, la única posibilidad es la del envío del formulario por email. Así pues, mostraremos cómo hacer el formulario básico con HTML, que al pulsar su botón de envío se genera una ventana de redacción del correo con los datos que se hayan rellenado en el formulario.

Luego mostraremos brevemente cómo haríamos un formulario si tuviéramos que apoyarnos en una página PHP para procesarlo. Esto se hace simplemente cambiando el atributo action del formulario, dirigiéndolo hacia una página web, en este caso PHP. El tema de la programación PHP para procesar el formulario queda por fuera de este manual, pero merece la pena ver cómo se haría la parte de HTML. Para futuras referencias y aprender cómo enviar un email automáticamente con el servidor, sin tener que genera un mensaje de correo electrónico con el ordenador del usuario, que debería enviar con su programa de email predeterminado, recomendamos la lectura del Manual de envío avanzado de formularos.

Para acabar el vídeo, mostramos otros dos ejemplos de formularios más completos, en los que nos preocupamos por implementar todos los distintos tipos de elementos de formulario que están disponibles, o al menos los más utilizados al hacer páginas web.

Sin más, os dejamos con este videotutorial sobre formularios, con una duración de casi tres cuartos de hora, que esperamos os resulte interesante y didáctico.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Miguel

27/2/2010
Felicitaciones
Felicitar por este video tutorial de antemano..
Decir tambien que soy nuevo en esto y me esta interesando este asunto de códigod html, php, y no se que más hay.

me gustaria estudiar elcurso que estan en desarrolloweb, pero ....
Podrían colocarlo en formato pdf para así poder descarcarlo.

Muchas gracias de antemano, decir tambien que he encontrado este video tutorial en la red , porque lo que quiero es realizar un formulario para mi blog "http://gservicepc.blogspot.com/".

Esta en construcción y soy tecnico en reparacion y mantenimiento de pc, pero esto de códigos no se nada de nada, y me esta llamando la atencion por lo cual quiero estudiarlo.
Gracias de antemano.

canter7896

03/3/2010
me gusto
Realmente me gusto el video. Esta bien preparado. Como se puede obtener?

geras

16/6/2010
ninguno
como hacer que la informacion del formulario aparesca en mi pagina

Gerald

02/8/2010
Muchas gracias
Gracias a ustedes y al tiempo que se han tomado para preparar los manuales y video tutoriales, me han sido de gran ayuda.

luisfe

12/11/2010
felicitaciones
Muy buenos videos de gran utilidad para el buen aprendizaje de html.

eslomao

02/12/2010
formulario,
hola, bueno es algo extenso lo que kiero decir a ver si m expreso bien, empiezo,
estoy haciendo un formulario con una base en una pagina web, esta incluye un formulario donde ingresas los datos , nombre , fecha de nacimiento etc... esta t lleva a otra donde ingresas la ciudad, y asi hasta llegar al final, el problema es q hice los formularios con dreamweaver y ahi es donde falla no se q, es decir, en la pagina web m sale esto <form name="myform1" method="post" action="carta-astral-5.php" onSubmit="return ValidateSubscribe(this)">, supongo q en mi caso tendria q poner form name="chart" q es el nombre de mi formulario , en accion pongo el nombre del siguiente archivo q kiero abrir, pero en el casi de la pagina web, al mirar su codigo de fuente sale esto , <input type="submit" name="nombre" value="" />
<input type="submit" name="dia" value="" />
<input type="submit" name="mes" value="" />
<input type="hidden" name="ano" value="" />
<input type="hidden" name="dia" value="30" />
<input type="hidden" name="hora" value="17" />
<input type="hidden" name="minutos" value="34" />
<input type="hidden" name="pais" value="100" />

pero en la mia al desviarlo no m sale nada d eso y no se keda memorizado los datos q le puse en el formulario anterior, es decir q no m daria una solucion al no quedarse memorizado los datos, por otra parte en el inicio de la pagina we aparece esto <script language="JavaScript">
<!--
function ValidateSubscribe(frm) {
if (frm.ciudad.value == "xx") {alert("Ingrese su ciudad de nacimiento."); frm.ciudad.focus(); return false;}
return true;

}

/* Trims the leading and trailing blanks from a given string. */
function Trim(strToTrim) {
while(strToTrim.charAt(0)==' '){strToTrim = strToTrim.substring(1,strToTrim.length);}
while(strToTrim.charAt(strToTrim.length-1)==' '){strToTrim = strToTrim.substring(0,strToTrim.length-1);}
return strToTrim;
}

function lonlat () {

document.myform1.action = "carta-astral-4.php";
document.myform1.submit();

cosa q en mi formulario no encuentro la manera de hacerlo o si lo he de hacer manual, si kereis os muestro los codigos a ver en q esta fallando, ya he leido y visto miles de manuales, pero.... no hay manera

Extremofilo

04/7/2011
Buen tutorial
Muy buena clase, felicitaciones, aprendí muchisimo...saludos desde Ecuador

allan

28/7/2011
una pregunta
donde uno pone <form action="AQUI VA EL EMAIL DEL ADMINISTRADOR QUE ESTA HACIENDO LA PAGINA O EL QUE SALE EN EL VIDEO?" method="post" enctype="text/plain">

Roberto

20/9/2011
El video no hace pantalla grande
Mira por faor me encantan estos video aprendo un montón pero entiendo mas cuando puedo ver mejor lo que estas haciendo y era para ver si podían arreglar ese detalle para que el video se visualice en pantalla grande, eso sería genial y me ayudaría mas

Isabel Velásquez Feria

24/8/2014
Manuales y videos HTML
Hola: Estoy comenzando a entrar en el mundo del diseño de páginas web, y he arrancado siguiendo sus manuales y videos que me han sido de mucha utilidad por eso quiero agradecerles que me hallan permitido usar manuales y videos.

puigsacalm

14/4/2015
EXCELENTE VIDEO
Muy bueno el video-tutorial sobre los formularios en HTML.
¡Mis mejores felicitaciones1