HTML FORM
OBJETIVO: . DESARROLLAR EN LOS ESTUDIANTES L A CAPACIDAD DE CREAR
FORMULARIOS WEB ESTRUCTURADOS Y FUNCIONALES MEDIANTE EL USO DE
ETIQUETAS HTML COMO <FORM>, <INPUT>, <SELECT>, <TEXTAREA>,
<FIELDSET> Y <LEGEND>, APLICANDO VALIDACIONES BÁSICAS PARA
MEJORAR LA RECOLECCIÓN DE DATOS EN APLICACIONES WEB.
¿Qué es un Formulario en HTML ?
Un formulario HTML es una parte fundamental de una
página web que permite a los usuarios introducir datos e
interactuar con el sitio. Imagina que quieres registrarte en
3. una página, buscar un producto, enviar un comentario o
FORMULARIO iniciar sesión; todas estas acciones se realizan a través de
formularios.
Básicamente, un formulario es una colección de
elementos de entrada (como cajas de texto, botones,
casillas de verificación, etc.) que se utilizan para recopilar
información del usuario. Una vez que el usuario completa
y envía el formulario, los datos son enviados a un servidor
web para ser procesados.
Un formulario HTML se define principalmente por la etiqueta <form> y
contiene diversos elementos de entrada que permiten diferentes tipos de
interacción:
<form>: Esta es la etiqueta principal que engloba todos los elementos
del formulario. Tiene atributos importantes como:
action: Especifica la URL a la que se enviarán los datos del formulario
cuando este sea enviado.
4. ELEMENTOS method: Define cómo se enviarán los datos al servidor. Los métodos
más comunes son:
DE UN GET: Los datos del formulario se añaden a la URL (visibles en la
FORMULARIO barra de direcciones). Es útil para búsquedas o datos que no son
sensibles.
POST: Los datos del formulario se envían en el cuerpo de la
solicitud HTTP (no visibles en la URL). Es el método preferido para enviar
información sensible o grande.
target: Similar al atributo target de los enlaces, especifica dónde se
mostrará la respuesta del servidor (por ejemplo, en una nueva pestaña).
<input>: Es el elemento más versátil y se utiliza para
crear la mayoría de los controles del formulario. Su
comportamiento cambia drásticamente según el valor de
su atributo type. Algunos tipos comunes son:
text: Para entrada de texto corto (nombres, apellidos).
password: Para contraseñas (el texto se oculta).
email: Para direcciones de correo electrónico.
4. ELEMENTOS number: Para números.
checkbox: Para seleccionar una o varias opciones de
DE UN un grupo.
FORMULARIO radio: Para seleccionar solo una opción de un grupo.
submit: Un botón para enviar el formulario.
button: Un botón genérico que se puede usar para
ejecutar JavaScript.
file: Para cargar archivos.
date: Para seleccionar fechas.
<textarea>: Permite al usuario introducir varias líneas de texto,
ideal para comentarios largos o descripciones.
<select>: Crea una lista desplegable de opciones. Se usa junto
con la etiqueta <option> para definir cada elemento de la lista.
4. ELEMENTOS
DE UN <option>: Representa
desplegable (<select>).
una opción dentro de una lista
FORMULARIO
<button>: Define un botón. Puede ser un botón de envío, de
reinicio o un botón genérico.
<label>: Asocia texto descriptivo a un elemento de entrada,
mejorando la accesibilidad. Al hacer clic en la etiqueta, se activa
el elemento de entrada asociado.
<fieldset> y <legend>: Se utilizan para agrupar elementos
relacionados dentro de un formulario, mejorando la estructura y
la legibilidad. <fieldset> dibuja un borde alrededor
¿Para qué sirven los Formularios?
Los formularios son la puerta de entrada para la
interacción bidireccional entre un usuario y una
aplicación web. Permiten a los sitios web:
Recopilar información de usuarios: Registro,
5. USOS DE UN perfiles, encuestas.
FORMULARIO Permitir búsquedas: Motores de búsqueda, filtros
de productos.
Facilitar transacciones: Compras en línea, pagos.
Habilitar la comunicación: Contacto,
comentarios, foros.
Gestionar autenticación: Inicio de sesión,
recuperación de contraseña.
6. EJERCICIO
1
7.
ACTVIDAD 1
8. EJERCICIO
2 FORM
9.
ACTVIDAD 2