Best way to put input fields that take minutes and seconds (mm:ss)

Question

I think this may be a fairly easy question to some, but I need some advice.

In my form I need the user to be able to input how many minutes and seconds has he needed for a certain task. What would be the best way to do this ? Two normal input type text and then min and sec as placeholders, or should I use some masking ( if so, which one ) Cuz I only need the user to see that he is typing in minutes and seconds. It's not time of the day, it's how much time he has spent on something. I'm just not sure what the best practice for such requirement is!

Thank you

Answer 1

You can use two discreet input fields, with immutable formatting (the :), and some unambiguous labels.

This way the user doesn't have to worry about formatting errors, like leaving out a colon. And you can start with a default value if it fits your use case and user expectations (I don't have your details on this matter).

^{download bmml source – Wireframes created with Balsamiq Mockups}