creo sutancialmente que en la edición del video recortaron la parte del checkbox y no quedo en esta clase. :P
Checkbox, esta en la clase pasada "Tipos de Inputs"
En la clase no esta la parte donde se explica el input de tipo checkbox.
Lo bueno que se vio el código y así ya solo era seguir y entender lo que hacia.
Comparto mi apunte de las 2 clases donde vimos tipos de inputs.
Index
<!DOCTYPEhtml><htmllang="es"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>iJCode - Tipos de Inputs</title></head><body><!-- Tipos de Inputs - Mandados al servidor --><formaction="./server.php"method="POST"enctype="multipart/form-data"><!-- Input normal --><labelfor="name">Ingrese su nombre:</label><inputtype="text"name="name"id="name"/><br><br><!-- Input como 'array' --><label>Ingresa el nombre de las personas</label><inputtype="text"name="person[]"/><inputtype="text"name="person[]"/><inputtype="text"name="person[]"/><br><br><!-- Input como 'array asociativo' --><labelfor="name">Ingrese sus datos:</label><br><labelfor="nameUser">Nombre:</label><inputtype="text"name="user[name]"id="nameUser"/><br><labelfor="ageUser">edad:</label><inputtype="number"name="user[age]"id="ageUser"/><br><labelfor="teamUser">Equipo Favorito:</label><inputtype="text"name="user[team]"id="teamUser"/><br><br><!-- Input de tipo checkbox --><label>Selecciona las materias que llevas este semestre:</label><labelfor="mate">Matematicas</label><inputtype="checkbox"name="materia1"id="mate"value="Matematicas"/><labelfor="progra">Programación Funcional</label><inputtype="checkbox"name="materia2"id="progra"value="Programción funcional"/><labelfor="movil">Desarrollo móvil</label><inputtype="checkbox"name="materia3"id="movil"value="Desarrollo móvil"/><br><br><!-- Input de tipo radio --><label>Selecciona tu sexo:</label><labelfor="h">Hombre</label><inputtype="radio"name="sexo"id="h"value="hombre"><labelfor="m">Mujer</label><inputtype="radio"name="sexo"id="m"value="mujer"><br><br><!-- Input de tipo 'file' multiple --><labelfor="files">Carga tus archivos</label><inputtype="file"multiplename="files[]"id="files"/><br><br><buttontype="submit">Enviar Formulario</button></form></body></html>
Server
<?php
// Obteniendo los datos pasados por POST
echo("<p>¿Qué contiene POST?</p>");
echo("<pre>");
print_r($_POST);
/*
Ejemplo de salida:
Array
(
[name] => Joel
[person] => Array
(
[0] => Joel2
[1] => Julieta
[2] => Pepito
)
[user] => Array
(
[name] => Pepe
[age] => 36
[team] => Pumas
)
[materia1] => Matematicas
[materia2] => Programción funcional
[sexo] => hombre
)
*/
echo("</pre>");
// Obteniendo los valores de cada uno
// Input normal
echo("<p>¿Qué valor mando el input normal?</p>");
echo("<pre>");
var_dump($_POST["name"]); // string(4) "Joel"
echo("</pre>");
// Input como 'array'
echo("<p>¿Qué valor mando el input de tipo array?</p>");
echo("<pre>");
var_dump($_POST["person"]);
/*
Salida de ejemplo:
array(3) {
[0]=>
string(5) "Joel2"
[1]=>
string(7) "Julieta"
[2]=>
string(6) "Pepito"
}
*/
echo("</pre>");
// Input como 'array asociativo'
echo("<p>¿Qué valor mando el input de tipo array asociativo?</p>");
echo("<pre>");
var_dump($_POST["user"]);
/*
Salida de ejemplo:
array(3) {
["name"]=>
string(4) "Pepe"
["age"]=>
string(2) "36"
["team"]=>
string(5) "Pumas"
}
*/
echo("</pre>");
// Input de tipo 'checkbox'
echo("<p>¿Qué valores mandaron los input de tipo checkbox?</p>");
echo("<pre>");
var_dump($_POST['materia1']);
var_dump($_POST['materia2']);
var_dump($_POST['materia3']);
/*
string(11) "Matematicas"
string(22) "Programción funcional"
Undefined index: materia3 in C:\xampp\htdocs\integracion-php-con-html\new\server.php on line 85 NULL
*/
echo("</pre>");
// Input de tipo 'radio'
echo("<p>¿Qué valor mando el input de tipo radio?</p>");
echo("<pre>");
var_dump($_POST['sexo']); // string(6) "hombre"
echo("</pre>");
// Input de tipo 'file' mutiple
echo("<p>¿Qué valor mando el input de tipo file?</p>");
echo("<pre>");
var_dump($_FILES['files']);
/*
array(5) {
["name"]=>
array(2) {
[0]=>
string(9) "firma.png"
[1]=>
string(9) "fondo.jpg"
}
["type"]=>
array(2) {
[0]=>
string(9) "image/png"
[1]=>
string(10) "image/jpeg"
}
["tmp_name"]=>
array(2) {
[0]=>
string(24) "C:\xampp\tmp\phpA37E.tmp"
[1]=>
string(24) "C:\xampp\tmp\phpA38F.tmp"
}
["error"]=>
array(2) {
[0]=>
int(0)
[1]=>
int(0)
}
["size"]=>
array(2) {
[0]=>
int(4671)
[1]=>
int(1426311)
}
}
*/
echo("</pre>");
Resultado
Adicionalmente se podría validar si se envío (selecciono) por el método POST (en este caso), un determinado checkbox.
// Validar si algún input de tipo 'checkbox' fue seleccionadoif(isset($_POST['materia3'])){var_dump($_POST['materia3']);//string(17) "Desarrollo móvil"}
Igual podría emplearse con el operador ternario para poner un valor en caso de que no...
Saludos!
¡Hola! Gracias por avisarme que no se ve esa parte del código 🤦. Ya se lo reporto al team para que aparezca 🏃
Guardar inputs de un checkbox en un mismo arreglo 😉
index.php
<!--InputCheckbox--><!--Para guardar los inputs en un mismo array, debemos establecer el valor de name como un arreglo --><p>Colores favoritos</p><label><input type="checkbox" name="color[color_1]" value="rojo">Rojo</label><br><label><input type="checkbox" name="color[color_2]" value="verde">Verde</label><br><label><input type="checkbox" name="color[color_3]" value="azul">Azul</label><br>
server.php
<?php
// Inpur Checkbox// Debugeamos el array colorecho "<pre>";print_r($_POST["color"]);echo "</pre>";// Mostramos los colores recorriendo el array con foreachecho "Mis colores favoritos son: ";foreach($_POST["color"]as $color){ echo "\n$color";}?>
Genio!!!! hace una semana estoy tomando los curso de backend PHP, aunq tenga algo de conocimiento sobre PHP, siempre se aprende algo nuevo y con este docente que la verdad explica reee bien y con ejemplos puntuales ya tengo idea de como encarar a varios proyecto que tengo y mas con el tema de subir multiples archivos... la verdad gracias!!!
Interezante me parecio el de enviar multiples archivos.
.
Ya me estoy imaginando la complejidad de sus validaciones 😒
Por lo general estos envios multiples deben filtrar solo un tipo de archivos (ejemplo, solo fotos, o solo pdfs).
el q me parecio interesante son los array asociativos
hola ¿ como cambiaría el código para subir todas estas fotos a la carpeta images como en la clase pasada?
cómo hago para eliminar un archivo de 3 que subí cuando tengo arreglo asociativo multiples?
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Tipos de input</title></head><body><form action="server.php" method="post" enctype="multipart/form-data"><!--Input simple
<label for="nombre">Nombre:</label><input type="text" name="nombre" id="nombre">--><!--Arreglos<label>Personas:</label><input type="text" name="personas[]"><input type="text" name="personas[]"><input type="text" name="personas[]">--><!--Arreglos asociativos
<label>Nombre de la persona:</label><input type="text" name="persona[nombre]"><label>Correo de la persona:</label><input type="email" name="persona[email]"><label>Edad de la persona:</label><input type="number" name="persona[edad]">--><!--Checkbox<input type="checkbox" name="list1"><input type="checkbox" name="list2" value="Este valor fue clicado"><input type="checkbox" name="list3">--><!--Radios<label for="mexico">México</label><input type="radio" name="pais" value="México" id="mexico"><label for="colombia">Colombia</label><input type="radio" name="pais" value="Colombia" id="colombia"><label for="peru">Perú</label><input type="radio" name="pais" value="Perú" id="peru">--><!--Múltiples archivos--><label for="galeria">Carga tus imágenes:</label><input type="file" multiple name="galeria[]" id="galeria"><button type="submit">Mandar formulario</button></form></body></html>
Tipos de inputs
¿Qué son los inputs?
Los "inputs" (entradas) en el contexto de desarrollo web se refieren a elementos interactivos en formularios HTML que permiten a los usuarios ingresar y proporcionar información. Los elementos de entrada son componentes esenciales para crear interacción en las páginas web, ya que permiten a los usuarios enviar datos al servidor y participar en diversas actividades en línea. Los inputs se utilizan para recopilar diferentes tipos de información, como texto, números, selecciones y archivos, y son fundamentales para la interacción usuario-sitio en aplicaciones web y formularios en línea.
El atributo name y su importancia
El atributo “name” identificara a tu campo en una solicitud de PHP.
<inputtype="text"**name**="Nombre"/>
Tipos de inputs que se pueden enviar
En HTML, existen varios tipos de elementos <input> que permiten a los usuarios ingresar datos en formularios web. Cada tipo de entrada se utiliza para recopilar un tipo específico de información.
Input simple
En este input se puede enviar un único campo con un único valor
<inputtype="text"**name**="Nombre"/>
Arreglos
Podemos usar varios inputs para generar un arreglo
Podemos usar inputs de tipo radio para mandar al servidor, estos crean botones de opción que permiten a los usuarios seleccionar una opción de un grupo
Permite a los usuarios cargar archivos desde su dispositivo.
<inputtype="file"name="archivo">
Submit
Crea un botón para enviar el formulario
<inputtype="submit"value="Enviar">
Reset
Crea un botón para restablecer el formulario a sus valores predeterminados
<inputtype="reset"value="Restablecer">
Estos son solo algunos ejemplos de los tipos de elementos <input> disponibles en HTML. Cada tipo de entrada se adapta a un propósito específico y permite a los usuarios proporcionar diferentes tipos de datos en formularios web.
<?php// Truco para debugear y ver lo que llega por POSTecho"<pre>";var_dump($_POST);// Recupera la información que se envía por POSTvar_dump($_FILES);// Recupera la información que se envía por FILESecho"</pre>";?>
genial, son todos bknes :)
Me dio por experimentar qué pasaba si al enviar múltiples archivos, lo hacía con un arreglo asociativo y vi que solamente queda el último archivo en la cola.
<labelfor="galeria">Carga tus imágenes: </label><inputtype="file"multiplename="galeria['archivo']"id="galeria"enctype="multipart/form-data"/>
Esto se debe a que, como estamos enviando información al mismo subíndice del arreglo, los valores se sobreescriben y quedará con solamente la información del último archivo que esté en la cola.
