September 9, 2022
How to Make Div Editable in HTML
In this tutorial, we will learn how to make div editable in HTML. The content that can be edited by the user is considered to be editable content. To make a div element editable, we have to use a
contenteditable attribute with a value of true. After adding a
contenteditable attribute to a div element, you can easily edit the text inside the element.
contenteditable attribute can be set to any other element in HTML. It can have any one of these values; empty string, inherit, true, or false. The default value is inherit”
In the following example, we have one div element and we will make the text content inside the div element editable. Please have a look over the code example and the steps given below.
- We have one
divelement in the HTML file.
- Within the
divelement, we have a
styleattribute containing various CSS properties.
- We are using a
contenteditableattribute and its value has been set to
“true”. As a result, we can easily edit the text content inside the
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Div element editable</title> </head> <body> <div style="border: 5px solid black; height: 300px; width: 300px;" contenteditable="true"> Type here..... </div> </body> </html>