No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de PHP: Integraci贸n con HTML

Curso de PHP: Integraci贸n con HTML

Carlos Eduardo G贸mez Garc铆a

Carlos Eduardo G贸mez Garc铆a

Otros tipos de inputs

16/24
Recursos

Aportes 14

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

creo sutancialmente que en la edici贸n del video recortaron la parte del checkbox y no quedo en esta clase. 馃槢

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

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";
}
?>

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

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

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

     ?>

     <h2>Recibe las variables</h2>

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

Tipos de inputs

驴Qu茅 son los inputs?

Los 鈥渋nputs鈥 (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 鈥渘ame鈥 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">

Email

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><h3>Cargo:</h3></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><h3>Genero:</h3></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>";

?>

genial, son todos bknes 馃槂

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

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.

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>";
?>

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 -->
    <h3>input normal</h3>
    
    <label for="name">Nombre</label>
    <input type="text"  name="name">

    <!-- input de arreglos -->
    <h3>input de arreglos</h3>
    
    <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 -->
    <h3>input de arreglos asociativos</h3>

    <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 -->
       <h3>checkbox</h3>
    <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 -->
<h3>Radios</h3>
<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 -->
<h3>M煤ltiples archivos</h3>
<input type="file" multiple name="fotos[]" />

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

Algunos ejemplos con checkbox en la web de mdn.

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[]" />