How to add default value for html <textarea>? [closed]

Question

I want to set a default value for my html <textarea>. I read from a material that to add default value you have to do something like <textarea>This is default text</textarea>. I did that but it doesn't work. What's the right thing to do?

Boman

The way you show is how it's supposed to work. Show your HTML code if it doesn't – Sharkskin

show your html please... – Sloganeer

The answers suite for the question without the code attempt noted in it. Lets treat the question without this attempt, so the question wouldn't be subjected for "no code" or "can longer be reproduced" close reasons. – Felicio

Gonna hijack a comment for REACT! If anyone ends up on this question then it actually is value="" that is needed in REACT 2023. – Confection

Answer 1

Here is my jsFiddle example. this works fine:

<textarea name='awesome'>Default value</textarea>

Downthrow

.NET Core developers who use asp-for must use a constructor in the model class to set the default value as this answer won't help them – Galatians

@ShadiNamrouti While that certainly is true, this isn't a question directed to .Net Core. This question actually predates .Net Core by a few years. – Downthrow

I came here precisely because Andrew Jackman's response WASN'T working. Shadi Namrouti explained why: if you've got a an Asp.Net Core Razor page, and you're using "asp-for" ... then you need to set the default value in your Model constructor. Thank you, Shadi! – Quebec

Yes what @ShadiNamrouti said is helpful. It's 2020 and I'm reading it :) Thanks a lot. – Jacket

I forget this and come back to this post almost every few months xD Also, for anyone getting empty spaces in the textarea, that's because the closing tag of your textarea is most probably formatted to be on next line. So move it to same line and extra space will be gone. – Assertion

Answer 2

You can use placeholder Attribute, which doesn't add a default value but might be what you are looking out for :

<textarea placeholder="this text will show in the textarea"></textarea>

Check it out here - http://jsfiddle.net/8DzCE/949/

Important Note ( As suggested by Jon Brave in the comments ) :

Placeholder Attribute does not set the value of a textarea. Rather "The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value" [and it disappears as soon as user clicks into the textarea]. It will never act as "the default value" for the control. If you want that, you must put the desired text inside the Here is the actual default value, as per other answers here

Ronald

You should make clear that placeholder does not set the value of a textarea. Rather "The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value" [and it disappears as soon as user clicks into the textarea]. It will never act as "the default value" for the control. If you want that, you must put the desired text inside the <textarea>Here is the actual default value</textarea>, as per other answers here. – Downturn

This is actually a very dangerous solution. Please, don't ever confuse placeholder with default value. – Faden

@Faden - Yes, we should not confuse placeholder with default value. But dangerous....Can you state any example / case where and how it can be dangerous ( able or likely to cause harm or injury ) ? – Ronald

Placeholder won't send in a form. That is dangerous if you or your user expect it to send. – Faden

@Qwerty, that's like saying all electrical devices are dangerous as they can give you shock!!. This is not dangerous, this is lack of knowledge!! As for the form thing, again its not dangerous...just the value won't be submitted and the user will eventually learn that placeholders aren't meant for sending form values. – Ronald

If the value won't get submitted, it's not a default value but rather a hint. If I am looking for a default value, I expect it to behave as a default value and what is dangerous is the fact that this does not exhibit expected behaviour. Dangerous is to assume this solution will solve what was asked for. But it's correct for you to assume that I am indeed looking for A, but asking for B. And if you implicitly state that in your answer, your answer will be legit. You are right that this is about lack of knowledge, but people looking for this answer do lack this knowledge. – Faden

@Faden if you are seeking default values, you might want to do this on your back end only (and only update those fields if user modifies/changes a field). I think having default fields on your front end is probably better handled on backend w/ model default values, etc. I hear you though. – Celle

Answer 3

If you want to bring information from a database into a textarea tag for editing: The input tag not to display data that occupy several lines: rows no work, tag input is one line.

<!--input class="article-input" id="article-input" type="text" rows="5" value="{{article}}" /-->

The textarea tag has no value, but work fine with handlebars

<textarea class="article-input" id="article-input" type="text" rows="9" >{{article}}</textarea> 

Remissible

This is angular – Sewer

Answer 4

Just in case if you are using Angular.js in your project (as I am) and have a ng-model set for your <textarea>, setting the default just inside like:

<textarea ng-model='foo'>Some default value</textarea>

...will not work!

You need to set the default value to the textarea's ng-model in the respective controller or use ng-init.

Example 1 (using ng-init):

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', [ '$scope', function($scope){
  // your controller implementation here
}]);

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body ng-app='myApp'>
    <div ng-controller="MyCtrl">
      <textarea ng-init='foo="Some default value"' ng-model='foo'></textarea>
    </div>
  </body>
</html>

Example 2 (without using ng-init):

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', [ '$scope', function($scope){
  $scope.foo = 'Some default value';
}]);

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body ng-app='myApp'>
    <div ng-controller="MyCtrl">
      <textarea ng-model='foo'></textarea>
    </div>
  </body>
</html>

Scanlon

Ay found this https://mcmap.net/q/81702/-default-values-of-textarea-missing-after-using-ng-model – made things even clearer. – Decency

Answer 5

A few notes and clarifications:

• placeholder='' inserts your text, but it is greyed out (in a tool-tip style format) and the moment the field is clicked, your text is replaced by an empty text field.

• value='' is not a <textarea> attribute, and only works for <input> tags, ie, <input type='text'>, etc. I don't know why the creators of HTML5 decided not to incorporate that, but that's the way it is for now.

• The best method for inserting text into <textarea> elements has been outlined correctly here as: <textarea> Desired text to be inserted into the field upon page load </textarea> When the user clicks the field, they can edit the text and it remains in the field (unlike placeholder='').

• Note: If you insert text between the <textarea> and </textarea> tags, you cannot use placeholder='' as it will be overwritten by your inserted text.

Celle

<textarea> supports multi-line content, which would be hard to squeeze into value attribute :) – Beekeeping

Answer 6

Placeholder cannot set the default value for text area. You can use

<textarea rows="10" cols="55" name="description"> /*Enter default value here to display content</textarea>

This is the tag if you are using it for database connection. You may use different syntax if you are using other languages than php.For php :

e.g.:

<textarea rows="10" cols="55" name="description" required><?php echo $description; ?></textarea>

required command minimizes efforts needed to check empty fields using php.

Millymilman

Answer 7

Also, this worked very well for me:

<textarea class="form-control" rows="3" name="msg" placeholder="Your message here." onfocus='this.select()'>
<?php if (isset($_POST['encode'])) { echo htmlspecialchars($_POST['msg']);} ?>
</textarea>

In this case, $_POST['encode'] came from this:

<input class="input_bottom btn btn-default" type="submit" name="encode" value="Encode">

The PHP code was inserted between the and tags.

Homopterous

Answer 8

You can use this.innerHTML.

<textarea name="message" rows = "10" cols = "100" onfocus="this.innerHTML=''"> Enter your message here... </textarea>

When text area is focused, it basically makes the innerHTML of the textarea an empty string.

Giga

That's a very nice answer :) Thanks. – Waac

Answer 9

Please note that if you made changes to textarea, after it had rendered; You will get the updated value instead of the initialized value.

<!doctype html>
<html lang="en">
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
            $(function () {
                $('#btnShow').click(function () {
                    alert('text:' + $('#addressFieldName').text() + '\n value:' + $('#addressFieldName').val());
                });
            });
            function updateAddress() {
                $('#addressFieldName').val('District: Peshawar \n');
            }
        </script>
    </head>
    <body>
        <?php
        $address = "School: GCMHSS NO.1\nTehsil: ,\nDistrict: Haripur";
        ?>
        <textarea id="addressFieldName" rows="4" cols="40" tabindex="5" ><?php echo $address; ?></textarea>
        <?php echo '<script type="text/javascript">updateAddress();</script>'; ?>
        <input type="button" id="btnShow" value='show' />
    </body>
</html>

As you can see the value of textarea will be different than the text in between the opening and closing tag of concern textarea.

Philomel

Answer 10

You can also add the "value" attribute and set that so something like so:

<textarea value="your value"> </textarea>

Penner

From the MDN documentation: "<textarea> does not support the value attribute". – Siphon

Writing in React it is worth to be align with HTML spec. – Electronics