Summary  
This chapter explores various HTML input types and their attributes for collecting and validating user data, including email, password, numeric ranges, telephone numbers, selection controls, and date/time pickers.

General domain of usage  
Web form development

HTML ofrece muchos tipos de `<input>` que permiten recopilar diferentes tipos de datos de usuario. A continuación se presenta una descripción general de los más comunes.

## Correo electrónico y contraseña
- `type="email"`: acepta direcciones de correo electrónico y realiza una validación básica en el navegador;
- `type="password"`: oculta los caracteres escritos por seguridad y puede utilizar `minlength` y `maxlength`.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPCEtLSBFbWFpbCBpbnB1dCAtLT4KICA8bGFiZWwgZm9yPSJtYWlsIj5FbWFpbDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9ImVtYWlsIiBpZD0ibWFpbCIgLz4KICAKICA8IS0tIFBhc3N3b3JkIGlucHV0IC0tPgogIDxsYWJlbCBmb3I9InBhc3N3b3JkIj5QYXNzd29yZDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InBhc3N3b3JkIiBpZD0icGFzc3dvcmQiIC8+CiAgCiAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlN1Ym1pdDwvYnV0dG9uPgo8L2Zvcm0+

## Número
`type="number"`: acepta valores numéricos. Usar `min`, `max` y `step` para controlar el rango permitido.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0ieWVhciI+WWVhciBvZiBiaXJ0aDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9Im51bWJlciIgbWluPSIxOTAwIiBtYXg9IjIwMjMiIGlkPSJ5ZWFyIiAvPgoKICA8bGFiZWwgZm9yPSJoZWlnaHQiPkhlaWdodCB3aXRoIDAuMSBzdGVwPC9sYWJlbD4KICA8aW5wdXQgdHlwZT0ibnVtYmVyIiBpZD0iaGVpZ2h0IiBzdGVwPSIwLjEiIG1pbj0iMC4xIiBtYXg9IjEwLjAiIC8+CgogIDxidXR0b24gdHlwZT0ic3VibWl0Ij5TdWJtaXQ8L2J1dHRvbj4KPC9mb3JtPg==

## Teléfono
`type="tel"`: para números de teléfono. Sin validación incorporada. La validación debe realizarla el desarrollador manualmente.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0icGhvbmUiPlBob25lIG51bWJlcjo8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJ0ZWwiIGlkPSJwaG9uZSIgLz4KCiAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlN1Ym1pdDwvYnV0dG9uPgo8L2Zvcm0+

## Casilla de verificación
`type="checkbox"`: permite seleccionar múltiples opciones. Usar `checked` para preseleccionar.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPHA+V2hhdCBpcyB5b3VyIGZhdm9yaXRlIHNlYXNvbj88L3A+CiAgPGxhYmVsPgogICAgV2ludGVyCiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9IndpbnRlciIgdmFsdWU9IndpbnRlciIgY2hlY2tlZCAvPgogIDwvbGFiZWw+CiAgPGxhYmVsPgogICAgU3ByaW5nCiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9InNwcmluZyIgdmFsdWU9InNwcmluZyIgLz4KICA8L2xhYmVsPgogIDxsYWJlbD4KICAgIFN1bW1lcgogICAgPGlucHV0IHR5cGU9ImNoZWNrYm94IiBuYW1lPSJzdW1tZXIiIHZhbHVlPSJzdW1tZXIiIC8+CiAgPC9sYWJlbD4KICA8bGFiZWw+CiAgICBGYWxsCiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giIG5hbWU9ImZhbGwiIHZhbHVlPSJmYWxsIiAvPgogIDwvbGFiZWw+CjwvZm9ybT4=

## Radio
`type="radio"`: selecciona una opción de un grupo. Todos los radios deben compartir el mismo `name`.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPHA+V2hhdCBpcyB5b3VyIGZhdm9yaXRlIGZvb2Q/PC9wPgogIDxsYWJlbD4KICAgIDxpbnB1dCB0eXBlPSJyYWRpbyIgbmFtZT0iZGlzaCIgdmFsdWU9InBhc3RhIiBjaGVja2VkIC8+CiAgICBQYXN0YQogIDwvbGFiZWw+CiAgPGxhYmVsPgogICAgPGlucHV0IHR5cGU9InJhZGlvIiBuYW1lPSJkaXNoIiB2YWx1ZT0icGl6emEiIC8+CiAgICBQaXp6YQogIDwvbGFiZWw+CiAgPGxhYmVsPgogICAgPGlucHV0IHR5cGU9InJhZGlvIiBuYW1lPSJkaXNoIiB2YWx1ZT0iYnVyZ2VyIiAvPgogICAgQnVyZ2VyCiAgPC9sYWJlbD4KICA8bGFiZWw+CiAgICA8aW5wdXQgdHlwZT0icmFkaW8iIG5hbWU9ImRpc2giIHZhbHVlPSJzdGVhayIgLz4KICAgIFN0ZWFrCiAgPC9sYWJlbD4KPC9mb3JtPg==

## Control deslizante de rango
`type="range"`: un control deslizante para seleccionar un número dentro de un rango. La lógica de JavaScript se omite en este curso.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0iZGF5Ij5EYXkgb2YgdGhlIHdlZWs8L2xhYmVsPgogIDxpbnB1dCBpZD0iZGF5IiB0eXBlPSJyYW5nZSIgdmFsdWU9IjUiIG1pbj0iMSIgbWF4PSI3IiBzdGVwPSIxIiAvPgo8L2Zvcm0+CjxwPlNlbGVjdGVkIHZhbHVlOiA8c3BhbiBjbGFzcz0ic2VsZWN0ZWQtdmFsdWUiPjU8L3NwYW4+PC9wPgo8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0Pg==

Y29uc3QgcmFuZ2VJbnB1dCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2lucHV0W3R5cGU9InJhbmdlIl0nKTsKY29uc3Qgb3V0cHV0ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLnNlbGVjdGVkLXZhbHVlJyk7CnJhbmdlSW5wdXQuYWRkRXZlbnRMaXN0ZW5lcignaW5wdXQnLCBlID0+IChvdXRwdXQudGV4dENvbnRlbnQgPSBlLnRhcmdldC52YWx1ZSkpOw==

La lógica de JavaScript se omite en este curso.

Nota

## Fecha y hora
- `type="date"`: selector de calendario;
- `type="time"`: selector de hora;
- `type="datetime-local"`: combina entradas de fecha y hora.

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPCEtLSBEYXRlIGlucHV0IC0tPgogIDxsYWJlbCBmb3I9ImRhdGUiPkRhdGU8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJkYXRlIiBtaW49IjE5NzAtMDEtMDEiIG1heD0iMjA3MC0wMS0wMSIgaWQ9ImRhdGUiIC8+CgogIDwhLS0gVGltZSBpbnB1dCAtLT4KICA8bGFiZWwgZm9yPSJ0aW1lIj5UaW1lPC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGltZSIgaWQ9InRpbWUiIC8+CgogIDwhLS0gRGF0ZSBhbmQgVGltZSBpbnB1dCAtLT4KICA8bGFiZWwgZm9yPSJmdWxsLXRpbWUiPkRhdGUgYW5kIFRpbWU8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJkYXRldGltZS1sb2NhbCIgbWluPSIxOTAwLTAxLTAxVDAwOjAwIiBtYXg9IjIwMDAtMDEtMDFUMDA6MDAiIGlkPSJmdWxsLXRpbWUiIC8+CjwvZm9ybT4=

Para un estilo consistente, los desarrolladores suelen utilizar bibliotecas de interfaz de usuario predefinidas en lugar de los selectores predeterminados del navegador.

Es posible que hayas notado que al intentar completar ciertos campos, el navegador ya puede sugerir algunas opciones de autocompletado. El navegador recuerda los valores que has ingresado en los campos y luego te los sugiere para completar automáticamente.

Estudia más

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

Aprenda los conceptos esenciales de HTML (Lenguaje de Marcado de Hipertexto), la base del desarrollo web. Este curso introductorio cubre etiquetas, atributos, elementos y la estructuración de páginas web. Adquiera habilidades prácticas en la creación de encabezados, párrafos, listas, imágenes, enlaces, formularios y tablas. Explore buenas prácticas, optimización y accesibilidad web. Inicie su trayectoria en desarrollo web con HTML.

Explora el funcionamiento interno de la web. Descubre cómo los datos se transmiten a través de las redes, el papel de los protocolos y los conceptos de direcciones IP y nombres de dominio. Obtén una visión general de cómo los navegadores web y los servidores se comunican para entregar contenido web.

Descubra el poder de las etiquetas para estructurar el contenido, desde encabezados y párrafos hasta listas y tablas. Aprenda cómo mejorar los elementos con atributos.

El núcleo de la estructura de un documento HTML. Aprenda los componentes de un documento HTML, incluyendo la declaración doctype, head y body. Comprenda el propósito de cada elemento y cómo contribuyen a la estructura general de una página web.

Mejorar la apariencia de una página web mediante el uso de medios como imágenes, audio y video. Manipulación de datos tabulares estructurados en forma de tablas.

Explore la versatilidad de los formularios HTML. Aprenda a diseñar formularios intuitivos y fáciles de usar mediante el aprovechamiento de conceptos y técnicas clave. Descubra cómo los formularios permiten la interacción del usuario y el envío de datos en los sitios web.

Explorando Diferentes Tipos de Entrada en HTML

Correo electrónico y contraseña

Número

Teléfono

Casilla de verificación

Radio

Control deslizante de rango

Fecha y hora