Put text in textbox

Question

Is there a way to put text in a textbox but also allow the user to type something. I would like to write "username:" inside the box and allow the user to type after the colon. I can do this the hard way by creating a div right next to a textbox and make it look like they are one container, but I was wondering if there was an easier way? Thanks

EDIT: I don't want to text to disappear. I just want to user to be able to continue typing

EDIT 2: the reason you cant put a value in the textbox is because its a form. when the user types a username next to the value it will submit together

Solution 1

You could do something like this:

<div>
    <label>Username:</label>
    <input type="text" />
</div>

CSS

div{border:1px solid gray;}
label{font-family:arial; font-size:.8em;}
input{border:none;}
input:focus{outline:none;}

Basically, created a containing div and placed a label and input in that div. label is the words that stay in the field. input has the border removed.

http://jsfiddle.net/jasongennaro/rZmFx/

Fyi... you may need to increase the size of the input, depending on how many characters you want to accept.

Solution 2

HTML5 has a placeholder attribute you can now use:

<input type="text" placeholder="username" />

People have also created javascript functions that mimic this functionality.

There's also a jQuery placeholder plugin which does the same, if you'd like to go that route.

Solution 3

What's wrong with using standard HTML? You don't say that you need it to disappear...

<input type="text" value="username: " />

If you need it to disappear, use a placeholder attribute and a jQuery plugin as a fallback (for the browsers that don't support it.

Solution 4

<input type="text" placeholder="Category"/>

Maybe that can help you. If you want the textbox for only read you can put the property readonly = "".

View more solutions

Comments

[user3167101]

Please use better tags in future questions.

[Brad Christie]

@user: so now I'm confused; why not just pre-populate the input or use an adjacent span?