Sadly, neither HTML inputs nor JavaScript itself support a duration data type. <input type="time"> is for a time of the day, and may display AM/PM selectors depending on your locale.

Your best bet is to work with a text input and to use JavaScript events to automatically insert : and ignore invalid inputs. Using the pattern attribute may also help. Be sure to convert the value to a number before using it from the JavaScript side of things. Here's something to get you started.

{
  let durationIn = document.getElementById("duration-input");
  let resultP = document.getElementById("output");
  
  durationIn.addEventListener("change", function (e) {
    resultP.textContent = "";
    durationIn.checkValidity();
  });
  
  durationIn.addEventListener("invalid", function (e) {
    resultP.textContent = "Invalid input";
  });
}

input:invalid:not(:focus) { background: red; }

<input id="duration-input" type="text" required pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}:[0-9]{2}" value="00:00:00:00" title="Write a duration in the format hh:mm:ss:ms">

<p id="output"></p>

I'm sure there are many open-source libraries which provide a ready-made widget for that.

Maybe try something like this:

<input type="time" step="0.001">

<label for="appt">Choose a time for your meeting:</label>

<input type="time" id="appt" name="appt"
       min="09:00" max="18:00" required>

<small>Office hours are 9am to 6pm</small>

Try this... I hope this helps ! This is something I did for one of my projets...