Todos los 13 nuevos inputs de Html5 y su Css asociado

Todos los nuevos input type de Html5. Con demo para ver en funcionamiento la validación nativa y los elementos generados en función del tipo de input que sea.

Todos los 13 nuevos inputs de Html5 y su Css asociado

Por Kseso ✎ 45

Un elemento que ha visto incrementado en un gran número sus subtipos con la llegada de html5 son los input. Para ser exactos son 13 los nuevos tipos de input disponibles.

Entre otras novedades están los selectores de tiempo, ya sean fechas (días, semanas...) u horarios, de color, de listas... étc.

Los beneficios y ahorro de trabajo que su uso puede suponer son múltipes:

  1. Los hay que evitan su validación, ya sea del lado del cliente o del servidor. Como por ejemplo los de tipo fecha, correo direcciones web...
  2. Al desarrollar interfaces se reduce la dependencia de la plataforma donde se ejecuten. El cómo se muestren es función, principalmente, del tipo de input.
  3. Y con todos y cada uno de ellos el código necesario para la creación del contenido del input según su tipo se lo dejas al navegador.

Un ejemplo de esto último. Si necesitas un calendari para seleccionar fechas, no hay color entre hacerlo a la vieja usanza o diréctamente escribir <input type="date"/> y que sea el agente de usuario el que se lo curre para obtener los siguiente:

Pero como todo lo bueno, esto también tiene una pequeña contra en estos tiempos. Su funcionalidad y por lo tanto el uso depende del navegador. No todos los soportan todos.

Todos los 13 nuevos <input type=''/>de Html5

Estos son los nuevos 13 tipos de campos de formularios introducidos por Html5. Recuerda que para poder verlos e interactuar con ellos necesitas un navegador que le de soporte.

  1. Fecha

    <input type="date"/>
  2. Hora

    <input type="time"/>
  3. Fecha y Hora

    <input type="datetime"/>
  4. Fecha y hora local

    <input type="datetime-local"/>
  5. Mes

    <input type="month"/>
  6. Semana

    <input type="week"/>
  7. Número

    <input type="number"/>
  8. Color

    <input type="color" style="width:120px;" value="#A1135B">
  9. Mail

    <input type="email" placeholder="Format: algo@dir.dom"/>
  10. Url

    <input type="url"/>
  11. Teléfono

    <input type="tel" pattern="[0-9]{10}" placeholder="Formato: 0987654321"/>
  12. Rango

    <input type="range" max="20" min="1"/>
  13. Búsqueda acotada

    <input type="search" list="opciones-ejemplo"/>
    <datalist id="opciones-ejemplo" style="display:hidden;">
    <option value="Opcion1.es"> </option>
    <option value="Opcion2.com"> </option>
    <option value="Ksesocss.dom"> </option>
    </datalist>

Sólo a efectos de prueba, y para que veas de validación nativa por parte del navegador, haz lo siguiente:

  • Introduce en alguno de los inputs anteriores un valor erróneo, por ejemplo: en el de mail, escribe algún carácter que no incluya la @
  • A continuación pulsa el siguiente botón de subir.
  • Si todo va bien verás que tras pulsar Enviar se desplaza la pantalla al input correspondiente y verás el aviso de error.
Validacion en navegador de un input Html5
Validación nativa por el navegador de un input

En algunos, como te decía, es el navegador el que construye todo el contenido asociado a él, como los selectores de fechas:

> Generación calendarios por input de Html5
Generación calendarios por input de Html5

Y en otros casos, como el selector de color, el navegador accede a aplicaciones del SO:

Acceso a apliaciones del SO por el input de Html5
Acceso a apliaciones del SO por el input de Html5

Como curiosidad final, el cómo construye cada navegador el contenido de cada input varía. Éste es el marcado de Chrome, a base de pseudoelementos privativos. Pseudoelementos a los que ya dediqué un artículo.

Construcción del input Html5 por Chrome

Pseudoclases de estado para los nuevos inputs

La respuesta de Css a estas nuevas funcionalidades vienen de la mano de las pseudoclases de estado. Puedes conocerlas en este artículo: las nuevas pseudoclases aplicadas a la validación de campos.

Así mismo, otro documento de Css en desarrollo que también afecta a los inputs de Html5 y su forma de construcción por el navegador, es el CSS Scoping Module Level 1 para acceder al shadow dom de ellos.

Este artículo fue publicado originalmente el 23/6/13 y actualizado el 13/10/2014

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 45

  1. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Lo siento, pero elimino el contenido de tu comentario.
      Dos son las razones:
      No aporta nada a los usuarios de mi blog y mucho me temo que la razón última y verdadera de hacerlo no haya sido ponderar la calidad del mismo, sino dejar un enlace a tu blog.

      Un saludo

      Eliminar
    2. Fantástico Kseso,

      llevaba tiempo buscando como poder modificar estilos y tener acceso al marcado de los pseudoelementos como el calendario del input de html 5.

      Con el tiempo seguramente sacarán algún selector oficial (:pseudo por ej.) para editar estos componentes sin recurrir a prefijos de navegador.

      Gracias figura.

      Eliminar
    3. Hola Sergio.
      Quizás ya conozcas este artículo del Blog Gozos y quebrantos. Apariencia y pseudo elementos privativos
      Si se te ha pasado, dale una lectura y ya me cuentas ;-)

      Un saludo

      Eliminar
  2. Mola esto y como dices ahorrará mucho tiempo ¿me salté alguna tabla de compatibilidad o simplemente no dispones de ninguna?

    ResponderEliminar
    Respuestas
    1. Disculpen que me meta, pero creo que la tabla más completa de compatibilidad está en el sitio de MDN (no pongo el link, porque aún no está en español :P).
      Como curiosidad, digamos que quien menos soporta estos atributos es justamente Mozilla.
      El caso de Internet Explorer es más perdonable, porque ya tenía varios de estos inventos mucho antes de que existiera HTML5 (como el spinbutton para 'number', o el color-pick de 'color'), ahora solamente debe hacerlos compatibles para la próxima versión.

      Eliminar
    2. En Google Chrome 27 todos se ven y funcionan correctamente. En Firefox 21 todos se muestran como si fueran type="text", aunque el único que funciona es la búsqueda acotada. En IE 9 o inferior, no funciona nada, se muestran como type="text". En IE 10 sólo funciona el type="range".

      Eliminar
    3. Gracias por las ampliaciones, Furoya y Jorge MG, al artículo y las dudas de Oloman.

      Como complemento, en FF 22 se muestran como en el 21, tipo input textual, y la verificación en unos sí y otros no. El mail sí advierte, pero el número no.

      En Opera 12.15 la estética y representación falla en algunos, aunque sí son funcionales (visualmente). Pero no sale globo de error en la verificación.

      En safari 5 falla en los desplegables (no los muestra) y tampoco la verificación de errores. Y el color muestra el código hexa como texto.

      Un saludo

      N.B.: Furoya mis disculpas. Sé que te debo respuesta a unos correos con aportes y demás. A ver si puedo sacar un rato.

      Eliminar
    4. No, está bien; por mí ni hace falta disculparse sobre nada. Y no mencionaría esto publicamente, pero ya que lo pusiste en un destacado al pie aclaro que no estamos hablando exactamente de un aporte, sino más bien de un engendro que hice de caprichoso, por probar que se podía implementar un riego tan lejos del cantero. No es práctico, pero ¿a quién se lo iba a mostrar y que me tuviese la paciencia necesaria para no insultarme?.
      No hay ningún apuro. Ni ninguna obligación.

      Volviendo al otro asunto, es cierto lo tuyo Jorge MG, en IE10 estos ejemplos no se ven. Y me sorprende un poco.
      El range -sí, el único junto con el datalist- se ve mucho más estilizado de lo que era en otras épocas (¿se acuerdan de la "regla" y el botón deslizable en forma de triángulo con el field?); pero al resto va a haber que compatibilizarlo con javascript; o como al color, con dlgHelper y JScript; o al number, con un object y VBScript.
      Un detalle con Opera: el datalist no debe aceptar algún estilo, porque lo estoy viendo como una capa negra, como si el texto y el fondo fuesen del mismo color. Y así no se pueden leer las opciones. Lo voy a estudiar después para estar seguro.

      Eliminar
    5. Furoya, me parece que los estilos del datalist están mal escritos: display: hidden; no existe, lo correcto sería display: none; o visibility: hidden;. Saludos.

      Eliminar
    6. No, no te parece : están mal escritos. 8P
      Seguramente eso se escapó de alguna prueba, o es algún hack para algún navegador, o ambos. No le di importancia porque se supone que Opera (y otros que recuerdo) simplemente lo ignoran. Y ponen el valor por omisión que es 'display: none'. Para muestra, esto es una copia de los estilos default de Firefox
      /* hidden elements */
      base, basefont, datalist,
      head, meta, script, style,
      title, noembed, param {
      display: none;
      }

      La verdad es que tengo pocas ganas de desarmar los estilos de bloguer para saber dónde está el conflicto que pone en negro la lista de opciones. Que -ya que estamos corrigiendo- no necesitan 'value' como las del 'select', pero sí necesitan el texto.

      N.B.: Creo que nuestro amigo Kseso lo hace a propósito para ver quién lee hasta el final sus entradas de blog. Lo digo, porque yo hacía exactamente lo mismo cuando publicaba en algún sitio. ;-)

      Eliminar
    7. Complementando mi anterior comentario sobre la compatibilidad con los navegadores, he comprobado que en Firefox Mobile 23 funciona todo excepto el selector de color. Saludos.

      Eliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. ¿Has intentado dar tamaños a los inputs con la propiedad line-height en vez de height?
      Y padding sólo en los laterales.

      Así también te aseguras que el texto ingresado en el campo de búsqueda quedará centrado en la vertical.

      Un saludo

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Para mantener el rigor del blog y evitar que nadie en un futuro se llame a engaño he de corregir su afirmación de que Line-height solo funciona si el input es de tipo texto... y marcarla como inexacta y errada.
      line-height sí es plénamente funcional en inputs de tipo search

      Posíblemente en su caso se haya olvidado de que tiene declaradas otras propiedades que influyen en los tamaños, como heights, paddings verticales, etc.

      Un saludo

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
    5. La verdad, Jorge, que su insistencia me confunde. O bien no he sabido comprenderle o explicarme.
      Line-height es plénamente funcional en inputs de tipo submit como es lo que quiere hacer. Repito, si le he comprendido bien.

      Mire esta captura en vídeo de su propia página y cómo la altura del input obedece sin rechistar al valor de line-height. Eso sí, anulando la altura que tiene declarada.
      Line-height en inputs submit.

      Si no es eso... estamos hablando de cuestiones muy diferentes y no sé cuál es la suya.

      Un saludo

      Eliminar
    6. Este comentario ha sido eliminado por el autor.

      Eliminar
    7. Es igual Jorge, tipo text, que search, que submit...
      Me gusta ser muy cuidadoso en mis afirmaciones y procuro verificar la veracidad de mis afirmaciones antes de hacerlas.
      Le repito, line-height es plenamente funcional por partida doble. Aumenta la altura del input y centra en contenido en la vertical... siempre que otras declaraciones no lo impidan.

      Desconozco todo el css que en su página afecta al caso, échele un vistazo con el inspector para descubrir los estilos, los heredados también.

      Como prueba de mi afirmación

      Un saludo

      Eliminar
    8. Este comentario ha sido eliminado por el autor.

      Eliminar
    9. Nah!!! Lo importante es que al final encontraste al "culpable" y pudiste hacer lo que pretendías.

      Un saludo.

      Eliminar
  4. Muy buen post, justo estoy empezando a programar en HTML5 y no conocia todas estas funciones :)
    Saludos

    ResponderEliminar
  5. muy interesante, aunque en mozilla no se ve bien.. el 20% de mis visitantes utiliza mozilla, el 35% chrome, 18% safari y los demás % se dividen en otros navegadores(según google analitycs), entonces yoq creo eventos y necesito del calendario esta funcion nome sirve d emucho ya q tendria q implementar un calendario para mozilla, y de ser eso, ps lomejor seriaimplementarlo para todos y quitarmede broncas y de adapataciones de un navegador a otro, o acaso hay una solución para calendario en mozilla?

    ResponderEliminar
    Respuestas
    1. Hola Segio
      En este hilo de los comentarios iniciado por Oloman se ha ido ampliando la información relativa al soporte.

      Pero en este blog no sólo se tratan temas "útiles" y/o usables en el momento de publicarlos. Desde el inicio he querido potenciar también la parte divulgativa.

      Sobre si utilizar algo o no es decisión de cada uno en función de las particularidades de cada caso concreto. Son muchas las variables a tener en cuenta y en cada situación primarán unas u otras.

      Sobre tu pregunta final: desconozco si hay algún calendario para Mozilla. Pero según apunta Jorge MG hoy mismo en el hilo que te decía antes, FF mobile v23 ya soporta todos menos el selector de color. Así que supongo que pronto lo veremos en la versión de escritorio.

      Un saludo.

      Eliminar
  6. Alguien sabrá como quitarle el pm o am al type ='TIME' de un input y agregarle segundos....agradecería el apoyo.

    ResponderEliminar
    Respuestas
    1. No es difícil encontrar data sobre el asunto. Ni hay que ir demasiado lejos.

      Gozos y quebrantos. Apariencia y pseudo elementos privativos


      <style>
      input::-webkit-inner-spin-button {display: none; }
      </style>

      <input type=time step=1 />


      [Edito: perdón, pedíste el AM/PM y supuse que hablabas de los botones. Es que eso tiene que depender de la configuración local. De otra forma, siempre se puede usar 'number' y limitar el rango a 00-24 : 00-59 : 00-59 ]

      Eliminar
  7. Alguien sabrá como quitarle el pm o am al type ='TIME' de un input y agregarle segundos....agradecería el apoyo.

    ResponderEliminar
  8. como puedo validar un calendario donde no me acepte una fecha que no a llegado.
    ejemplo hoy es 09 de abril del 2014. que no me acepte 10 de abril del 2014

    ResponderEliminar
    Respuestas
    1. Tu pregunta invita más a la repregunta que a la respuesta.

      ¿A qué llamás "calendario"? ¿A un 'input type=date'?

      ¿Cómo lo validás? No sé si algún navegador acepta 'pattern'; ¿viste que esté correcto?

      Esto es una vergüenza, pero en vista del estilo de tu pregunta: ¿no hay un 'min' o un 'max' sueltos por ahí?

      A mi en Chrome me lo valida perfectamente.


      Un buen artículo de este blog para que leas es
      Consultas...

      Eliminar
    2. Aaaah!, perdón, ahora leo mejor. No te estás quejando porque te limita el rango. Lo que querés es justamente que limite el rango hasta la fecha.

      (Qué mal estoy leyendo en este artículo, el próximo prometo que lo veo mejor.)

      Justamente hablamos de eso hace un tiempo, CSS no provee un medio para acceder a la fecha actual. Podría perfectamente, pero no lo hace. Hay que recurrir a un escript que capture la fecha y la pase como valor de 'max='. O validarlo totalmente del lado servidor, que sería lo más seguro. Después vemos cómo le cambiamos el color o avisamos del error en el documento.

      Eliminar
  9. Amigo y el CSS donde esta?

    ResponderEliminar
    Respuestas
    1. No se necesita CSS para la validación de los inputs, tan solo indicar el atributo type. Si te interesa el CSS del blog, mira el código fuente, que ahí está todo.

      Eliminar
    2. Alan
      Los inputs son elementos html "construidos" por el navegador en base al type declarado (como te indica Jorge.

      Si el Css por el que preguntas es el relativo al susceptible de ser declarado a estos elementos, creo que te pudo la impaciencia y no prestaste atención al último punto del artículo: "Pseudoclases de estado para los nuevos inputs" en el que hay dos enlaces.

      Un saludo

      Eliminar
  10. Muy completo el artículo.
    En el input tipo de URL pone que es DATE, creo que hay un error. ;)

    Saludos!

    ResponderEliminar
    Respuestas
    1. Buena capacidad de observación, BsB
      Efectivamente, al transcribirlo erré.
      Gracias por la corrección.

      Un saludo

      Eliminar
  11. Le puedo cambiar le tamaño al input="date"??

    ResponderEliminar
    Respuestas
    1. ¿Lo intentaste con la propiedad Css font-size?
      Eso para el input.
      El calendario que crea ya está en el shadow-dom y el soporte y futuro del selector /deep/ es escaso e incierto.

      Un saludo

      Eliminar
  12. Hola quiero hacer que un boton me lleve a un enlace segun un dato introducido en el cuadro de texto del formulario, el codigo va asi:
    [code]‹form class="form-inline" role="form"›
    ‹div class="form-group"›
    ‹label class="sr-only" for="cedula"›Cedula‹/label›
    ‹input type="number" class="form-control" id="cedula"
    autocomplete="off" placeholder="Introduce tu cedula"›
    ‹/div›
    ‹button type="submit" class="btn btn-default" href="ENLACE"›Buscar‹/button›
    ‹/form›[/code]
    Como hago para hacer que el enlace me tome el numero del cuadro de texto y lo concatene con .pdf para ir al archivo respectivo?, algo como: [code]archivos/cedula.pdf[/code], donde cedula es el numero introducido en el cuadro del formulario.

    Gracias por sus respuestas.

    ResponderEliminar
    Respuestas
    1. Obviamente, no con CSS.

      Lo podés hacer con JS y que el mismo navegador abra el PDF. Está explicado en mil sitios (inclusive en éste, en algunos artículos sobre javascript) cómo concatenar cadenas de texto.
      En tu código hay un "submit", así que también podrías enviar los datos por separado al servidor y con algún otro lenguaje (como PHP) podrías juntar los valores enviados y así abrir el nuevo documento, algo que también está explicado por todos lados.

      No estoy seguro de que éste sea el mejor lugar para venir con preguntas de tal calibre.

      Eliminar
    2. Hola Kevin
      Como bien te indica Furoya eso es algo relativo al back-end y, por lo tanto, totalmente ajeno a las encomiendas de Css.
      Aunque quisiese no podría facilitarte código exprofeso y las nociones genéricas ya te las ha apuntado Furoya.

      Un saludo

      Eliminar
    3. Perdón por ofenderlos.

      Eliminar
    4. En lo personal, a mí no me ofendiste.
      Aunque es cierto que el artículo sobre los "input" de HTML 5 no tiene nada que ver con tu consulta.

      Te iba a poner, además de los datos para buscar de mi comentario anterior, alguna línea de javascript que abre un nuevo documento. Pero el probelma es que son varios los modos de hacerlo, y algunos ya están obsoletos aunque en ciertos navegadores aún funcionan. Lo mejor es que busques en manuales y tutoriales donde explican cada uno para que puedas elegir.

      Y después me acordé que además de mostrar ejemplos para capturar el valor de un input con JS, en esos artículos que Kseso bautizó "Javascript con Furoya" :-/ también está justamente cómo llamar a un archivo con un número insertado en la ruta; que era para imágenes, pero sirve para todo.

      Eliminar
    5. Hola Kevin
      No tienes por qué disculparte. No ofendiste a nadie. Así que por ese lado pierde cuidado.

      Lo único que preguntaste algo ajeno por completo a la temática del blog y así te lo comentamos. Ni más ni menos.
      Ni tu faltaste al preguntar ni, creo, hubo intención de ofensa en las respuestas.

      Un saludo

      Eliminar
    6. Ok gracias nuevamente por tomarse el tiempo en responderme, use JS a la final tomare las previsiones de no romper con los hilos del blog.

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap