0

I have three different forms of inputs, lets say that one is currency as in $dollars the other is an ip address and the third is a date

The user will have to enter either one of these inputs in a textbox.

What is the recommended way to manage the format of this textbox? Note: the textbox will also change its appearance depending on which format was selected. i.e for a dollar it will put in the $ in front, for a ip address it will have 4 spaces with . separated.

I thought of using 3 radio buttons and 3 textboxes to select the textbox that the user wants. A combobox with the different formats also seems okay, but im not sure which one or if there are other controls to use.

0

I like the idea of having three radio buttons better than having a combobox, especially because you're only looking for three types of input (were there more, I'd probably choose a different approach altogether).

What I like about radio buttons is that they make it apparent what is expected - you don't have to open the combo box first - and what type of value is currently filled in.

So I'd go for "switchable field" with three checkboxes and a single input field with a placeholder visualizing the expected format. The latter helps in making the current selection quicker to grasp. This could still be implemented using three fields, but would hide all but the one corresponding to the currently selected input type.

Something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

|improve this answer|||||
1

I had an idea that may help you, I like the radio button thought and what you could do is have the field dynamically change based on the radio button selection. This may prove complicated on the back-end side of things so if it seems a bit to much, you could always insert a drop down menu and have the 3 fields hidden that they would need to fill out. Based upon what they choose in the drop down menu it would display the hidden field that works with their selection. Would be pretty easy to code on the back-end and be effective on the front-end as well. You could do hidden fields with the radio buttons as well and have them display upon selection. I would say the easiest for the user is to have the radio buttons dynamically change the field and it would require the least amount of clicking in the end.

|improve this answer|||||
  • Thank you, the idea with having radio buttons require less clicking didnt occur to me. My problem is that I have not seen this idiom before, where a text box changes its appearance based on a radio button... I cant find any examples of that. – user1932405 Apr 29 '14 at 12:56
  • @user1932405 it is something that would have to be done on the back-end. Here is a JSfiddle that kind of displays what you would want it to do. jsfiddle.net/58km4/1 by selecting radio button A or B it will have the input fields dynamically change. – Nick_M Apr 29 '14 at 13:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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