Codificación aprenderaprogramar.com: CU00728B
FORMULARIO DE DATOS PERSONALES
En esta entrega nos vamos a centrar en crear un formulario de entrada de datos personales: nombre, apellidos, dirección, correo electrónico y número de teléfono. Los formularios son elementos muy frecuentes en las páginas web y se usan para recabar datos de todo tipo por parte de los usuarios.
Apoyándonos en el diseño obtenido en la entrega anterior. Crearemos una nueva página. Para ello sólo tendremos que modificar el contenido de la capa (div) body.
<div id="body"> <form method="get" action="http://aprenderaprogramar.com"> Nombre: <input type="text" name="nombre" /><br /> Apellidos: <input type="text" name="apellidos" /><br /> Dirección: <input type="text" name="direccion" /><br /> Correo electrónico: <input type="text" name="correo" /><br /> Teléfono: <input type="text" name="telefono" /><br /> </form> </div> |
A modo de ejercicio, abre un editor como Notepad++, escríbe el código y guárdalo con un nombre como ejemplo1.html. A continuación, visualiza el resultado en tu navegador. Recordar que aunque en este ejemplo falten etiquetas HTML el navegador las completará y tratará de mostrar un resultado. Sin embargo, para que la página esté correctamente construida deberíamos incluir todas las etiquetas propias de un documento HTML (como <html> … </html>, etc.).
Si nuestro formulario lo incluimos dentro del pequeño portal que habíamos creado en la anterior entrega del curso, el código completo sería el siguiente. Abre un editor como Notepad++, escríbelo y guárdalo con un nombre como ejemplo2.html. A continuación, visualiza el resultado en tu navegador.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Portal básico - aprenderaprogramar.com</title> </head> <body> <div id="page"> <div id="header"> Portal (Tutorial básico del programador web: HTML desde cero) - aprenderaprogramar.com </div> <!-- contenedor --> <br /> <br /> <br /> <div id="wrapper"> <!-- menu --> <div id="menu"> <div>Menú</div> <hr style="color:red; background-color:red; width:50%;" /> <ul> <li><a href="#">Portada</a></li> <li> <a href="http://www.aprenderaprogramar.com">aprenderaprogramar.com</a> </li> </ul> </div> <!-- fin menu --> <!-- cuerpo --> <div id="body"> <form method="get" action="accion.html"> Nombre: <input type="text" name="nombre" /><br /> Apellidos: <input type="text" name="apellidos" /><br /> Dirección: <input type="text" name="direccion" /><br /> Correo electrónico: <input type="text" name="correo" /><br /> Teléfono: <input type="text" name="telefono" /><br /> </form> </div> <!-- fin cuerpo --> </div> <!-- fin contenedor --> <br /> <br /> <br /> <div id="footer"> Copyright 2020-2072 aprenderaprogramar.com </div> </div> </body> </html> |
Si abrimos la página HTML del ejemplo anterior obtendremos una visualización similar a la siguiente:
Fíjate que el código de la cabecera, menú y pie es exactamente el mismo que el de la entrega anterior. Sólo hemos modificado el cuerpo de la página. Cuando navegas por Internet, se suelen mantener las mismas cabeceras, menú y pie en las páginas HTML que visitamos. Es decir, es como si existiera una plantilla de forma que el aspecto es siempre el mismo (cabecera, pie, color de fondo…) excepto una parte de contenido central. Cuando tengas más conocimientos, en vez de repetir el código en todos los archivos, podrás utilizar instrucciones específicas para hacer que esos contenidos de plantilla se carguen en todas las páginas de un portal sin necesidad de ir repitiéndolos en todas las páginas que creamos. Además, así podríamos cambiar el elemento cabecera en un único lugar y obtener su cambio en todas las páginas, sin tener que editar todas las páginas una por una para cambiar su cabecera. Sin embargo, preferimos no explicar esto ahora para tratar de ir paso por paso.
EJERCICIO
Modifica el formulario HTML con el que hemos trabajado para incluir un campo fotografía que permita el envío de un archivo de imagen como parte del formulario. Responde a estas preguntas:
¿Qué atributo ha de especificarse para el form para poder enviar archivos? ¿Qué valor ha de darse a dicho atributo? ¿Qué método de envío hay que especificar para el form si se envían archivos?
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.