HTML input wrap text instead of overflow horizontally

Question

I have an input field, in which a user will enter text inside. When the text becomes too long, the input field extends horizontally instead of dropping down vertically.

I tried adding this CSS:

overflow: hidden;
word-wrap: break-word;

but I had no luck. Any other suggestions on how to accomplish this?

Answer 1

I think you should use a multiline input field as TextArea:

http://htmlhelp.com/reference/html40/forms/textarea.html

Sample code:

<textarea rows="10" cols="30"></textarea>