Otros tipos de inputs

Curso de PHP: Integración con HTML

Introducción

¿Cómo se renderiza una página web en mi computadora?

Levantando un servidor local

¿Cómo combinar HTML con PHP?

PHP como preprocesador de HTML

Imprime texto y etiquetas HTML

Condicionales

Ciclos

¿Cómo pasar variables de PHP a JavaScript?

Evita el código espagueti

Refactorizando código espagueti

Manejo de formularios

Cómo obtener una solicitud al servidor con PHP

Envío de un formulario a través de GET

Envío de un formulario a través de POST

Envío de imágenes

Guardando imágenes en el servidor

Tipos de inputs

Otros tipos de inputs

Valida si un formulario ha sido enviado

Sanitizando datos de mi formulario

Validando datos

Proyecto: formulario de contacto

Creando el maquetado

Haciendo la lógica de recepción del formulario

Integrando PHPMailer

Implementando el servidor de correos de Gmail

Conclusión

Es tu turno de poner todo en práctica

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 16

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Daniela Betancur

hace 3 años

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

Joel Dominguez Merino

hace 2 años

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

Keneth Lopez

hace 2 años

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

Kenneth Angulo L

hace 2 años

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

hace un año

el q me parecio interesante son los array asociativos

Wilman Perilla

hace un año

```js "; /*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 ""; ```

Wilman Perilla

hace un año

```js <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"> <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

hace un año

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

Leonardo Jiménez Ubaque

hace un año

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

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

?>

Angelo Osorio

hace un año

genial, son todos bknes 😃

GONZALO FABIAN VILTE

hace un año

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

Santiago Andres Alvarez Cuadros

hace 2 años

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.

Keneth Lopez

hace 2 años

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

hace 3 años

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>

Walter Omar Barrios Vazquez

hace 3 años

Algunos ejemplos con checkbox en la web de mdn.

Walter Omar Barrios Vazquez

hace 2 años

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