How to add default value for html textarea

Question

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

User · Answer

Just in case if you are using Angular js in your project  as I am  and have a ng-model set for your  lt textarea gt   setting the default just inside like    lt textarea ng-model  foo  gt Some default value lt  textarea gt       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       x000D   x000D  var myApp   angular module  myApp       x000D   x000D  myApp controller  MyCtrl       scope   function  scope   x000D       your controller implementation here x000D       x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D     lt head gt  x000D       lt script src  https   ajax googleapis com ajax libs angularjs 1 3 15 angular min js  gt  lt  script gt  x000D       lt meta charset  utf-8  gt  x000D       lt title gt JS Bin lt  title gt  x000D     lt  head gt  x000D     lt body ng-app  myApp  gt  x000D       lt div ng-controller  MyCtrl  gt  x000D         lt textarea ng-init  foo  Some default value   ng-model  foo  gt  lt  textarea gt  x000D       lt  div gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Example 2  without using ng-init     x000D   x000D  var myApp   angular module  myApp       x000D   x000D  myApp controller  MyCtrl       scope   function  scope   x000D     scope foo    Some default value   x000D       x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D     lt head gt  x000D       lt script src  https   ajax googleapis com ajax libs angularjs 1 3 15 angular min js  gt  lt  script gt  x000D       lt meta charset  utf-8  gt  x000D       lt title gt JS Bin lt  title gt  x000D     lt  head gt  x000D     lt body ng-app  myApp  gt  x000D       lt div ng-controller  MyCtrl  gt  x000D         lt textarea ng-model  foo  gt  lt  textarea gt  x000D       lt  div gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You can also add the  value  attribute and set that so something like so     lt textarea value  your value  gt   lt  textarea gt

User · Answer

You can use this innerHTML     x000D   x000D   lt textarea name  message  rows    10  cols    100  onfocus  this innerHTML     gt  Enter your message here     lt  textarea gt  x000D   x000D   x000D    When text area is focused  it basically makes the innerHTML of the textarea an empty string

User · Answer

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  lt textarea gt  attribute  and only works for  lt input gt  tags  ie   lt input type  text  gt   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  lt textarea gt  elements has been outlined correctly here as   lt textarea gt  Desired text to be inserted into the field upon page load  lt  textarea gt  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  lt textarea gt  and  lt  textarea gt  tags  you cannot use placeholder    as it will be overwritten by your inserted text

User · Answer

Please note that if you made changes to textarea  after it had rendered  You will get the updated value instead of the initialized value    lt  doctype html gt   lt html lang  en  gt       lt head gt           lt script src  http   code jquery com jquery-latest min js  type  text javascript  gt  lt  script gt           lt script gt                function                          btnShow   click function                          alert  text         addressFieldName   text       n value         addressFieldName   val                                                     function updateAddress                         addressFieldName   val  District  Peshawar  n                           lt  script gt       lt  head gt       lt body gt           lt  php          address    School  GCMHSS NO 1 nTehsil    nDistrict  Haripur             gt           lt textarea id  addressFieldName  rows  4  cols  40  tabindex  5   gt  lt  php echo  address    gt  lt  textarea gt           lt  php echo   lt script type  text javascript  gt updateAddress    lt  script gt      gt           lt input type  button  id  btnShow  value  show    gt       lt  body gt   lt  html gt    As you can see the value of textarea will be different than the text in between the opening and closing tag of concern textarea

User · Answer

You can use placeholder Attribute  which doesn t add a default value but might be what you are looking out for     lt textarea placeholder  this text will show in the textarea  gt  lt  textarea gt    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

User · Answer

Also  this worked very well for me    lt textarea class  form-control  rows  3  name  msg  placeholder  Your message here   onfocus  this select    gt   lt  php if  isset   POST  encode       echo htmlspecialchars   POST  msg        gt   lt  textarea gt    In this case    POST  encode   came from this    lt input class  input bottom btn btn-default  type  submit  name  encode  value  Encode  gt    The PHP code was inserted between the  and  tags

User · Answer

Placeholder cannot set the default value for text area  You can use    lt textarea rows  10  cols  55  name  description  gt    Enter default value here to display content lt  textarea gt    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     lt textarea rows  10  cols  55  name  description  required gt  lt  php echo  description    gt  lt  textarea gt    required command minimizes efforts needed to check empty fields using php

User · Answer

Here is my jsFiddle example  this works fine    lt textarea name  awesome  gt Default value lt  textarea gt

User · Answer

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    lt  --input class  article-input  id  article-input  type  text  rows  5  value    article     -- gt    The textarea tag has no value  but work fine with handlebars   lt textarea class  article-input  id  article-input  type  text  rows  9   gt   article   lt  textarea gt

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

Examples related to html

Examples related to textarea