input type="time"

La etiqueta <input> en HTML, tiene como valor "time" en su atributo type, input type="time" esto simboliza a un campo para la entrada de una hora. Actualmente en los navegadores modernos, este campo es representado por controles que le permite a los usuarios finales a cambiar su valor de manera gráfica, esto ahorra tiempo de estar ingresando directamente como una cadena.
Para el envío del formulario agente procesador, navegadores hacen un proceso de conversión la información ingresada a una cadena qué representa a la hora ingresada. Para componer una hora válida tenemos las siguientes reglas.

Composición de una Hora: 12:00

• Los dos primeros dígitos representan la hora, entre 0 a 23.
• El carácter separador dos puntos (:).
• Los dos últimos dígitos representa el minuto está entre 0 a 59.

ejemplos:

En este presente ejemplo crearemos un formulario <form> con el campo de la hora, usted entenderá más viendo su funcionalidad en el resultado de este ejemplo.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> Time </legend>
        <label> Ingrese tiempo: <input type="time"> </label>
        <input type="submit" value="Enviar datos">
    </fieldset>
</form>

En este siguiente ejemplo facilitaremos una lista de valores sugeridos para el control de horas, para ello haremos el uso de la etiqueta <datalist> a través de esta lista el usuario final podrá seleccionar rápidamente uno de los valores de la lista. La etiqueta <datalist> hace un enlace con el atributo id de la lista y el atributo list del control.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> Time </legend>
        <label> Elige su hora de almuerzo: <input type="time" list="lista"> </label>
        <input type="submit" value="Enviar datos">
    </fieldset>
</form>
<datalist id="lista">

    <option value="02:22">

    <option value="01:23">

    <option value="12:24">

    <option value="05:24">

</datalist>

 

Para límite de horas en este último ejemplo trabajaremos con los atributos min, max. Este límite de horas se podría utilizar para restricciones de horas que el usuario podría ingresar. Con estos dos atributos estamos dando una hora mínima y una hora máxima, en este ejemplo sólo permitirá que el usuario ingrese de 8:00 a 12:00 como valor en el campo de input type="time" y para el envío de formulario es necesario que cumpla con los valores de los atributos min y max.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> Time </legend>
        <label> Elige su hora de almuerzo: <input type="time" min="08:00" max="12:00"  > </label>
        <input type="submit" value="Enviar datos">
    </fieldset>
</form>