HTML textarea default value line breaks

17 Jun
2009

This one I struggled to find the right formula to get it working. The solution was so simple and basic that I wonder why I did not just try it before all the complicated approaches.

I basically needed to have line breaks occurring in the default value of a textarea field inside a HTML form. That is between the <textarea>…</textarea> tags.

My first approach was to simply add \n where I wanted a line break. I also tried all possible combinations of \r, \n, CR, LF, separate, together, quoted, escaped… you name it. Nothing worked.

Googling around proved no good. Most people kept referring to the nl2br function in PHP, but this is not what I was trying to achieve. Besides this is all client code, pure HTML, no server side processing involved.

I ended up at the W3 HTML specification and saw the light! A simple example copied from their site included the solution to all my struggles:

<FORM action="http://somesite.com/prog/text-read" method="post">
   <P>
   <TEXTAREA name="thetext" rows="20" cols="80">
   First line of initial text.
   Second line of initial text.
   </TEXTAREA>
   <INPUT type="submit" value="Send"><INPUT type="reset">
   </P>
</FORM>

Notice how they simply added a line break in the actual HTML source. This is so simple that you may even not notice the subtle difference. Let me show you how I had my initial code:

<form>
<p>Some random paragraph</p>
<textarea>First line \n Second line</textarea>
<p>Some more randomness</p>
</form>

As normally white space in HTML is simply ignored I did not give a thought about the fact that a line break can be created in the default textarea value by simply…, yes, adding a line break when writing the source code.

6 Responses to HTML textarea default value line breaks

Avatar

scientia potentia est » vs. in Wordpress editor

June 18th, 2009 at 00:09

[…] my earlier post about the textarea issue I initially ended up with a funny looking post. It was due to the examples of HTML code included in […]

Avatar

Abdul Azeez

December 14th, 2010 at 08:48

Please help me 4 ine break in xhtml form value

Eg


Mobile no :

:br:
+91

Tha value is a sending invitation message via sms to mobile

How set the value on same model

please reply me

Avatar

Shiva Kumar

June 5th, 2012 at 17:22

Line break in Textarea was real good solution indeed keep it up

Avatar

Joe Cool

December 21st, 2012 at 20:30

WOOWWWW HAHAHA! Who would have thought the solution was so simple! I initial code was filled with and then I tried . Haha, making new lines in the source, worked like a charm. Thanks!

Avatar

Mark Holley

June 25th, 2013 at 04:33

I’ve searched high and low for this, and NOBODY knows. You, are a genius!

Avatar

Younes

August 6th, 2015 at 16:12

Thank you

Comment Form

top