También disponible en: English · Português · Français · العربية
Tipos de input en HTML
La lista completa de tipos de input de HTML con sus nombres de estado según la especificación, el soporte medido en tu propio navegador y la regla de reserva que oculta tus errores.
¿Qué son los tipos de input de HTML?
El atributo type de un elemento input elige qué clase de control dibuja el navegador, desde una simple caja de texto hasta un selector de fecha, una muestra de color o un selector de archivos. La especificación HTML define 22 palabras clave, y cada una nombra un estado: type=email es el estado Email, type=datetime-local es el estado Local Date and Time, y así.
Es un atributo enumerado, lo que obliga a la especificación a decir qué pasa cuando el valor es algo que no reconoce. Y lo dice: el valor por defecto por ausencia y el valor por defecto por invalidez del atributo son ambos el estado Text. Esa única frase es la razón de ser de esta página.
Léela con calma y cubre dos situaciones distintas a la vez. Un navegador que no ha implementado un tipo cae a un campo de texto, y también lo hace una palabra clave que simplemente escribiste mal. Las dos producen una caja de texto corriente, sin error, sin aviso en la consola y sin nada en pantalla que las distinga.
Cómo usarla
- Escribe una palabra clave en la caja para comprobarla. Empieza con una errata, porque ese es el caso que conviene ver primero. La herramienta te dice si la especificación define la palabra clave y, cuando no, en qué se va a convertir en silencio.
- Lee la tabla. Las 22 palabras clave con el nombre de estado que la especificación da a cada una, agrupadas por la clase de control que son. La lista es completa, no una selección.
- Mira la última columna. Esa se mide en el navegador con el que estás leyendo, no se copia de una tabla de compatibilidad. Le pide a un elemento input cada tipo y lee lo que dice ser.
Por qué una tabla de compatibilidad es la forma equivocada para esta pregunta
Casi todas las páginas que responden a qué navegadores soportan type=date te dan una rejilla de versiones. Esa rejilla se queda vieja el mismo día en que se publica, no puede saber qué navegador usas tú y desde luego no puede saber cuál usan tus visitantes. Responde a una pregunta sobre el mundo cuando querías una respuesta sobre tu máquina.
La regla de reserva permite una respuesta mejor. Como un tipo no soportado se resuelve al estado Text, puedes preguntárselo directamente a un elemento: asignas la propiedad, la vuelves a leer y, si vuelve como text, el navegador no lo aceptó. Tres líneas, sin biblioteca, sin olfatear versiones, y la respuesta describe el navegador que de verdad está ejecutando el código.
Eso es lo que hace aquí la última columna, y por eso dice comprobando tu navegador hasta que la página ha cargado en vez de dibujar una suposición en el servidor. El servidor no tiene ni idea de lo que usas; fingir lo contrario sería el mismo error que comete la rejilla.
Hay una fila que la comprobación no puede decidir, y la tabla lo dice en vez de esconderlo. Pedir text devuelve text esté o no soportado lo demás, así que esa fila queda marcada como por definición. Todas las demás son medidas de verdad.
La errata que nunca verás
De las dos cosas que cubre la regla de reserva, la errata es la que más duele, porque es enteramente cosa tuya y se parece exactamente al éxito. Escribe type=dat en vez de type=date y tienes un campo de texto. Escribe type=nubmer y tienes un campo de texto. Escribe type=datetime, que llegó a ser una palabra clave de verdad y se retiró del estándar, y tienes un campo de texto.
Nada protesta. La página se dibuja, el formulario se envía, el campo acepta lo que escribas. Lo que pierdes es todo lo que te habría dado la palabra clave correcta: el selector de fecha, el teclado numérico en el móvil, la validación integrada, la restricción que impediría enviar un valor absurdo. En un navegador de escritorio y en pleno desarrollo, un campo de texto donde debería haber un selector de fecha puede pasar semanas desapercibido.
Para eso está la caja de arriba. Pega lo que escribiste de verdad y te dice si la especificación ha oído hablar de ello alguna vez. Es una comprobación pequeña, y es la única que hay, porque por diseño el navegador no te lo va a decir.
Límites declarados
El soporte no es una sola pregunta. Un navegador puede aceptar un tipo, dibujar un control para él y aun así comportarse distinto de otro que también lo acepta: el aspecto del selector de fecha, si respeta un atributo step, cómo formatea un valor para el usuario. Esta página responde solo a la primera pregunta, la de si el navegador aceptó el tipo. Es la que la regla de reserva hace contestable, y no es toda la historia.
La tabla tampoco puede decirte nada de un navegador que no sea el tuyo. Si necesitas saber qué reciben tus visitantes, la medición tiene que ocurrir en sus navegadores, que es un trabajo distinto del de una página como esta.
Faltan aquí dos columnas de la tabla de la propia especificación, y es a propósito. También lista un tipo de dato y un tipo de control para cada palabra clave, y al extraerlas las columnas se desplazaron al menos en una fila: la entrada de file salió describiendo un tipo MIME donde va el tipo de control. Publicar una tabla que parece correcta y no lo es es peor que publicar una más corta que sí lo es, así que aquí solo van la palabra clave y el nombre de estado.
Por último, la especificación cambia. Se han añadido palabras clave con los años y al menos una se ha retirado, así que una lista es una foto del estándar tal y como está. La regla de reserva es la parte que no se ha movido, y es la que conviene recordar.
¿Por qué es gratis?
La lista es estática y la comprobación corre en tu navegador. No hay ningún servidor de por medio, así que no hay nada que cobrar ni cuenta que crear.
No se sube nada y no se guarda nada. Recarga la página y habrá olvidado lo que escribiste.