Working on a form dealing with phone numbers, I've seen two methods to capture user input .
In past practices example 2 (image below) has proved effective in controlling phone number lengths on forms.
However with responsive in mind it would seem example 1 is considered a more popular pattern on forms. I've researched both patterns with the findings below.
- 1 input = less taps on mobile device
- 1 input = less coding
- could be difficult to control phone number format (1-555-555-5555, +22444455555, and etc)
- easier to control phone format
- reduced user error
- 3 inputs = more taps on mobile device
- more inputs = more coding
Both inputs have pros and cons and I'm not such which method would provide the best user experience for responsive environments. Can anyone share some insight or provide a better way to use phone number inputs?