Cursos Empresas Blog Live Conf Eventos Precios

0:0015:29

Tipos de inputs

Curso de PHP: Integración con HTML

Clase 15 / 24

Ver clases

Tipos de inputs

Curso de PHP: Integración con HTML

Clase 15 de 24

Clase 15 / 24

Tipos de inputs

Curso de PHP: Integración con HTML

Clase 15 / 24

Ver clases

LESTHER XITUMUL MANUEL#4941824

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

Comentarios (14)14 comentarios

Walter Omar Barrios Vazquez

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

Doniel Alberto Acosta Contreras

buen aporte

Sergio Morgan

Hace 4 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)

Santiago Velásquez Serna

Hace 3 años

Faltó uno muy importante tambien:

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

LESTHER XITUMUL MANUEL

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

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

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

Intenta usando Download ZIP.

Esteban Ibarra Largo

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

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.

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

Leonardo Jiménez Ubaque

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

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

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

Gustavo Martínez

Muy buenos ejemplos Carlos! Muchas gracias!

Mercy María Ix Ballote

clases realmente útiles de cosas que no mencionan otros cursos

Cristobal Nyram

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

Eduer Pallares Jiménez

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

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

Tipos de inputs

Tipos de inputs

Tipos de inputs

Progreso del curso

Introducción

¿Cómo combinar HTML con PHP?

Manejo de formularios

Proyecto: formulario de contacto

Conclusión

Tipos de inputs

Tipos de inputs

Comentarios

Tipos de input

Input simple

Arreglos

Arreglos asociativos

Checkbox

Radios

Múltiples archivos

`Tipos de input en HTML y ejemplos prácticos`

Comentarios

Tipos de input

Input simple

Arreglos

Arreglos asociativos

Checkbox

Radios

Múltiples archivos

`Tipos de input en HTML y ejemplos prácticos`