Twitter bootstrap prepended and appended input text

Question

We are working on a CSS framework for our app, having made the prototype with Twitter Bootstrap and we started by designing the elements of Bootstrap we had used.

One of them was prepended and appended inputs

Which is basically something that helps you recognize what the input is used for, it's not necessarily a label, it's rather some sort of helper. Say it's an input with date, so you throw in there a little calendar icon.

Now I think that it's kind of important for this element to be visibly part of the input, wouldn't you say so?

Our graphic designer thinks otherwise, he's basically done this

So, do you think it should be visibly part of the input? If so, what would be your arguments for it?

Answer 1

Bootstrap does the former, which should be a good hint. Just because the Bootstrap guys did it a certain way doesn't make it right, but I bet they considered their options before doing it the way they did.

Personally, I think enclosing it gives the whole thing a better shape. If you're stacking boxes, everything will align better and have a stronger vertical line.

How about a compromise? Maybe get rid of the gray background and/or gray out the non-editable text.

Answer 2

First one could be understood as a clickable element. So of that's not the case I wouldn't go with it. Second one indicates being a label. A description of the box. If that's not the case, I wouldn't go with it.

Answer 3

The second set... with some possible revision. Is the @ symbol part of usernames? Then the bottom set as you have it.

If the @ symbol is designed to designate an email address, then the symbol is really superfluous. If the username is an email address, then change "username" to "email address" or "email".

If the value field should not include the decimal and two digits then it needs to be outside the input area and not appear clickable, but rather an appendage to the value input. I would also increase the size of the '.00'

Similar.....

At a minimum, I'd use this. Assuming the @ symbol is not part of the username:

While the top set visually appears nicer, as KMSTR points out, the items appear clickable.

And, of course, I have no clue what anything else looks like so it terms of continuity this is either hit or miss. And I'm thinking "design" here not "bootstrap" so integration wasn't really considered.

Answer 4

Both your examples are labels. The difference is that the first set of labels are enclosed in a tint box and visually attached to the form field. They are much less likely to be overlooked or dismissed than the second set. On the second set of labels I keep glossing over and mentally dropping the "extra" characters, which I shouldn't because they're important.

I think your designer is right on this one, sorry.