Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


Time input HTML5: Un campo de formulario para introducir la hora

Nueva entrada sobre un nuevo input HTML5 para formularios, esta vez voy a hablar del time input HTML5 que nos servirá para introducir una hora determinada en nuestros formularios web.

Es un input similar a los que ya comenté en su día como el date input, datetime input o month input y que se puede complementar perfectamente con las funciónes de fechas en PHP date o time.

No confundir este input con la etiqueta time, tienen finalidades muy diferentes.

Sintaxis del time input HTML5

Voy a explicaros la sintaxis extraída de su página web oficial:

Poco misterio tiene el código superior, tan solo con decir de que tipo es el input y su nombre ya tendríamos en nuestro formulario un campo para formatos de tipo hora.

Pero os voy a poner algunos valores que podemos poner por defecto en este input:

  • El formato de hora devuelto por defecto es HH:MM:SS.
  • Se puede configurar una hora mínima a seleccionar con el atributo ‘min‘:
    min=”10:00:00″.
  • Se puede configurar una hora máxima a seleccionar con el atributo ‘max‘:
    min=”22:30:00″.
  • Con el atributo ‘value‘ se puede poner una hora concreta por defecto:
    value=”11:45:00″.
  • Con el atributo ‘step‘ puedes establecer el avance o retroceso de las horas y minutos.

Demo de ejemplo del time input HTML5

En esta demo de ejemplo del time input HTML5  podéis comprobar el funcionamiento de este nuevo elemento.

time input html5Aquí os pongo el código del ejemplo:

Os describo el ejemplo probado en Google Chrome:

  • Creo un formulario para crear dentro el botón de enviar y el time input.
  • Al input le pongo con el atributo max una hora máxima.
  • Con el atributo min le pongo una mínimo de hora a insertar.
  • Por defecto la hora que saldrá sera las 11:45:00 con el atributo value.
  • Y para terminar con el atributo step establezco el avance de las flechas.

Mensajes de advertencia del time input

Probad en la demo a meter una hora por debajo o por encima de los valores establecidos por defecto, os saldrán automáticamente mensajes como este.mensajes time input html5De esta manera no tenemos que poner sentencias de control gracias a los atributos anteriormente mencionados.

Atributos válidos en time input HTML5

Voy a listaros los atributos válidos para este input según la W3C.

  1. name: Nombre del input (name=”nombre del input”).
  2. disabled: Atributo que determina si está desactivado el input para la introducción de datos (disable=”disabled”), por defecto activado.
  3. type: tipo de input, en este caso es ‘time’
  4. form: Con este atributo se asocia el id del form al que pertenece el input (form=”id del form”).
  5. autocomplete: Con autocomplete activado el input se autorrellenará con contenidos anteriormente enviados por él mismo (autocomplete=”off”, autocomplete=”on”).
  6. autofocus: Este atributo hace que el cursor se situe en en input (autofocus=”autofocus”).
  7. list: Asocia mediante id una lista de valores predefinidos (list=”nombre lista”).
  8. readonly: Con el valor activado el input no podrá variar de valor, no se podrá editar (readonly=”readonly”).
  9. required: Determina si el input tiene que ser rellenado obligatoriamente (required=”required”).
  10. value: Valor por defecto del input.
  11. min: Valor mínimo de la hora.
  12. max: Valor máximo de la hora.
  13. step: Valor del intervalo de hora.
  14. novalidate: Hace que el input no se valide al enviarse el formulario.

Listado de los nuevos input HTML5

En esta url tenéis el listado completo de los nuevos input de HTML5.

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies