Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Exploración de los Diferentes Tipos de Entrada en HTML | Formularios HTML y Entrada de Usuario
HTML Definitivo

bookExploració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.
index.html

index.html

copy

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.

index.html

index.html

copy

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.

index.html

index.html

copy

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.

index.html

index.html

copy

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.

index.html

index.html

copy

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.

index.html

index.html

index.js

index.js

copy

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:

index.html

index.html

copy

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.

question mark

¿Cuál es la principal diferencia entre los campos de entrada type="email" y type="password"?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 5

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 2.56

bookExploración de los Diferentes Tipos de Entrada en HTML

Desliza para mostrar el menú

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.
index.html

index.html

copy

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.

index.html

index.html

copy

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.

index.html

index.html

copy

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.

index.html

index.html

copy

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.

index.html

index.html

copy

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.

index.html

index.html

index.js

index.js

copy

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:

index.html

index.html

copy

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.

question mark

¿Cuál es la principal diferencia entre los campos de entrada type="email" y type="password"?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 5
some-alt