Todos los tipos de input en HTML

Tipos de input en HTML
Tipos de input en HTML
¿Problemas de visión? En Tecsify nos importa la inclusión de personas con discapacidad, por eso, ahora puedes esuchar los articulos narrados en tiempo real

En HTML, el elemento de entrada (<input>) desempeña un papel fundamental al permitir a los desarrolladores recopilar datos de los usuarios a través de una variedad de campos de entrada. Su versatilidad para crear formularios y facilitar la interacción con los visitantes de un sitio web lo convierte en una piedra angular del desarrollo web moderno.

¿Qué es la etiqueta en HTML?

La etiqueta <input> es un elemento fundamental de HTML que se utiliza para crear campos interactivos en formularios web. Con esta etiqueta, los desarrolladores pueden permitir a los usuarios ingresar diferentes tipos de datos, como texto, contraseñas, números, fechas y más. Además, la etiqueta <input> es altamente versátil y puede adaptarse a una amplia gama de formatos y tipos de datos, lo que la convierte en una herramienta indispensable para la recopilación de información en línea.

La sintaxis básica de la etiqueta <input> es la siguiente:

<input type="tipo_de_input" atributo1="valor1" atributo2="valor2" ...>

También puede interesarte: ChatGPT para Programadores: Potencia tu código con Inteligencia Artificial

Tipos de elementos <input> en HTML5:

La etiqueta <input> admite una variedad de tipos de campos de entrada, cada uno definido por el atributo “type”. A continuación, se presentan algunos de los tipos más comunes de elementos junto con ejemplos funcionales para cada uno:

1. Texto

El tipo de entrada de texto se utiliza para crear campos de entrada de texto simples.

<input type="text" name="nombre" placeholder="Ingrese su nombre">

Ejemplo de un Input de texto:

2. Correo electrónico

El tipo de entrada de correo electrónico se utiliza para validar que el texto ingresado sea una dirección de correo electrónico válida.

<input type="email" name="correo" placeholder="[email protected]">

Ejemplo de un Input de email:

3. Contraseña

El tipo de entrada de contraseña se utiliza para crear campos de contraseña que ocultan los caracteres escritos.

<input type="password" name="contraseña" placeholder="Ingrese su contraseña">

Ejemplo de un Input de contraseña:

4. Número

El tipo de entrada de número se utiliza para aceptar valores numéricos.

<input type="number" name="cantidad" min="0" max="100" step="1">

5. Fecha

El tipo de entrada de fecha se utiliza para permitir a los usuarios seleccionar fechas en un calendario.

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

6. Archivo

El tipo de entrada de archivo permite a los usuarios cargar archivos desde su dispositivo.

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

7. Botón

El tipo de entrada de botón se utiliza para crear botones interactivos en un formulario.

<input type="button" value="Enviar">

8. Casilla de verificación

El tipo de entrada de casilla de verificación permite a los usuarios seleccionar una o varias opciones de un conjunto de opciones.

<input type="checkbox" name="opciones" value="opcion1"> Opción 1
<input type="checkbox" name="opciones" value="opcion2"> Opción 2

Opción 1
Opción 2

9. Botón de radio

El tipo de entrada de botón de radio permite a los usuarios seleccionar una opción de un conjunto de opciones.

<input type="radio" name="opcion" value="opcion1"> Opción 1
<input type="radio" name="opcion" value="opcion2"> Opción 2

Opción 1
Opción 2

10. Área de texto

El elemento <textarea> se utiliza para crear áreas de texto de varias líneas.

<textarea name="mensaje" rows="4" cols="40">Escriba su mensaje aquí</textarea>

11. Reset

El tipo de entrada de reset se utiliza para restablecer los valores de un formulario a sus valores predeterminados.

<input type="reset" value="Restablecer">

12. Teléfono

El tipo de entrada de teléfono se utiliza para permitir a los usuarios ingresar números de teléfono.

<input type="tel" name="telefono" placeholder="Ingrese su número de teléfono">

13. Color

El tipo de entrada de color se utiliza para permitir a los usuarios seleccionar un color.

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

14. Rango

El tipo de entrada de rango se utiliza para permitir a los usuarios seleccionar un valor en un rango determinado.

<input type="range" name="rango" min="0" max="100" step="1">

15. Imagen

El tipo de entrada de imagen se utiliza para mostrar imágenes como botones interactivos.

<input type="image" src="imagen.png" alt="Imagen de ejemplo">

16. Búsqueda

El tipo de entrada de búsqueda se utiliza para permitir a los usuarios buscar información dentro de un campo de búsqueda.

<input type="search" name="busqueda" placeholder="Buscar...">

17. Time

El tipo de entrada de tiempo se utiliza para permitir a los usuarios seleccionar una hora específica.

<input type="time" name="hora">


En este artículo, hemos explorado la diversidad de tipos de campos de entrada que ofrece la etiqueta <input> en HTML5. Desde campos de texto y contraseñas hasta opciones de selección y herramientas especializadas como la entrada de fecha y hora, la etiqueta <input> es una herramienta poderosa para la interacción en línea.

Recuerda que, como en cualquier habilidad, la práctica es esencial para aprender y dominar el uso de estos elementos en tus proyectos web. A medida que te familiarices con estas herramientas, podrás crear formularios y experiencias de usuario más efectivas y atractivas.

Si encontraste útil este artículo, te invitamos a compartirlo con otros apasionados por la tecnología y la web. Compartir el conocimiento es una excelente manera de enriquecer la comunidad y ayudar a otros a crecer en sus habilidades.

Si deseas saber más, te recomendamos la página oficial de Mozilla Developers: https://developer.mozilla.org/es/docs/Learn/Forms/HTML5_input_types

Gracias por leernos en Tecsify, esperamos que este contenido haya sido informativo y útil para tus proyectos. ¡Sigue explorando y aprendiendo en el fascinante mundo del desarrollo web!

Redacción Tecsify
¡Somos el equipo de redacción, investigación, edición y publicación de Tecsify! Puedes contactarnos escribiendo a [email protected] ¡Será un gusto responderte!