Exploración de los Diferentes Tipos de Entrada en HTML

HTML proporciona varios elementos <input> que permiten capturar diferentes tipos de datos de los usuarios. A continuación, se presentan algunos de los tipos de entrada más utilizados:

email y password

• type="email": utilizado para campos de entrada de correo electrónico que requieren una dirección válida. El navegador valida automáticamente la dirección de correo, solicitando al usuario corregir entradas no válidas;
• type="password": utilizado para campos de contraseña donde el texto ingresado se oculta por seguridad. También es posible especificar los atributos minLength y maxLength para establecer requisitos de longitud de la contraseña.

number

type="number": utilizado para la entrada de valores numéricos. Se puede definir un rango específico con los atributos min y max, y establecer un valor de incremento con el atributo step.

telephone

type="tel": destinado a la introducción de números de teléfono, pero no realiza ninguna validación sobre la entrada. Corresponde al desarrollador validar la entrada y asegurarse de que sea un número de teléfono válido.

checkbox

type="checkbox": permite al usuario seleccionar una o más opciones de entre las opciones predefinidas. El atributo checked hace que una casilla esté seleccionada por defecto.

radio

type="radio": crea un conjunto de opciones donde solo se puede seleccionar una opción. Un botón de opción representa cada alternativa, y al elegir una se deseleccionan automáticamente las demás. Cada botón de opción debe tener un atributo value único para identificarlo.

range

type="range": crea un control deslizante que permite a los usuarios seleccionar un valor dentro de un rango específico. Se pueden aplicar los atributos min, max, step y value para definir su comportamiento.

Nota

JavaScript no es el enfoque de este curso, por lo que se omitirá la lógica relacionada.

fecha y hora

• type="date": permite a los usuarios seleccionar una fecha desde un calendario emergente;
• type="time": permite a los usuarios ingresar una hora en formato de 24 horas;
• type="datetime-local": combina las entradas de fecha y hora.

Ejemplo:

Nota

Para lograr una apariencia coherente en diferentes dispositivos, a menudo se utilizan soluciones listas para usar para los calendarios emergentes y las entradas de hora.