Tipos de inputs en formularios HTML

Contenido del curso

No sé dónde empezar

Fundamentos de HTML

Listas y Enlaces

Formularios y Tablas

Contenido Multimedia

Accesibilidad Web Y SEO

Proyecto final

17
Portafolio en HTML semántico accesible
08:01 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0014:13

Tipos de inputs en formularios HTML

Curso de HTML

Clase 9 de 17

Clase 9 / 17

Recursos

Pedir datos en un formulario web va mucho más allá de un campo de texto. HTML ofrece tipos de inputs específicos para contraseñas, números, fechas, colores y opciones agrupadas, cada uno con validaciones nativas que mejoran la experiencia del usuario y la calidad de la información que llega al servidor.

Aquí vas a ver cómo se construyen, cuándo conviene usar cada uno y qué atributos los hacen funcionar como esperas.

¿Cómo funciona el input type password en HTML?

Cuando construyes un login, lo último que quieres es que la contraseña se vea en pantalla. Para eso existe el input type="password", que reemplaza cada carácter por puntos o asteriscos mientras el usuario escribe [01:00].

html

<div> <label for="password">Contraseña:</label> <input type="password" id="password" name="password"> </div>

El atributo for del label debe coincidir con el id del input para que queden ligados. El name define cómo viaja ese dato al servidor.

¿El input password es seguro? No por sí solo. Solo oculta los caracteres en pantalla por privacidad. La seguridad real depende de enviar el formulario por HTTPS [05:30].

Un detalle útil: los gestores de contraseñas del navegador detectan este tipo de input y ofrecen autocompletar credenciales guardadas, lo que acelera el flujo de acceso.

¿Cómo pedir números y fechas con validación nativa?

Cuando necesitas que el usuario escriba una edad, un teléfono o cualquier valor numérico, el input type="number" bloquea la entrada de texto y solo acepta dígitos.

html <input type="number" id="edad" name="edad" min="18" max="70">

Los atributos min y max definen el rango permitido. Si tu sitio es solo para mayores de edad, min="18" impide bajar de ese valor, y max="70" corta el límite superior. Es una validación nativa muy sencilla que evita errores antes de que el dato llegue al backend.

¿Cómo se renderiza el input type date?

Si prefieres pedir una fecha completa en vez de solo el número de años, el input type="date" despliega un calendario interactivo donde el usuario elige día, mes y año.

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

Al hacer clic, el navegador abre el date picker nativo. El dato se envía con el formato estándar y tú solo te preocupas por procesarlo del lado del servidor.

¿Para qué sirve el input type color y los radio buttons?

En un e-commerce donde el usuario personaliza un producto, el input type="color" abre un color picker completo y devuelve el código hexadecimal seleccionado.

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

Una línea, y tienes un selector visual funcional sin librerías externas.

¿Cuándo usar fieldset, legend y radio en un formulario?

Los radio buttons sirven cuando el usuario debe elegir una sola opción de un grupo. Para agruparlos correctamente de forma semántica, HTML te da dos etiquetas clave:

fieldset: contenedor que agrupa inputs relacionados.
legend: título de esa agrupación.
input type="radio": cada opción individual del grupo.

La regla de oro: todos los radios del mismo grupo comparten el mismo name. Eso es lo que le dice al navegador que solo uno puede estar seleccionado a la vez.

html

<fieldset> <legend>Género</legend> <input type="radio" id="masculino" name="genero" value="M"> <label for="masculino">Masculino</label> <input type="radio" id="femenino" name="genero" value="F"> <label for="femenino">Femenino</label> </fieldset>

¿Para qué sirve el atributo value en un radio button? Define qué dato concreto se envía al servidor cuando esa opción está seleccionada. Sin value, el servidor recibe el name pero no sabe cuál opción eligió el usuario [09:30].

En el ejemplo, si el usuario marca "Masculino", el servidor recibe genero=M. Si marca "Femenino", recibe genero=F. Tú decides el formato del valor según lo que necesite tu backend.

¿Qué inputs HTML existen además de los básicos?

Más allá de los cinco tipos vistos, HTML ofrece variantes específicas para mes, semana, hora, rango, búsqueda, URL, teléfono y archivos. Cada uno aporta una interfaz nativa distinta y validaciones propias del navegador.

La idea de fondo: elegir el type correcto te ahorra JavaScript de validación y mejora la accesibilidad porque los lectores de pantalla interpretan cada tipo según su semántica.

En la próxima entrega vienen dos elementos más que completan el kit básico de formularios: los checkbox para selección múltiple y el elemento select con sus options para listas desplegables tipo país. ¿Cuál de estos inputs vas a probar primero en tu próximo formulario?