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

  • Does it really need to be that specific down to the exact mm:ss for each task? Usually, we ask computers to be that precise, not humans.
    – bfritz
    Commented Sep 27, 2017 at 21:35
  • 2
    I guess it depends on how harsh the work environment is :)
    – Mike M
    Commented Sep 27, 2017 at 21:44
  • I'm sorry. Not like a working task. more like an exercise..I.e how long did it take the user to run 2km.
    – MichaelM
    Commented Sep 27, 2017 at 21:54
  • Masking of the text field would be good. With the colon automatically placed. Having to use a mouse would be terrible. Commented Sep 27, 2017 at 22:58
  • Which plugin would you recommend?
    – MichaelM
    Commented Sep 27, 2017 at 23:15

1 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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.