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

Tipos de inputs

15/24
Recursos

Aportes 11

Preguntas 3

Ordenar por:

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

o inicia sesi贸n.

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

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)

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 鈥榥ombre鈥 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

Tipos de input en HTML y ejemplos pr谩cticos

  1. 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 鈥淓nviar鈥, los datos del formulario se enviar谩n al archivo procesar.php utilizando el m茅todo POST.

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

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

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

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

  1. 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 鈥減rocesar.php鈥.

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

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

?>

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

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

Muy buenos ejemplos Carlos! Muchas gracias!

clases realmente 煤tiles de cosas que no mencionan otros cursos

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

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>