Word wrap and carriage returns not working inside textarea

Question

I have a Pictures section on my website and allow users to enter comments on the pictures. Each Picture page has a form with a textarea for entering their comment. Strangely, word-wrap doesn't work in the text area and hitting Enter results in the form being posted rather than a carriage return. Additionally, there's no scroll bar when the text goes outside the size of the text area. I've tried adding wrap="soft" to the text area (which shouldn't matter anyway...that's the default) but I get the same result.

Here is my HTML:

<form action="#" method="post" onSubmit="javascript:urchinTracker ('/comment/5334656267047432002')">
         <input type="hidden" name="albumid" value="5334655700200924193" />
         <input type="hidden" name="imageid" value="5334656267047432002" />
         <div id="labelContainer">

          <div id="nameLabel">NAME</div>
          <input class="inputName" type="text" name="name" />
          <div class="clear"></div>
         </div>
         <div id="inputContainer">
          <div id="contentLabel">COMMENT</div>
          <input class="inputContent" type="textarea" name="commentcontent" />
          <div class="clear"></div>

         </div>
         <div class="clear"></div>
         <input class="inputSubmit" type="submit" name="submit" value="Post" />
        </form>

And here's the link: http://www.cameronhinkle.com/pictures/album/5334655700200924193/image/5334656267047432002

Thanks in advance.

Answer 1

You are doing it wrong - textarea is an invalid value for the type attribute of an <input> element.

What you actually want is the <textarea> element:

<textarea name="commentcomment">contents</textarea>

Otherwise all you have is a one-line input field styled to look like a textarea.

For more: HTML <textarea> tag.