Skip to content
Related Articles

Related Articles

How to make your content editable in HTML ?

Improve Article
Save Article
Like Article
  • Last Updated : 20 Aug, 2021

In this article, we are going to see how to make the content editable using HTML. To edit the content in HTML, we will use contenteditable attribute. The contenteditable is used to specify whether the element’s content is editable by the user or not.

Syntax:

<element contenteditable="true|false">

 This attribute has two values.

  • true:  If the value of the contenteditable attribute is set to true then the element is editable.
  • false: If the value of the contenteditable attribute is set to false then the element cannot be edited.

NOTE: If the attribute is given without a value, like <h1 contenteditable>GEEKSFORGEEKS</h1>, its value is treated as an empty string and the empty string will be treated as true.

 

Example 1: In this example, we will create a heading element with contenteditable attribute’s value set to true.

HTML




<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1 contenteditable="true">
      This is an Editable Heading element.
    </h1>
  </body>
</html>

Output:

Example 2:  In this example, the entire code will be the same, we will just change the value of contenteditable property to false.

HTML




<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1 contenteditable="false">
      This is element cannot be edited.
    </h1>
  </body>
</html>

Output:       

Example 3: In this example, we do not provide any value to contenteditable attribute. If the contenteditable attribute is missing or its value is invalid, then its value is inherited from its parent element: So the element is editable if its parent is editable. 

HTML




<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1 contenteditable>GeeksforGeeks.</h1>
  </body>
</html>

Output:

Example 4:

HTML




<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <div contenteditable="true">
      <h1>GeeksforGeeks.</h1>
      <p>Welcome to geeksforgeeks</p>
  
    </div>
  </body>
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!