How to move the PLACEHOLDER text to the top

Question

I have a little problem, a bit stupid I guess, but couldn't figure it out.

In my HTML Form code, the input ("text") where the user will write their message, I have put a placeholder, as you see in the image:

PLACEHOLDER IMAGE

I would like the placeholder to be at the top. How can I do that?

Thanks a lot!

Regards and sorry for my English. Spanish guy over here ;)

---

THE HTML CODE

<form>
<input type="text" id="message" name="message" placeholder="Your Message...">
</form>

THE CSS CODE

#message{
 width:450px;
 height:240px;
 font-family: 'Open Sans', sans-serif;
 margin-top:20px;
 background-color:transparent;
 color:white;
 border:1px solid white;
}

EDIT:

DONE.

I just changed the "input type="text"" to "textarea" and added some cols and rows.

Thanks!

Answer 1

You may use a textarea instead of an input, try that! and if you want to make it bigger just add cols="x" and rows="x" atributes on the textarea tag.

Answer 2

Here's an example of using a textarea within jsfiddle.

<textarea id="message" rows="8" cols="50" placeholder="Your message here"></textarea>

http://www.jsfiddle.net/cdLNL/