Manipulación de formularios HTML mediante un lenguaje
de programación web
Esta presentación se explorará cómo JavaScript puede transformar
los formularios HTML. Donde crea experiencias de usuario
interactivas y dinámicas.
La manipulación de formularios HTMLmediante lenguajes de
programación web es un pilar fundamental en el desarrollo
moderno. Al combinar tecnologías como JavaScript para la
interactividad y PHP/.js para el procesamiento seguro, podemos
crear experiencias de usuario fluidas y robustas.
1
FUNDAMENTOS DE FORMULARIOS HTML
ESTRUCTURA BÁSICA
Los formularios son la base de la interacción web. Permiten a los
usuarios enviar datos. Se definen con id: Identificador único para
manipulación JS.
ELEMENTOS CLAVE
Los elementos de entrada incluyen <input>, que son campos de
entrada como
type="text": Entrada de texto estándar
type="email": Valida formato básico de email 2
FUNDAMENTOS DE FORMULARIOS HTML
INTERACCIÓN DINÁMICA
La interacción dinámica es crucial para la experiencia del
usuario. Hace que los sitios web sean más atractivos.
IMPORTANCIA
Ayudan a administrar y recopilar la información de manera
eficiente y sencilla. Facilita la interacción entre el usuario y la
lógica del servidor
3
FORMULARIOS EN HTML
La etiqueta <form> define un formulario y su cierre es mediante
</form>. Entre ambas se colocan los elementos o controles que
se muestran más adelante.
Para que el código pueda interactuar con un formulario se ha de
poner nombre a todo, mediante los atributos name e id. Operan
como nombres de variable
La acción (si no se usa PHP) consiste en enviar la información
por correo electrónico, utilizando mailto
Method especifica la forma de envío del contenido del formulario
{POST|GET}: Sintaxis: <form method="POST">
<form method="GET"> 4
FORMULARIOS EN HTML
Enctype
Especifica el formato de empaquetado para los datos del
formulario {text/plain|multipart/form-data}
Sintaxis:
<form enctype="text/plain">
<form enctype="multipart/form-data>
5
FORMULARIOS EN HTML
Los servicios de alojamiento suministran programas para
gestionar formularios, de forma que nos evitan todo el trabajo de
codificación. Se indican algunos servicios que los incluyen.
MANERAS DE PROCESAR LA INFORMACIÓN:
● CGI (Common Gateway Interface). Envío a un ejecutable
● MAILTO. Envío a una dirección de correo electrónico
● MAILTO. Envío a una dirección de correo electrónico
6
La Manipulación con JavaScript
JavaScript facilita la selección de elementos del formulario. Los
eventos de formulario son clave para la interacción. La validación
en tiempo real mejora la experiencia.
TÉCNICAS DE VALIDACIÓN DE FORMULARIOS
● Validar campos obligatorios es esencial.
● Verificar formatos como email y teléfono es clave.
● Prevenir envíos incorrectos mejora la seguridad.
● Mensajes de error personalizados guían al usuario.
La validación asegura la calidad de los datos. Los errores se
previenen antes del envío. Una buena validación mejora la
confianza del usuario. 7
PHP(HYPERTEXT PREPROCESSOR)
Es un lenguaje de programación del lado del servidor diseñado
específicamente para el desarrollo web. Es una tecnología
fundamental que permite crear sitios web dinámicos e
interactivos.
Se mezcla con HTML dentro de archivos .php El motor PHP
procesa el código:
● Accede a bases de datos
● Genera HTML dinámico
8
Como se relaciona XAMPP con PHP
XAMPP es un paquete de software libre que proporciona un
entorno de desarrollo local (localhost) para aplicaciones web.
¿Para qué sirve XAMPP con PHP?
DESARROLLO LOCAL
● Permite ejecutar código PHP sin necesidad de un hosting en
internet. Ejemplo: Crear un formulario HTML+PHP que
interactúe con MySQL.
9
PRUEBAS SEGURAS
● Experimentar con bases de datos y funcionalidades sin
afectar sitios en producción.
APRENDIZAJE
● Entorno ideal para estudiantes y desarrolladores que inician
con PHP.
Componentes claves de XAMPP
● Apache: Servidor web que interpreta peticiones. Accesible
via [Link] o [Link]
● MySQL: Bases de datos relacionales para almacenar
información. Se administra con phpMyAdmin (interfaz web).
10
¿Por qué usar XAMPP con PHP?
● Rapidez: Pruebas inmediatas sin deploy.
● Control total: Acceso directo a configuraciones.
● Offline: Desarrollo sin conexión a internet.
Ejemplo de flujo completo:
[Link] formulario HTML en htdocs/[Link].
[Link] datos con PHP.
[Link] en MySQL via phpMyAdmin.
[Link] resultados en [Link]
11
¿Por qué usar XAMPP con PHP?
● Rapidez: Pruebas inmediatas sin deploy.
● Control total: Acceso directo a configuraciones.
● Offline: Desarrollo sin conexión a internet.
Ejemplo de flujo completo:
[Link] formulario HTML en htdocs/[Link].
[Link] datos con PHP.
[Link] en MySQL via phpMyAdmin.
[Link] resultados en [Link]
12