Tipos de inputs HTML para formularios avanzados

Aprende a ampliar y validar datos en formularios HTML con inputs nativos y buenas prácticas. Aquí verás cómo usar password, number con min y max, date con calendario, color con selector y radio agrupado con fieldset y legend. Todo con etiquetas label, for, id y name bien enlazadas para accesibilidad y envío correcto.

¿Qué inputs de formulario amplían la recolección de datos?

Los inputs adecuados mejoran la experiencia y la calidad de los datos. Con HTML puedes pedir contraseñas con privacidad, números validados, fechas con calendario y colores con un selector visual.

¿Cómo capturar contraseñas con privacidad?

El input type="password" oculta los caracteres con puntos o asteriscos. Es una mejora de privacidad, no de seguridad. La seguridad depende de enviar por HTTPS.

• Usa label, for, id y name para accesibilidad y envío correcto.
• Los navegadores y el password manager pueden sugerir autocompletado.

<form method="post" action="#">
  <div>
    <label for="password">Contraseña:</label>
    <input type="password" id="password" name="password" />
  </div>
</form>

¿Cómo pedir colores con un selector nativo?

El input type="color" abre un color picker para elegir un valor hexadecimal.

<div>
  <label for="color">Color:</label>
  <input type="color" id="color" name="color" />
</div>

• Selección visual y precisa del color.
• Envío directo del valor al servidor.

¿Cómo validar números y fechas en HTML sin complicarse?

Para datos numéricos y fechas, los inputs nativos aportan validación y controles del navegador. Evitas errores comunes y mejoras la usabilidad.

¿Cómo limitar rangos con min y max?

Con type="number" puedes aceptar solo números y definir límites con min y max. Útil, por ejemplo, para una edad entre 18 y 70.

<div>
  <label for="edad">Edad:</label>
  <input type="number" id="edad" name="edad" min="18" max="70" />
</div>

• Solo valores numéricos válidos.
• Impide bajar de 18 o subir de 70.

¿Cómo seleccionar fechas con el calendario nativo?

El input type="date" muestra un calendario para elegir día, mes y año.

<div>
  <label for="fecha">Fecha:</label>
  <input type="date" id="fecha" name="fecha" />
</div>

• Reduce errores de formato de fecha.
• Interfaz familiar del navegador.

¿Cómo agrupar opciones con radio para enviar un solo valor?

Cuando hay varias opciones y solo una respuesta válida, usa type="radio" con el mismo name para cada opción. Agrupa semánticamente con fieldset y titula el grupo con legend.

<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>

• El mismo name garantiza que solo se seleccione una opción.
• El atributo value envía el dato útil: M o F.
• Fieldset y legend agrupan y describen el conjunto de opciones.

Consejos rápidos.

• Usa name para definir cómo viaja el dato al servidor.
• Enlaza label con for y el id correspondiente.
• Recuerda: el input password mejora la privacidad visual, pero la seguridad exige usar HTTPS.

¿Quieres practicar con checkbox y listas de options para países u otras categorías? Comenta qué casos de uso tienes y qué inputs necesitas implementar.