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 11

Preguntas 3

Ordenar por:

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

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

Sergio Morgan

hace 2 años

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)

Joel Dominguez Merino

hace 2 años

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

LESTHER XITUMUL MANUEL

hace un año

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

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.

Leonardo Jiménez Ubaque

hace un año

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

hace un año

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

hace un año

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

gmartinez8

hace 2 años

Muy buenos ejemplos Carlos! Muchas gracias!

Mercy María Ix Ballote

hace 2 años

clases realmente útiles de cosas que no mencionan otros cursos

Cristobal Nyram

hace 2 años

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

Eduer Pallares Jiménez

hace 2 años

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>