Otros tipos de inputs

Clase 16 de 24 • Curso de PHP: Integración con HTML

Clase anteriorSiguiente clase

Daniela Betancur

student•

creo sutancialmente que en la edición del video recortaron la parte del checkbox y no quedo en esta clase. :P

Alfredo Olmedo

student•

Checkbox, esta en la clase pasada "Tipos de Inputs"

Joel Dominguez Merino

student•

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

<!DOCTYPE html>
<html lang="es">
<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>iJCode - Tipos de Inputs</title>
</head>
<body>
  <!-- Tipos de Inputs - Mandados al servidor -->
  <form action="./server.php" method="POST" enctype="multipart/form-data">
    <!-- Input normal -->
    <label for="name">Ingrese su nombre:</label>
    <input type="text" name="name" id="name"/>
    <br>
    <br>

    <!-- Input como 'array' -->    
    <label>Ingresa el nombre de las personas</label>
    <input type="text" name="person[]"/>
    <input type="text" name="person[]"/>
    <input type="text" name="person[]"/>
    <br>
    <br>

    <!-- Input como 'array asociativo' -->    
    <label for="name">Ingrese sus datos:</label>
    <br>
    <label for="nameUser">Nombre:</label>
    <input type="text" name="user[name]" id="nameUser"/>
    <br>
    <label for="ageUser">edad:</label>
    <input type="number" name="user[age]" id="ageUser"/>
    <br>
    <label for="teamUser">Equipo Favorito:</label>
    <input type="text" name="user[team]" id="teamUser"/>
    <br>
    <br>

    <!-- Input de tipo checkbox -->
    <label>Selecciona las materias que llevas este semestre:</label>
    <label for="mate">Matematicas</label>
    <input type="checkbox" name="materia1" id="mate" value="Matematicas"/>
    <label for="progra">Programación Funcional</label>
    <input type="checkbox" name="materia2" id="progra" value="Programción funcional"/>
    <label for="movil">Desarrollo móvil</label>
    <input type="checkbox" name="materia3" id="movil" value="Desarrollo móvil"/>
    <br>
    <br>

    <!-- Input de tipo radio -->
    <label>Selecciona tu sexo:</label>
    <label for="h">Hombre</label>
    <input type="radio" name="sexo" id="h" value="hombre">
    <label for="m">Mujer</label>
    <input type="radio" name="sexo" id="m" value="mujer">
    <br>
    <br>

    <!-- Input de tipo 'file' multiple -->
    <label for="files">Carga tus archivos</label>
    <input type="file" multiple name="files[]" id="files"/>
    <br>
    <br>

    <button type="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

Joel Dominguez Merino

student•

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 seleccionado
if(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!

Carlos Eduardo Gomez García

teacher•

¡Hola! Gracias por avisarme que no se ve esa parte del código 🤦. Ya se lo reporto al team para que aparezca 🏃

Aka SinssChoss

student•

Guardar inputs de un checkbox en un mismo arreglo 😉

index.php

<!-- Input Checkbox -->
<!-- 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 color
echo "<pre>";
print_r($_POST["color"]);  
echo "</pre>";
// Mostramos los colores recorriendo el array con foreach
echo "Mis colores favoritos son: ";
foreach($_POST["color"] as $color){
    echo "\n$color";
}
?>

GONZALO FABIAN VILTE

student•

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!!!

Kenneth Angulo L

student•

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).

jaime sandoval

student•

el q me parecio interesante son los array asociativos

Laura Juliana Sierra Suarez

student•

hola ¿ como cambiaría el código para subir todas estas fotos a la carpeta images como en la clase pasada?

Eduardo Huanca

student•

cómo hago para eliminar un archivo de 3 que subí cuando tengo arreglo asociativo multiples?

Wilman Perilla

student•

<?php

echo "<pre>";
/*var_dump($_POST["nombre"]);
var_dump($_POST["personas"]);
print_r($_POST["persona"]);
var_dump($_POST["list1"]);
var_dump($_POST["list2"]);
var_dump($_POST["list3"]);
var_dump($_POST["pais"]);*/
var_dump($_FILES["galeria"]);
echo "</pre>";

Wilman Perilla

student•

<!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>

Carlos Enrique Jiménez Avendaño

student•

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h2>Recibe el Formulario FILE</h2>

    <?php
      echo "<pre>";
      var_dump($_FILES);
      echo "</pre>";

     ?>

     <h3>Recibe las variables</h3>

     <?php

     $archivo = $_FILES["archivo"]["name"];

     //Mover la imagen desde la ruta temporal a la de siempre
     $basename = $_FILES["archivo"]["name"];
     $ruta_tmp = $_FILES["archivo"]["tmp_name"];
     $ruta_a_subir = "imagenes/$basename";

     echo "<br>";
     echo "Nombre del archivo BASENAME: ".$basename;
     echo "<br>";
     echo "Ruta tmp del archivo: ".$ruta_tmp;

     //Mover imagen

     //La siguiente funcion recibe la ruta temporal y la nurva ruta definitiva

     move_uploaded_file($ruta_tmp, $ruta_a_subir);

      ?>

      <br><br><br><br>
      <img src="<?php echo $ruta_a_subir; ?>" alt="<?php echo $basename; ?>">
  </body>
</html>

Leonardo Jiménez Ubaque

student•

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.

<input type="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

<input type="text" **name**="Nombre" />

Arreglos

Podemos usar varios inputs para generar un arreglo

<input type="text" name="personas[]" />
<input type="text" name="personas[]" />
<input type="text" name="personas[]" />

Arreglos asociativos

Podemos usar varios inputs para generar una arreglo asociativo, donde se puede asignar claves a los arreglos para crear los arreglos asociativos

<input type="text" name="persona[nombre]" />
<input type="email" name="persona[email]" />
<input type="tel" name="persona[telefono]" />

Checkbox

Podemos usar inputs de tipo checkbox para mandar al servidor, estos crean una casilla de verificación que los usuarios pueden marcar o desmarcar

<input type="checkbox" name="list1" />
<input type="checkbox" name="list2" />
<input type="checkbox" name="list3" />

<input type="checkbox" name="suscripcion" value="1">

Radios

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

<input type="radio" name="pais" />
<input type="radio" name="pais" />
<input type="radio" name="pais" />

<input type="radio" name="genero" value="masculino"> Masculino
<input type="radio" name="genero" value="femenino"> Femenino

Múltiples archivos

También podemos mandar múltiples archivos, los cuales podremos recibir en forma de arreglo

<input type="file" multiple name="fotos[]" />

Password

Similar al tipo text, pero los caracteres ingresados se ocultan (útil para contraseñas)

<input type="password" name="contrasena">

Proporciona un campo de entrada para que los usuarios ingresen direcciones de correo electrónico

<input type="email" name="correo">

Number

Permite a los usuarios ingresar valores numéricos

<input type="number" name="edad">

Text Area

Crea un área de texto de varias líneas para que los usuarios ingresen texto más largo

<textarea name="comentarios" rows="4" cols="50"></textarea>

File

Permite a los usuarios cargar archivos desde su dispositivo.

<input type="file" name="archivo">

Submit

Crea un botón para enviar el formulario

<input type="submit" value="Enviar">

Reset

Crea un botón para restablecer el formulario a sus valores predeterminados

<input type="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.

Código desarrollado para la clase

Formulario en HTML

<!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>
    <!-- Formulario -->
    <form action="server.php" method="post" enctype="multipart/form-data">

        <!-- Input simple -->
        <label for="nombre">Nombre:</label>
        <input type="text" name="nombre" id="nombre" placeholder="Nombre"><br>

        <!-- Arreglos -->
        <label>Personas:</label><br>
        <input type="text" name="personas[]" placeholder="Persona 1"><br>
        <input type="text" name="personas[]" placeholder="Persona 2"><br>
        <input type="text" name="personas[]" placeholder="Persona 3"><br>

        <!-- Arrglos asociativos -->
        <label>Persona:</label><br>
        <input type="text" name="persona[nombre]" placeholder="Nombre"><br>
        <input type="text" name="persona[apellido]" placeholder="Apellido"><br>
        <input type="number" name="persona[edad]" placeholder="Edad"><br>

        <!-- Checkbox -->
        <label><h4>Cargo:</h4></label>
        <label for="estudiante">Estudiante:</label>
        <input type="checkbox" name="estudiante" id="estudiante" value="estudiante""><br>
        <label for="profesor">Profesor:</label>
        <input type="checkbox" name="profesor" id="profesor" value="profesor""><br>
        <label for="invitado">Invitado:</label>
        <input type="checkbox" name="invitado" id="invitado" value="invitado""><br>

        <!-- Radios -->
        <label><h4>Genero:</h4></label>
        <label for="genero">Hombre:</label>
        <input type="radio" name="genero" id="hombre" value="hombre"><br>
        <label for="genero">Mujer:</label>
        <input type="radio" name="genero" id="mujer" value="mujer"><br>
        <label for="genero">Otro:</label>
        <input type="radio" name="genero" id="otro" value="otro"><br>

        <!-- Múltiples archivos -->
        <label for="archivos">Archivos:</label>
        <input type="file" multiple name="archivos[]" id="archivos"><br>

        <!-- Reset -->
        <input type="reset" value="Limpiar">

        <!-- Envio -->
        <input type="submit" value="Enviar">
    </form>
</body>
</html>

Servidor PHP

<?php

// Truco para debugear y ver lo que llega por POST
echo "<pre>";
var_dump($_POST); // Recupera la información que se envía por POST
var_dump($_FILES); // Recupera la información que se envía por FILES
echo "</pre>";

?>

Angelo Osorio

student•

genial, son todos bknes :)

Santiago Andres Alvarez Cuadros

student•

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.

 <label for="galeria">Carga tus imágenes: </label>
 <input type="file" multiple name="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.

Aka SinssChoss

student•

Apunte

index.php

<!DOCTYPE html>
<html lang="es">
<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>Jugando con PHP</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"> <br>
        
        <!-- Input arreglo -->
        <label for="Personas">Persona 1</label>
        <input type="text" name="personas[]"> <br>

        <label for="Personas">Persona 2</label>
        <input type="text" name="personas[]"> <br>

        <label for="Personas">Persona 3</label>
        <input type="text" name="personas[]"> <br>


        <!-- Input Arreglos Asociativos -->
        <p>Datos de la persona</p>
        <label for="nombre">Nombre</label>
        <input type="text" name="persona[nombre]" id="nombre"> <br>

        <label for="correo">Email</label>
        <input type="email" name="persona[email]" id="correo"> <br>

        <label for="password">Contraseña</label>
        <input type="password" name="persona[password]" id="password"> <br>


        <!-- Input Checkbox -->
        <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>
        
        <!-- Input Radio -->
        <p>País de procedencia</p>
        <label><input type="radio" name="pais" value="Perú">Perú</label><br>
        <label><input type="radio" name="pais" value="México">México</label><br>
        <label><input type="radio" name="pais" value="Ecuador">Ecuador</label><br>

        <!-- Multiples archivos -->
        <!-- Con el atributo multiple se podrán subir varios archivos -->
        <label for="galeria">Sube tus imágenes:</label>
        <input type="file" multiple name="galeria[]" id="galeria">


        <button type="submit">Enviar datos</button>
    </form>
</body>
</html>

server.php

<?php
    echo "<pre>";
    // Input simple
    print_r($_POST); 
    $nombre = $_POST["nombre"];
    echo "Hola $nombre";

    // Input Arreglo
    print_r($_POST["personas"]);
    
    // Input Arreglo Asociativos
    print_r($_POST["persona"]);

    // Inpur Checkbox
    print_r($_POST["color"]);  
    echo "Mis colores favoritos son: ";
    foreach($_POST["color"] as $color){
        echo "\n$color";
    }

    // Input Radio
    var_dump($_POST["pais"]);
    echo "Mi país de procedencia es: {$_POST["pais"]}";

    // Input Archivos
    print_r($_FILES["galeria"]);

    echo "</pre>";
?>

Michael Cardenas

student•

Apuntes:

<!-- //index -->

<!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>Php con HTML</title>
</head>
<body>

<form action="./server.php" method="post" enctype="multipart/form-data">
    
 <!-- input normal -->
    <h4>input normal</h4>
    
    <label for="name">Nombre</label>
    <input type="text"  name="name">

    <!-- input de arreglos -->
    <h4>input de arreglos</h4>
    
    <label for="nombre">Nombre</label>
    <input type="text" name="personas[]" />
    
    <label for="nombre">Apellido</label>
    <input type="text" name="personas[]" />
    
    <label for="nombre">Correo</label>
    <input type="email" name="personas[]" />


    <!-- input de arreglos asociativos -->
    <h4>input de arreglos asociativos</h4>

    <label for="nombre">Nombre</label>
    <input type="text" name="persona[nombre]" />
    
    <label for="nombre">Correo</label>
    <input type="email" name="persona[email]" />
    <label for="nombre">Telefono</label>
    <input type="tel" name="persona[telefono]" />
       <!-- checkbox -->
       <h4>checkbox</h4>
    <label for="nombre">Bogota</label>
    <input type="checkbox" name="list1" value="Bogota"/>
    
    <label for="nombre">Barranquilla</label>
    <input type="checkbox" name="list2" value="Barranquilla" />
    
    <label for="nombre">Soacha</label>
    <input type="checkbox" name="list3" value="Soacha"/>

<!-- Radios -->
<h4>Radios</h4>
<label for="nombre">Bogota</label>
<input type="radio" name="pais" value="Bogota" id="Bogota" />

<label for="nombre">Barranquilla</label>
<input type="radio" name="pais" value="Barranquilla" id="Barranquilla"/>

<label for="nombre">Soacha</label>
<input type="radio" name="pais" value="Soacha" id="Soacha"/>

<!-- Múltiples archivos -->
<h4>Múltiples archivos</h4>
<input type="file" multiple name="fotos[]" />

</form>
    
</body>
</html>

Walter Omar Barrios Vazquez

student•

Algunos ejemplos con checkbox en la web de mdn.

Walter Omar Barrios Vazquez

student•

Tipos de input

Input simple

<input type="text" name="Nombre" />

Arreglos

<input type="text" name="personas[]" />
<input type="text" name="personas[]" />
<input type="text" name="personas[]" />

Arreglos asociativos

<input type="text" name="persona[nombre]" />
<input type="email" name="persona[email]" />
<input type="tel" name="persona[telefono]" />

Checkbox

<input type="checkbox" name="list1" />
<input type="checkbox" name="list2" />
<input type="checkbox" name="list3" />

Radios

<input type="radio" name="pais" />
<input type="radio" name="pais" />
<input type="radio" name="pais" />

Múltiples archivos

<input type="file" multiple name="fotos[]" />