Tipos de inputs

Contenido del curso

Introducción

¿Cómo combinar HTML con PHP?

Manejo de formularios

Proyecto: formulario de contacto

Conclusión

24
Es tu turno de poner todo en práctica
01:50 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0015:29

Tipos de inputs

Curso de PHP: Integración con HTML

Clase 15 de 24

Clase 15 / 24

LESTHER XITUMUL MANUEL

Hace 3 años

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.

Comentarios (14)14 comentarios

Walter Omar Barrios Vazquez

Hace 4 años

Doniel Alberto Acosta Contreras

Sergio Morgan

Santiago Velásquez Serna

Joel Dominguez Merino

Fabian Espitia

Luis Alberto Aguilar Muñoz

Esteban Ibarra Largo

Leonardo Jiménez Ubaque

Juan Omar Palma álvarez

Daniel Urviola

Gustavo Martínez

Mercy María Ix Ballote

Cristobal Nyram

Eduer Pallares Jiménez

Carlo Andoni

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

Tipos de inputs

Progreso del curso

Introducción

¿Cómo combinar HTML con PHP?

Manejo de formularios

Proyecto: formulario de contacto

Conclusión