Tipos de <input>

Los elementos de tipo <input> se utilizan en HTML para crear campos interactivos en los formularios, permitiendo que los usuarios ingresen información. Los <input> pueden tener diferentes tipos, cada uno diseñado para aceptar un tipo específico de dato.

Ejemplos de diferentes tipos de Input

Input de tipo text

Este tipo de input permite al usuario ingresar texto de una sola línea.

Ejemplo de código:

        
<input type="text" name="nombre" placeholder="Ingresa tu nombre">
        
      

Este campo permite al usuario escribir texto, como su nombre.

Input de tipo password

Este tipo de input es similar al de texto, pero oculta la entrada del usuario (ideal para contraseñas).

Ejemplo de código:

        
 <input type="password" name="contraseña" placeholder="Contraseña...">
        
      

Este campo es útil cuando necesitamos que el usuario ingrese información sensible, como una contraseña.

Input de tipo number

Este tipo de input permite que el usuario ingrese números, y puede tener restricciones adicionales como el rango.

Ejemplo de código:

        
<input type="number" name="edad" min="18" max="99" placeholder="Edad...">
        
      

Este campo acepta solo números dentro del rango de 18 a 99.

Input de tipo email

Este tipo de input permite al usuario ingresar una dirección de correo electrónico. Además, realiza una validación automática para asegurar que el formato del correo sea correcto.

Ejemplo de código:

        
<input type="email" name="correo" placeholder="Ingresa tu correo">
        
      

Este campo asegura que el texto ingresado tenga el formato de un correo electrónico (por ejemplo, usuario@dominio.com).

Input de tipo date

Este tipo de input permite al usuario seleccionar una fecha usando un selector de fecha.

Ejemplo de código:

        
<input type="date" name="fecha_nacimiento">
        
      

Este campo permite al usuario elegir una fecha, como su fecha de nacimiento, de un calendario.

Input de tipo color

Este tipo de input permite al usuario seleccionar un color de una paleta de colores.

Ejemplo de código:

        
<input type="color" name="color_favorito">
        
      

Este campo muestra un selector de colores, permitiendo al usuario elegir su color favorito.

Input de tipo file

Este tipo de input permite que el usuario suba archivos desde su dispositivo.

Ejemplo de código:

        
<input type="file" name="archivo">
        
      

Este campo permite que el usuario seleccione un archivo para cargar, como una imagen o documento.

Recuerda que la etiqueta <input> se puede personalizar con diferentes tipos para adaptarse a las necesidades de la entrada de datos en un formulario.