soy Kseso y esto EsCSS

Todos los 13 nuevos inputs de Html5 y su Css asociado

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

avatar del Editor del blog

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