Programación Web
02 Formularios en HTML
"No se trata solo de aprender a programar,
sino de aprender a resolver problemas de
maneras creativas."
Información del Docente
• Nombre: Prof. Marco Antonio Cabrera Rufino.
• Correo Electrónico: epad_instructor19@[Link].
• Horario de Clases: Lunes, Miércoles y Viernes de 8:00 a 10:00 am.
• Horario de Consulta: (El docente lo agregará).
Introducción a los formularios
Los formularios permiten a los usuarios ingresar datos y enviarlos al servidor.
Se crean con la etiqueta <form> y se complementan con varios tipos de
entradas.
Uso común:
• Registro de usuarios.
• Inicios de sesión.
• Envío de comentarios.
Estructura Básica de un Formulario
<form action="[Link]" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<button type="submit">Enviar</button>
</form>
Elementos clave:
• <form>: Contenedor principal del formulario.
• action: URL donde se enviarán los datos.
• method: Método HTTP (comúnmente GET o POST).
¿Qué son los métodos HTTP?
Los métodos HTTP son instrucciones que indican cómo interactuar con un servidor
[Link] más comunes en formularios HTML son:
• GET: Envía datos como parte de la URL.
• POST: Envía datos de forma segura en el cuerpo de la solicitud.
Buenas Prácticas
• Usa GET para búsquedas o solicitudes de datos.
• Usa POST para enviar información sensible, como contraseñas.
• Siempre valida los datos enviados en el servidor para evitar errores o ataques.
Diferencias entre GET y POST
Aspecto GET POST
Transmisión Datos se envían como parte de Datos se envían en el cuerpo de la
la URL. solicitud.
Visibilidad Visible en la barra de direcciones Oculto al usuario.
del navegador.
Uso recomendado Para solicitudes simples o lectura Para enviar información confidencial o
de datos. grandes volúmenes de datos.
Límite de datos Limitado por la longitud de la Sin límite significativo.
URL (2-8 KB).
Caché Los datos pueden ser No se almacenan en caché.
almacenados en caché.
Tipos de Campos de Entrada
Etiqueta Propósito Ejemplo
<input type="text"> Entrada de texto. <input type="text" name="usuario">
<input Entrada de contraseña. <input type="password" name="clave">
type="password">
<input type="email"> Entrada para correos <input type="email" name="correo">
electrónicos.
<input Entrada para números. <input type="number" name="edad">
type="number">
<input Casilla de verificación. <input type="checkbox" name="acepto">
type="checkbox">
<input type="radio"> Botones de selección <input type="radio" name="genero"
única. value="M">
<textarea> Entrada de texto de <textarea name="comentarios"></textarea>
varias líneas.
<button> Botón para enviar o <button type="submit">Enviar</button>
resetear el formulario.
Atributos Comunes en Formularios
Atributo Descripción Ejemplo
action Define la URL donde se <form></form>
enviarán los datos.
method Método HTTP para enviar <form></form>
datos (GET, POST).
name Nombre del campo <input></input>
(identificador en el servidor).
value Valor predeterminado del <input></input>
campo.
placeholder Texto guía para el usuario. <input></input>
required Campo obligatorio. <input></input>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario con JavaScript</title>
</head>
<body>
<form id="miFormulario">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Escribe tu nombre" required
<label for="email">Correo:</label>
<input type="email" id="email" name="email" required>
<label for="genero">Género:</label>
<input type="radio" name="genero" value="M" required> Masculino
<input type="radio" name="genero" value="F" required> Femenino
<label for="comentarios">Comentarios:</label>
<textarea id="comentarios" name="comentarios" rows="4" cols="50"></textarea>
<button type="submit">Enviar</button>
</form>
<div id="resultado"></div>
<script src="[Link]"></script> Codigo HTML
</body>
</html>
// Escuchar el evento 'submit' del formulario
const formulario = [Link]("miFormulario");
[Link]("submit", function(event) {
[Link](); // Evitar que el formulario se envíe y recargue la página
// Capturar los valores de los campos
const nombre = [Link]("nombre").value;
const email = [Link]("email").value;
const genero = [Link]('input[name="genero"]:checked').value;
const comentarios = [Link]("comentarios").value;
// Mostrar los datos en pantalla
const resultado = [Link]("resultado");
[Link] = `alt + 96
<h3>Datos Capturados:</h3>
<p><strong>Nombre:</strong> ${nombre}</p>
<p><strong>Correo:</strong> ${email}</p>
<p><strong>Género:</strong> ${genero}</p>
<p><strong>Comentarios:</strong> ${comentarios}</p>
Ventajas del Procesamiento con
JavaScript
• No necesitas un servidor para manejar los datos.
• Interactividad directa y rápida en el navegador.
• Flexibilidad para validar, mostrar o enviar los datos a
servicios externos.
Fin del tema
Gracias
