Las entradas de formulario son la principal forma en que los usuarios introducen información. HTML ofrece muchos tipos de entrada diferentes según los datos que se necesiten.

Tipos de entrada comunes

Entrada de texto

Diseñada para la introducción de datos textuales cortos, como nombres de usuario, direcciones de correo electrónico o mensajes breves.

<input type="text" />

Entrada de contraseña

Utilizada para la introducción de contraseñas, donde los caracteres se ocultan por motivos de seguridad.

<input type="password" />

Entrada de correo electrónico

Utilizada para recopilar direcciones de correo electrónico de los usuarios. Realiza validación del lado del cliente para asegurar que el valor ingresado tenga un formato válido de correo electrónico.

<input type="email" />

Entrada de teléfono

Utilizada para recopilar números de teléfono de los usuarios.

<input type="tel" />

Entrada numérica

Utilizada para recopilar datos numéricos de los usuarios. Proporciona un teclado numérico en dispositivos móviles.

<input type="number" />

Casilla de verificación

Permite a los usuarios seleccionar una o más opciones de una lista de alternativas. Adecuada para situaciones donde se permiten múltiples selecciones, como seleccionar varios elementos de una lista o aceptar términos y condiciones.

<input type="checkbox" />

Botón de opción

Permite a los usuarios seleccionar una opción de una lista de alternativas mutuamente excluyentes. Adecuado para situaciones donde solo se debe seleccionar una opción, como la selección de género o la elección de un método de pago.

<input type="radio" />

Entrada de archivo

Permite a los usuarios cargar archivos desde su dispositivo, seleccionar desde su sistema de archivos local y enviarlos junto con los datos del formulario. Esta función es especialmente útil al adjuntar documentos o imágenes.

<input type="file" />

Entrada de fecha, entrada de hora y entrada de fecha y hora

Permite a los usuarios ingresar fechas, horas o ambos. Proporciona interfaces fáciles de usar para seleccionar fechas y horas.

<input type="date" />
<input type="time" />
<input type="datetime-local" />

Ingrese algo en los campos y se sugerirán varias opciones. No se preocupe, no se recopilarán datos.

Es posible que hayas notado que completar el formulario no es muy conveniente cuando no entiendes qué se solicita en cada campo. Por eso, las etiquetas vienen en nuestra ayuda.