IPAP
Instituto Provincial de la
Administración Pública
PROGRAMA DE FORMACIÓN GENERAL
PROGRAMA ALFABETIZACIÓN DIGITAL
CURSO VIRTUAL
Programación de
Aplicaciones Web
Docente: Lautaro Mallo
MÓDULO 3
Parte 1
Formularios Web
Programa Alfabetización Digital | Programación de Aplicaciones Web
1. Elementos para el Ingreso de Datos
Los formularios web son fundamentales para la interacción del usuario con una aplicación
web. Permiten recolectar datos de los usuarios de manera estructurada y enviarlos al
servidor para su procesamiento. proporciona una variedad de elementos de formulario
que facilitan la entrada de diferentes tipos de datos.
Etiquetas de Formularios Básicas
<form>: Esta etiqueta define el formulario en . Todos los elementos de formulario
deben estar contenidos dentro de esta etiqueta.
<form action="procesar.php" method="post"> <!-- Elementos del formulario -
-> </form>
<input>: Es la etiqueta más utilizada dentro de los formularios. Dependiendo del
atributo type, puede representar diferentes tipos de campos de entrada, como
texto, contraseñas, casillas de verificación, etc.
<input type="text" name="nombre">
<label>: Proporciona una descripción para un campo de entrada. Es una buena
práctica asociar etiquetas con sus correspondientes campos de entrada usando el
atributo for.
<label for="nombre">Nombre:</label> <input type="text" id="nombre"
name="nombre">
<textarea>: Utilizado para áreas de texto más grandes, como comentarios o
descripciones.
<textarea name="comentarios"></textarea>
<select>: Crea un menú desplegable.
<select name="pais"> <option value="argentina">Argentina</option> <option
value="brasil">Brasil</option> <option value="chile">Chile</option>
</select>
<button>: Define un botón que puede enviar el formulario.
<button type="submit">Enviar</button>
Tipos de Campos de Entrada
Texto (<input type="text">): Campo para ingresar texto simple.
Contraseña (<input type="password">): Campo para ingresar contraseñas, donde
los caracteres no son visibles.
Correo Electrónico (<input type="email">): Campo para ingresar direcciones de
correo electrónico.
Número (<input type="number">): Campo para ingresar números, con opciones
para definir rangos.
Teléfono (<input type="tel">): Campo para ingresar números de teléfono.
URL (<input type="url">): Campo para ingresar URLs.
Fecha (<input type="date">): Campo para ingresar fechas.
Programa Alfabetización Digital | Programación de Aplicaciones Web
Casilla de Verificación (<input type="checkbox">): Campo que permite
selecciones múltiples.
Botón de Radio (<input type="radio">): Campo para selecciones únicas dentro
de un grupo.
Ejemplo de Formulario Completo
<form action="procesar.php" method="post"> <label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br> <label for="email">Correo
Electrónico:</label> <input type="email" id="email" name="email"><br> <label
for="comentarios">Comentarios:</label> <textarea id="comentarios"
name="comentarios"></textarea><br> <label for="pais">País:</label> <select
id="pais" name="pais"> <option value="argentina">Argentina</option> <option
value="brasil">Brasil</option> <option value="chile">Chile</option> </select><br>
<label>Género:</label> <input type="radio" id="masculino" name="genero"
value="masculino"> <label for="masculino">Masculino</label> <input type="radio"
id="femenino" name="genero" value="femenino"> <label
for="femenino">Femenino</label><br> <input type="checkbox" id="suscripcion"
name="suscripcion" value="si"> <label for="suscripcion">Suscribirse al
boletín</label><br> <button type="submit">Enviar</button> </form>
En resumen, los elementos para el ingreso de datos son la base para crear formularios
interactivos y funcionales. Proporcionan una amplia gama de opciones para recolectar
diferentes tipos de información del usuario de manera eficiente y organizada.
2. Envío de Formulario por Método GET y POST
En , los formularios se pueden enviar al servidor utilizando dos métodos principales: GET y
POST. Ambos métodos tienen sus características y usos específicos.
Método GET
El método GET envía los datos del formulario anexándolos a la URL del script de destino,
en forma de pares clave=valor. Este método es ideal para solicitudes idempotentes,
donde los datos no modifican el estado del servidor y no son sensibles.
Características del Método GET:
Visibilidad de los Datos: Los datos se incluyen en la URL, lo que los hace visibles
en la barra de direcciones del navegador.
Límite de Longitud: La cantidad de datos que se pueden enviar está limitada por
la longitud máxima de la URL, que generalmente es de alrededor de 2048
caracteres.
Caché y Marcadores: Las URLs generadas con GET se pueden almacenar en
caché y marcar, lo que facilita la reutilización.
Idempotencia: GET se usa para operaciones que pueden repetirse sin efectos
secundarios, como búsquedas y consultas.
Ejemplo de Formulario con GET:
<form action="buscar.php" method="get"> <label for="query">Buscar:</label> <input
type="text" id="query" name="query"> <button type="submit">Buscar</button>
</form>
En este ejemplo, al enviar el formulario, los datos se anexan a la URL
como buscar.php?query=valor.
Programa Alfabetización Digital | Programación de Aplicaciones Web
Método POST
El método POST envía los datos del formulario en el cuerpo de la solicitud HTTP, lo que
los hace más adecuados para el envío de datos sensibles y grandes volúmenes de
información.
Características del Método POST:
Seguridad: Aunque no cifra los datos, los datos no se exponen en la URL, lo que
ofrece una mayor privacidad.
Sin Límite de Tamaño: Permite el envío de grandes cantidades de datos, como
archivos y texto extenso.
No Cacheable: Las solicitudes POST no se almacenan en caché y no se pueden
marcar, lo que las hace más seguras para operaciones que alteran el estado del
servidor.
Uso Común: POST es el método preferido para enviar datos que deben ser
procesados o almacenados en el servidor, como formularios de registro y
encuestas.
Ejemplo de Formulario con POST:
<form action="procesar.php" method="post"> <label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"> <button
type="submit">Enviar</button> </form>
En este ejemplo, los datos del formulario se envían en el cuerpo de la solicitud HTTP
a procesar.php.
Comparación entre GET y POST:
Visibilidad de Datos: GET expone datos en la URL, POST los oculta en el cuerpo
de la solicitud.
Tamaño de Datos: GET tiene limitaciones de tamaño debido a la longitud de la
URL, mientras que POST no tiene tales limitaciones.
Uso Típico: GET se usa para solicitudes de lectura y consultas, POST se usa para
operaciones de escritura y envío de datos sensibles.
Caché: Las solicitudes GET pueden almacenarse en caché, POST no.
En resumen, elegir entre GET y POST depende de la naturaleza de los datos y la
operación que se esté realizando. GET es adecuado para consultas y solicitudes de datos
que no necesitan ser ocultados, mientras que POST es preferible para el envío de datos
grandes o sensibles que requieren mayor privacidad y seguridad.
3. Atributo Action
El atributo action en la etiqueta <form> especifica la URL a la que se enviarán los datos
del formulario cuando se envíe. Es un componente crucial para el procesamiento de
formularios, ya que determina el destino de la solicitud.
Sintaxis del Atributo action:
<form action="URL_destino" method="metodo"> <!-- Elementos del formulario -->
</form>
El valor del atributo action puede ser una URL absoluta (completa) o relativa (parcial).
URL Absoluta:
Programa Alfabetización Digital | Programación de Aplicaciones Web
<form action="https://www.example.com/procesar.php" method="post"> <!-- Elementos
del formulario --> </form>
En este caso, los datos del formulario se enviarán
a https://www.example.com/procesar.php.
URL Relativa:
<form action="procesar.php" method="post"> <!-- Elementos del formulario -->
</form>
Aquí, los datos del formulario se enviarán a procesar.php en el mismo dominio donde se
encuentra el formulario.
Uso del Atributo action en Diferentes Contextos
Envío a la Misma Página: A veces, se puede querer procesar el formulario en la misma
página en la que se encuentra el formulario. Esto se puede hacer dejando el
atributo action vacío o usando $_SERVER['PHP_SELF'] en CÓDIGO PHP: para indicar la
misma página.
<form action="" method="post"> <!-- Elementos del formulario --> </form>
O en CÓDIGO PHP::
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <!-- Elementos
del formulario --> </form>
Envío a una Página Diferente: Cuando el procesamiento de datos se realiza en una
página separada, se especifica la URL de esa página en el atributo action.
<form action="procesar_datos.php" method="post"> <!-- Elementos del formulario --
> </form>
Esto es útil para separar la lógica de presentación de la lógica de procesamiento.
Consideraciones de Seguridad
Al definir el atributo action, es importante considerar aspectos de seguridad para prevenir
ataques como la inyección de scripts y la falsificación de solicitudes entre sitios (CSRF).
Algunas buenas prácticas incluyen:
Validar y Sanitizar Datos: Asegúrese de que los datos enviados a la URL
especificada en action sean validados y sanitizados en el servidor para prevenir la
ejecución de scripts maliciosos.
Usar HTTPS: Enviar datos a través de HTTPS en lugar de HTTP para asegurar
que la información se transmita de manera segura.
Tokens CSRF: Implementar tokens CSRF para proteger contra ataques de
falsificación de solicitudes.
Ejemplo Completo de Formulario con Atributo action:
Programa Alfabetización Digital | Programación de Aplicaciones Web
<form action="procesar.php" method="post"> <label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"> <button
type="submit">Enviar</button> </form>
En este ejemplo, el formulario se envía a procesar.php usando el método POST cuando se
hace clic en el botón "Enviar".
En resumen, el atributo action es esencial para definir el destino de los datos del
formulario. Elegir la URL adecuada y considerar la seguridad del formulario son pasos
cruciales para asegurar un procesamiento de datos efectivo y seguro.
4. Etiqueta Input:
La etiqueta <input> es una de las más versátiles y esenciales en para la creación de
formularios. Permite a los usuarios ingresar una variedad de datos a través de diferentes
tipos de controles de entrada.
Sintaxis Básica de <input>:
<input type="tipo" name="nombre" valor="valor">
El atributo type define el tipo de entrada, name identifica el campo para su procesamiento
en el servidor, y value establece un valor predeterminado.
Tipos Comunes de <input>
Texto (<input type="text">): Permite la entrada de texto simple.
<label for="nombre">Nombre:</label> <input type="text" id="nombre"
name="nombre">
Contraseña (<input type="password">): Oculta los caracteres ingresados para
mayor privacidad.
<label for="contrasena">Contraseña:</label> <input type="password"
id="contrasena" name="contrasena">
Correo Electrónico (<input type="email">): Valida que el formato ingresado sea
un correo electrónico.
<label for="email">Correo Electrónico:</label> <input type="email"
id="email" name="email">
Número (<input type="number">): Permite ingresar números y puede incluir
atributos como min, max y step.
<label for="edad">Edad:</label> <input type="number" id="edad" name="edad"
min="0" max="100" step="1">
Teléfono (<input type="tel">): Diseñado para números de teléfono, aunque no
valida el formato.
Programa Alfabetización Digital | Programación de Aplicaciones Web
<label for="telefono">Teléfono:</label> <input type="tel" id="telefono"
name="telefono">
URL (<input type="url">): Valida que el formato ingresado sea una URL.
<label for="website">Sitio Web:</label> <input type="url" id="website"
name="website">
Fecha (<input type="date">): Proporciona un selector de fechas en navegadores
compatibles.
<label for="fecha">Fecha de Nacimiento:</label> <input type="date"
id="fecha" name="fecha">
Casilla de Verificación (<input type="checkbox">): Permite selecciones múltiples.
<label for="suscripcion">Suscribirse:</label> <input type="checkbox"
id="suscripcion" name="suscripcion" value="si">
Botón de Radio (<input type="radio">): Permite una selección única dentro de
un grupo.
<label>Género:</label> <input type="radio" id="masculino" name="genero"
value="masculino"> <label for="masculino">Masculino</label> <input
type="radio" id="femenino" name="genero" value="femenino"> <label
for="femenino">Femenino</label>
Archivo (<input type="file">): Permite la selección de archivos para subir.
<label for="archivo">Subir Archivo:</label> <input type="file"
id="archivo" name="archivo">
Atributos Comunes de <input>
name: Identifica el campo en el procesamiento del formulario.
<input type="text" name="usuario">
value: Define un valor predeterminado para el campo.
<input type="text" name="usuario" value="Juan">
placeholder: Muestra un texto de sugerencia cuando el campo está vacío.
<input type="text" name="usuario" placeholder="Ingrese su nombre">
required: Indica que el campo es obligatorio.
<input type="text" name="usuario" required>
readonly: Hace que el campo sea de solo lectura.
Programa Alfabetización Digital | Programación de Aplicaciones Web
<input type="text" name="usuario" value="Juan" readonly>
disabled: Deshabilita el campo, haciéndolo no editable y no enviable.
<input type="text" name="usuario" disabled>
Ejemplo Completo de Formulario con Diversos Tipos de <input>
<form action="procesar.php" method="post"> <label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required><br> <label
for="contrasena">Contraseña:</label> <input type="password" id="contrasena"
name="contrasena" required><br> <label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email"><br> <label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" min="0" max="100" step="1"><br> <label
for="fecha">Fecha de Nacimiento:</label> <input type="date" id="fecha"
name="fecha"><br> <label for="archivo">Subir Archivo:</label> <input type="file"
id="archivo" name="archivo"><br> <label>Género:</label> <input type="radio"
id="masculino" name="genero" value="masculino"> <label
for="masculino">Masculino</label> <input type="radio" id="femenino" name="genero"
value="femenino"> <label for="femenino">Femenino</label><br> <label
for="suscripcion">Suscribirse:</label> <input type="checkbox" id="suscripcion"
name="suscripcion" value="si"><br> <button type="submit">Enviar</button> </form>
En resumen, la etiqueta <input> es extremadamente versátil y esencial para recolectar
datos en formularios web. Ofrece una amplia variedad de tipos de entrada y atributos para
personalizar y controlar la forma en que los usuarios interactúan con los formularios.
5. Atributo Type
El atributo type en la etiqueta <input> define el tipo de control de entrada que se mostrará
en el formulario. Este atributo es fundamental para especificar cómo se capturarán los
datos del usuario. Cada tipo de input ofrece una funcionalidad única y se utiliza en
diferentes contextos según el tipo de datos que se necesitan recolectar.
Tipos de Atributo type en <input>
Texto (text): El tipo de entrada más común para capturar texto alfanumérico.
<input type="text" name="nombre">
Contraseña (password): Oculta los caracteres ingresados, utilizado para entradas
de contraseña.
<input type="password" name="contrasena">
Correo Electrónico (email): Valida que el formato ingresado sea un correo
electrónico.
<input type="email" name="correo">
Número (number): Permite ingresar solo números, con opciones para definir rangos
y pasos.
<input type="number" name="edad" min="0" max="100" step="1">
Programa Alfabetización Digital | Programación de Aplicaciones Web
Teléfono (tel): Diseñado para números de teléfono, aunque no valida el formato.
<input type="tel" name="telefono">
URL (url): Valida que el formato ingresado sea una URL.
<input type="url" name="website">
Fecha (date): Proporciona un selector de fechas en navegadores compatibles.
<input type="date" name="fecha_nacimiento">
Casilla de Verificación (checkbox): Permite selecciones múltiples.
<input type="checkbox" name="acepto_terminos">
Botón de Radio (radio): Permite una selección única dentro de un grupo.
<input type="radio" name="genero" value="masculino"> <input type="radio"
name="genero" value="femenino">
Archivo (file): Permite la selección de archivos para subir.
<input type="file" name="documento">
Color (color): Muestra un selector de color.
<input type="color" name="color_favorito">
Rango (range): Muestra un control deslizante para seleccionar un valor dentro de
un rango.
<input type="range" name="volumen" min="0" max="100">
Fecha y Hora Local (datetime-local): Permite seleccionar una fecha y hora local.
<input type="datetime-local" name="fecha_hora_evento">
Oculto (hidden): No se muestra al usuario, pero el valor se envía con el formulario.
<input type="hidden" name="token" value="abc123">
Botón (button): Crea un botón que no envía el formulario por defecto.
<input type="button" value="Clic aquí">
Botón de Envío (submit): Crea un botón que envía el formulario.
<input type="submit" value="Enviar">
Botón de Restablecer (reset): Crea un botón que restablece todos los campos
del formulario a sus valores predeterminados.
<input type="reset" value="Restablecer">
Programa Alfabetización Digital | Programación de Aplicaciones Web
Ejemplo de Formulario con Varios Tipos de input
<form action="procesar.php" method="post"> <label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br> <label for="email">Correo
Electrónico:</label> <input type="email" id="email" name="email"><br> <label
for="edad">Edad:</label> <input type="number" id="edad" name="edad" min="0"
max="100" step="1"><br> <label for="telefono">Teléfono:</label> <input type="tel"
id="telefono" name="telefono"><br> <label for="fecha_nacimiento">Fecha de
Nacimiento:</label> <input type="date" id="fecha_nacimiento"
name="fecha_nacimiento"><br> <label for="documento">Subir Documento:</label>
<input type="file" id="documento" name="documento"><br> <label
for="genero">Género:</label> <input type="radio" id="masculino" name="genero"
value="masculino"> <label for="masculino">Masculino</label> <input type="radio"
id="femenino" name="genero" value="femenino"> <label
for="femenino">Femenino</label><br> <label for="acepto_terminos">Acepto los
términos y condiciones:</label> <input type="checkbox" id="acepto_terminos"
name="acepto_terminos"><br> <button type="submit">Enviar</button> </form>
Importancia del Atributo type
El atributo type en la etiqueta <input> es fundamental para definir cómo se captura y
procesa la información ingresada por el usuario en un formulario web. Al especificar el tipo
de entrada, se mejora la experiencia del usuario y se facilita la validación de los datos. A
continuación, se detallan algunas de las razones clave por las que el atributo type es tan
importante:
1. Mejorar la Experiencia del Usuario
Cada tipo de entrada proporciona un control de interfaz de usuario específico que se
adapta al tipo de datos que se espera. Por ejemplo:
type="text": Muestra un campo de texto simple para ingresar datos alfanuméricos.
type="email": Proporciona un teclado especializado en dispositivos móviles con
acceso rápido a caracteres comunes en direcciones de correo electrónico (como
"@" y ".com").
type="number": Permite ingresar números con teclados numéricos en dispositivos
móviles, mejorando la usabilidad.
type="date": Muestra un selector de fechas que facilita la selección de una fecha
válida sin necesidad de ingresar manualmente.
2. Facilitar la Validación del Lado del Cliente
El navegador puede validar automáticamente los datos ingresados según el tipo de
entrada. Esto reduce la carga en el servidor y mejora la calidad de los datos ingresados.
type="email": El navegador verifica que el formato de la entrada sea una dirección
de correo electrónico válida.
type="url": El navegador verifica que la entrada sea una URL válida.
type="number": El navegador asegura que solo se ingresen números y puede
validar rangos especificados por los atributos min, max y step.
3. Mejorar la Seguridad
Al especificar el tipo de datos esperado, se puede reducir el riesgo de ataques de
inyección y otros tipos de manipulaciones maliciosas. Por ejemplo, los campos de entrada
Programa Alfabetización Digital | Programación de Aplicaciones Web
para contraseñas (type="password") ocultan los caracteres ingresados, protegiendo así la
información sensible del usuario.
4. Optimización para Dispositivos Móviles
Muchos tipos de entrada están optimizados para dispositivos móviles, proporcionando
teclados específicos y otros elementos de interfaz de usuario que facilitan la entrada de
datos.
type="tel": Muestra un teclado numérico en dispositivos móviles para la entrada
de números de teléfono.
type="datetime-local": Proporciona un selector de fecha y hora en dispositivos
móviles, facilitando la entrada precisa de fechas y horas.
5. Accesibilidad
El uso correcto de los tipos de entrada mejora la accesibilidad del formulario, ayudando a
usuarios con discapacidades a interactuar de manera más efectiva con el contenido.
type="range": El control deslizante puede ser utilizado por usuarios que prefieren
un método visual para seleccionar valores dentro de un rango.
type="checkbox" y type="radio": Estos controles permiten a los usuarios
seleccionar opciones de manera intuitiva, especialmente cuando se usan con
etiquetas descriptivas.
Ejemplos Adicionales
Ejemplo de Validación Automática:
Código html:
<form action="procesar.php" method="post"> <label for="correo">Correo
Electrónico:</label> <input type="email" id="correo" name="correo" required><br>
<label for="url">Sitio
Web:</label> <input type="url" id="url" name="url" required><br> <label for="edad
">Edad:</label> <input type="number" id="edad" name="edad" min="0" max="120" requ
ired><br> <button type="submit">Enviar</button> </form>
En este ejemplo, el navegador se encargará de validar que el correo electrónico tenga un
formato válido, que la URL sea correcta y que la edad esté dentro del rango especificado.
Ejemplo de Campos Optimizados para Móviles:
Código html:
<form action="procesar.php" method="post"> <label for="telefono">Número de
Teléfono:</label> <input type="tel" id="telefono" name="telefono"><br> <label for
="cumpleaños">Fecha de
Cumpleaños:</label> <input type="date" id="cumpleaños" name="cumpleaños"><br> <bu
tton type="submit">Enviar</button> </form>
En dispositivos móviles, los campos de teléfono y fecha presentarán interfaces de usuario
específicas que facilitan la entrada de estos datos.
En resumen, el atributo type en la etiqueta <input> es esencial para definir cómo se
capturan y validan los datos en un formulario web. Su correcta implementación mejora la
experiencia del usuario, facilita la validación y optimiza la seguridad y accesibilidad del
formulario.
Programa Alfabetización Digital | Programación de Aplicaciones Web
6. Obtención de los Datos desde PHP
Una vez que los datos del formulario se han enviado al servidor, CÓDIGO PHP:
proporciona mecanismos sencillos y eficientes para acceder y procesar esta información.
La forma en que se obtienen los datos depende del método utilizado para enviar el
formulario: GET o POST. A continuación, se detalla cómo acceder a los datos y algunas
consideraciones importantes.
Acceso a los Datos Enviados con el Método GET
Los datos enviados mediante el método GET se anexan a la URL en forma de
pares clave=valor. Estos datos se pueden acceder a través de la superglobal $_GET en
CÓDIGO PHP:.
Ejemplo de Envío con GET:
Código html:
<form action="procesar.php" method="get"> <label for="nombre">Nombre:</label> <in
put type="text" id="nombre" name="nombre"> <button type="submit">Enviar</button>
</form>
Si el usuario ingresa "Juan" en el campo de nombre y envía el formulario, la URL será algo
como procesar.php?nombre=Juan.
Acceso a los Datos en CÓDIGO PHP::
Código php:
<?php if (isset($_GET['nombre'])) { $nombre = $_GET['nombre']; echo "Hola,
" . Htmlspecialchars($nombre) . "!"; } ?>
En este ejemplo, $_GET['nombre'] obtiene el valor del campo de entrada nombre y lo
procesa. Htmlspecialchars() se utiliza para evitar problemas de inyección de CÓDIGO
HTML:.
Acceso a los Datos Enviados con el Método POST
Los datos enviados mediante el método POST se envían en el cuerpo de la solicitud
HTTP. Estos datos son accesibles en CÓDIGO PHP: a través de la superglobal $_POST.
Ejemplo de Envío con POST:
Código html:
<form action="procesar.php" method="post"> <label for="nombre">Nombre:</label> <i
nput type="text" id="nombre" name="nombre"> <button type="submit">Enviar</button>
</form>
En este caso, los datos no se anexan a la URL sino que se envían en el cuerpo de la
solicitud.
Acceso a los Datos en CÓDIGO PHP::
Código php:
<?php if (isset($_POST['nombre'])) { $nombre = $_POST['nombre']; echo "Hola,
" . Htmlspecialchars($nombre) . "!"; } ?>
Programa Alfabetización Digital | Programación de Aplicaciones Web
Aquí, $_POST['nombre'] obtiene el valor del campo de entrada nombre enviado mediante
POST.
Acceso a los Datos de Archivos Subidos
Cuando se suben archivos a través de un formulario, se utiliza el
atributo enctype="multipart/form-data" y se accede a los archivos mediante la
superglobal $_FILES.
Ejemplo de Formulario para Subir Archivos:
Código html:
<form action="procesar.php" method="post" enctype="multipart/form-
data"> <label for="archivo">Subir
Archivo:</label> <input type="file" id="archivo" name="archivo"> <button type="su
bmit">Subir</button> </form>
Acceso a los Datos del Archivo en CÓDIGO PHP::
Código php:
<?php if (isset($_FILES['archivo']))
{ $nombreArchivo = $_FILES['archivo']['name']; $tipoArchivo = $_FILES['archivo'][
'type']; $tamañoArchivo = $_FILES['archivo']['size']; $rutaTemporal = $_FILES['ar
chivo']['tmp_name']; $errorArchivo = $_FILES['archivo']['error']; // Validar y
mover el archivo subido if ($errorArchivo == UPLOAD_ERR_OK)
{ $directorioDestino = 'uploads/'; $rutaDestino = $directorioDestino . basename($
nombreArchivo); if (move_uploaded_file($rutaTemporal, $rutaDestino)) { echo "El
archivo " . Htmlspecialchars($nombreArchivo) . " ha sido subido correctamente.";
} else { echo "Hubo un error al subir el archivo."; } } else { echo "Error al
subir el archivo: " . $errorArchivo; } } ?>
En este ejemplo, $_FILES['archivo'] proporciona información sobre el archivo
subido. move_uploaded_file() se utiliza para mover el archivo desde su ubicación
temporal a un directorio específico en el servidor.
Acceso a los Datos mediante Arrays de Formulario
Cuando se envían múltiples valores con el mismo nombre de campo, se pueden manejar
como arrays en CÓDIGO PHP:.
Ejemplo de Formulario con Arrays:
Código html:
<form action="procesar.php" method="post"> <label for="opcion1">Opción
1:</label> <input type="checkbox" id="opcion1" name="opciones[]" value="opcion1">
<br> <label for="opcion2">Opción
2:</label> <input type="checkbox" id="opcion2" name="opciones[]" value="opcion2">
<br> <button type="submit">Enviar</button> </form>
Acceso a los Datos en CÓDIGO PHP::
Código php:
Programa Alfabetización Digital | Programación de Aplicaciones Web
<?php if (isset($_POST['opciones']))
{ $opciones = $_POST['opciones']; foreach ($opciones as $opcion)
{ echo Htmlspecialchars($opcion) . "<br>"; } } ?>
En este ejemplo, $_POST['opciones'] es un array que contiene los valores de todas las
casillas de verificación seleccionadas.
Consideraciones de Seguridad
Al procesar datos de formularios, es crucial validar y sanitizar los datos para proteger
contra ataques como inyección de SQL y cross-site scripting (XSS). Algunas prácticas
recomendadas incluyen:
Validación de Datos: Verificar que los datos cumplan con los formatos esperados
(por ejemplo, correos electrónicos, números de teléfono, etc.).
Sanitización de Datos: Utilizar funciones
como Htmlspecialchars(), filter_var(), y mysqli_real_escape_string() para
limpiar los datos antes de usarlos en el servidor.
Tokens CSRF: Implementar tokens de autenticidad para proteger contra
falsificación de solicitudes entre sitios (CSRF).
En resumen, CÓDIGO PHP: proporciona herramientas poderosas y flexibles para obtener
y procesar datos de formularios. La comprensión de cómo acceder y manipular estos
datos, junto con la implementación de prácticas de seguridad adecuadas, es fundamental
para el desarrollo de aplicaciones web robustas y seguras.
