Input Tipos

HTML proporciona varios elementos <input> que permiten capturar diferentes tipos de datos de los usuarios. Vamos a explorar algunos tipos de entrada de uso común:

email y password

• type="email": Se utiliza para los campos de entrada de correo electrónico que requieren una dirección de correo electrónico válida. El navegador valida automáticamente la dirección de correo electrónico, pidiendo al usuario que corrija las entradas no válidas;
• type="password": Se utiliza para campos de contraseña en los que el texto introducido está enmascarado por seguridad. También podemos especificar los atributos minLength y maxLength para establecer los requisitos de longitud de la contraseña.

Ejemplo:

number

type="number": Se utiliza para la entrada numérica. Podemos definir un rango específico con los atributos min y max y establecer un valor de paso específico con el atributo step.

Ejemplo:

telephone

type="tel": Pensado para introducir números de teléfono, pero no realiza ninguna validación de la entrada. Corresponde al desarrollador validar la entrada y asegurarse de que se trata de un número de teléfono válido.

Ejemplo:

checkbox

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

Ejemplo:

radio

type="radio": Crea un conjunto de opciones donde sólo se puede seleccionar una opción. Cada opción está representada por un botón de radio, y la selección de una de ellas anula automáticamente la selección de las demás. Cada botón de radio debe tener un único atributo value para identificarlo.

Ejemplo:

range

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

Ejemplo:

Nota

Aprenderemos JavaScript en los siguientes cursos. No es el contexto de este curso.

date y time

• type="date": Permite a los usuarios seleccionar una fecha de un calendario emergente;
• type="time": Permite a los usuarios introducir una hora en formato de 24 horas;
• type="datetime-local": Combina la hora y la fecha.

Ejemplo:

Nota

Para que el estilo sea coherente en los distintos dispositivos, se suelen utilizar soluciones ya preparadas para los calendarios emergentes y las entradas de hora.