Tipos de inputs

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

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

Doniel Alberto Acosta Contreras

student•

buen aporte

Sergio Morgan

student•

++ALGUNOS ATAJOS DE VSC PARA WINDOWS++

Para comentar codigo desde windows, posicionarse en la linea o lineas a comentar y presionar Ctrl + }
Para mover una o varias lineas de código Alt + ⬆
Para copiar una o varias lineas de código Alt + Shift + ⬆
Para tener multiples cursores (cambiar al mismo tiempo varios valores) mantener presionado Alt mientras seleccionas la ubicacion del nuevo cursor
Para seleccionar varios valores iguales, selecciona y presiona Ctrl + d (varias veces segun la cantidad que necesites modificar)

Santiago Velásquez Serna

student•

Faltó uno muy importante tambien:

ctrl + shift + c = selecciona todas las ocurrencias del valor seleccionado

LESTHER XITUMUL MANUEL

student•

Hubiera sido bueno que el checkbox se hubiese explicado de esta manerra:

Input de checkbox (<input type="checkbox">): Se utiliza para seleccionar opciones. Por ejemplo:

<form action="procesar.php" method="POST">
    <label for="hobbies">Hobbies:</label>
    <input type="checkbox" id="hobby1" name="hobbies[]" value="futbol">
    <label for="hobby1">Fútbol</label>
    <input type="checkbox" id="hobby2" name="hobbies[]" value="musica">
    <label for="hobby2">Música</label>
    <input type="checkbox" id="hobby3" name="hobbies[]" value="lectura">
    <label for="hobby3">Lectura</label>
    <button type="submit">Enviar</button>
</form>

En este ejemplo, el formulario tiene inputs de checkbox para que el usuario pueda seleccionar sus hobbies. Al enviarse el formulario, los datos se enviarán al archivo procesar.php como un arreglo en la superglobal $_POST.

Joel Dominguez Merino

student•

Gracias por mostrarnos estos ejemplos Carlos! Ya va quedando mucho más claro como trabaja PHP en este tema del envió de información. Desconocía que se podía mandar el mismo 'nombre' para formar de esta forma el arreglo normal o asociativo. Excelente curso! 😎 Comparto mi apunte:

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>
    <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] => Pepe
      )
    [user] => Array
      (
        [name] => Pepito
        [age] => 23
        [team] => Pumas
      )
  )
  */
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(4) "Pepe"
    }
  */

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(6) "Pepito"
      ["age"]=>
      string(2) "23"
      ["team"]=>
      string(5) "Pumas"
    }
  */

echo("</pre>");

Resultado

Fabian Espitia

student•

Buenas 😁..

Como hacen para descargar del repositorio del profe , yo hago el clone y no me descarga todos los proyectos y trato de cambiarme de branch pero me salen errores , ustedes me podrian ayudar ? gracias 👍

Luis Alberto Aguilar Muñoz

student•

Intenta usando Download ZIP.

Esteban Ibarra Largo

student•

como hago para mandar un arreglo php en una base de datos?

LESTHER XITUMUL MANUEL

student•

Hasta donde tengo entendido no puedes enviar un arreglo PHP como tal a una base de datos, pero puedes insertar los datos que están en un arreglo a una tabla en una base de datos con PHP (que no es lo mismo). Para eso, existen features nativos de PHP como msqli, y por supuesto, deberías de tener un DBSM en un servidor con sus respectivas credenciales para establecer conexión hacia la DB, saber el nombre de la tabla a la que quieres registrar los datos del arreglo, el nombre de sus campos, etc.

LESTHER XITUMUL MANUEL

student•

Tipos de input en HTML y ejemplos prácticos

Input de texto (<input type="text">): Se utiliza para ingresar texto o datos alfanuméricos. Por ejemplo:

<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, se crea un formulario con un input de texto para que el usuario pueda ingresar su nombre. Al hacer clic en el botón "Enviar", los datos del formulario se enviarán al archivo procesar.php utilizando el método POST.

Input de contraseña (<input type="password">): Se utiliza para ingresar contraseñas o datos sensibles que no se deben mostrar en texto plano. Por ejemplo:

<form action="procesar.php" method="POST">
    <label for="contrasena">Contraseña:</label>
    <input type="password" id="contrasena" name="contrasena">
    <button type="submit">Enviar</button>
</form>

En este caso, el formulario tiene un input de contraseña para que el usuario pueda ingresar su contraseña de forma segura. Al enviarse el formulario, los datos se enviarán al archivo procesar.php.

Input de correo electrónico (<input type="email">): Se utiliza para ingresar direcciones de correo electrónico válidas. Por ejemplo:

<form action="procesar.php" method="POST">
    <label for="correo">Correo electrónico:</label>
    <input type="email" id="correo" name="correo">
    <button type="submit">Enviar</button>
</form>

En este ejemplo, el formulario tiene un input de correo electrónico para que el usuario pueda ingresar su dirección de correo electrónico. Al enviarse el formulario, los datos se enviarán al archivo procesar.php.

Input de número (<input type="number">): Se utiliza para ingresar números. Por ejemplo:

<form action="procesar.php" method="POST">
    <label for="edad">Edad:</label>
    <input type="number" id="edad" name="edad">
    <button type="submit">Enviar</button>
</form>

En este caso, el formulario tiene un input de número para que el usuario pueda ingresar su edad. Al enviarse el formulario, los datos se enviarán al archivo procesar.php.

Input de archivo (<input type="file">): Se utiliza para seleccionar y enviar archivos desde el cliente al servidor. Por ejemplo:

<form action="procesar.php" method="POST" enctype="multipart/form-data">
    <label for="archivo">Archivo:</label>
    <input type="file" id="archivo" name="archivo">
    <button type="submit">Enviar</button>
</form>

En este ejemplo, el formulario tiene un input de archivo que permite al usuario seleccionar un archivo para enviar al servidor. Al enviarse el formulario, los datos del archivo se enviarán al archivo procesar.php.

Input de fecha (<input type="date">): Se utiliza para ingresar una fecha. Por ejemplo:

<form action="procesar.php" method="POST">
    <label for="fecha">Fecha de nacimiento:</label>
    <input type="date" id="fecha" name="fecha">
    <button type="submit">Enviar</button>
</form>

En este caso, el formulario tiene un input de fecha para que el usuario pueda ingresar su fecha de nacimiento. Al enviarse el formulario, los datos se enviarán al archivo "procesar.php".

Input de checkbox (<input type="checkbox">): Se utiliza para seleccionar opciones. Por ejemplo:

<form action="procesar.php" method="POST">
    <label for="hobbies">Hobbies:</label>
    <input type="checkbox" id="hobby1" name="hobbies[]" value="futbol">
    <label for="hobby1">Fútbol</label>
    <input type="checkbox" id="hobby2" name="hobbies[]" value="musica">
    <label for="hobby2">Música</label>
    <input type="checkbox" id="hobby3" name="hobbies[]" value="lectura">
    <label for="hobby3">Lectura</label>
    <button type="submit">Enviar</button>
</form>

Leonardo Jiménez Ubaque

student•

Comparto mis aputes:

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 for="estudiante">Estudiante:</label>
        <input type="checkbox" name="estudiante" value="estudiante""><br>
        <label for="profesor">Profesor:</label>
        <input type="checkbox" name="profesor" value="profesor""><br>
        <label for="invitado">Invitado:</label>
        <input type="checkbox" name="invitado" value="invitado""><br>
        <!-- Envio -->
        <input type="submit" value="Enviar">
    </form>
</body>
</html>

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
echo "</pre>";

?>

Juan Omar Palma álvarez

student•

cuando se ingresa al proyecto en el que estamos trabajando, hay un item que dice Parent Directory (Directorio Padre), para no estar cambiando la url de la barra de navegacion se cliquea en la flecha para volver atras y se vuelve a la carpeta contenedora, para salir de la carpeta para ir a otro proyecto se cliquea parent directory y se vuelve a la vista principal del servidor

Daniel Urviola

student•

Siempre quise saber como se comenta en bloque, ahora lo se xD

Gustavo Martínez

student•

Muy buenos ejemplos Carlos! Muchas gracias!

Mercy María Ix Ballote

student•

clases realmente útiles de cosas que no mencionan otros cursos

Cristobal Nyram

student•

Lo que se aprende en esta clase es como manejar un array en los inputs

Eduer Pallares Jiménez

student•

Si incluimos dentro de la etiqueta label el input ya no necesitamos enlazar ambas etiquetas con el atributo for y id:

  <label>
      Nombre:
      <input type="text" name="nombre">
    </label>

Carlo Andoni

student•

aun así se necesita enlazarlo con el atributo for, para el html semantico.

<form action="procesar.php" method="POST">
    <label for="hobbies">Hobbies:</label>
    <input type="checkbox" id="hobby1" name="hobbies[]" value="futbol">
    <label for="hobby1">Fútbol</label>
    <input type="checkbox" id="hobby2" name="hobbies[]" value="musica">
    <label for="hobby2">Música</label>
    <input type="checkbox" id="hobby3" name="hobbies[]" value="lectura">
    <label for="hobby3">Lectura</label>
    <button type="submit">Enviar</button>
</form>

<!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>
    <button type="submit">Enviar Formulario</button>

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

<?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] => Pepe
      )
    [user] => Array
      (
        [name] => Pepito
        [age] => 23
        [team] => Pumas
      )
  )
  */
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(4) "Pepe"
    }
  */

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(6) "Pepito"
      ["age"]=>
      string(2) "23"
      ["team"]=>
      string(5) "Pumas"
    }
  */

echo("</pre>");

<form action="procesar.php" method="POST">
    <label for="contrasena">Contraseña:</label>
    <input type="password" id="contrasena" name="contrasena">
    <button type="submit">Enviar</button>
</form>

<form action="procesar.php" method="POST" enctype="multipart/form-data">
    <label for="archivo">Archivo:</label>
    <input type="file" id="archivo" name="archivo">
    <button type="submit">Enviar</button>
</form>

<form action="procesar.php" method="POST">
    <label for="hobbies">Hobbies:</label>
    <input type="checkbox" id="hobby1" name="hobbies[]" value="futbol">
    <label for="hobby1">Fútbol</label>
    <input type="checkbox" id="hobby2" name="hobbies[]" value="musica">
    <label for="hobby2">Música</label>
    <input type="checkbox" id="hobby3" name="hobbies[]" value="lectura">
    <label for="hobby3">Lectura</label>
    <button type="submit">Enviar</button>
</form>

<!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 for="estudiante">Estudiante:</label>
        <input type="checkbox" name="estudiante" value="estudiante""><br>
        <label for="profesor">Profesor:</label>
        <input type="checkbox" name="profesor" value="profesor""><br>
        <label for="invitado">Invitado:</label>
        <input type="checkbox" name="invitado" value="invitado""><br>
        <!-- Envio -->
        <input type="submit" value="Enviar">
    </form>
</body>
</html> 

Tipos de inputs

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