PUBLISHED ON: JULY 28, 2021
How to make a div element editable in HTML?
The element on the webpage which can be modified by the user is called the editable element. The HTML provides the way to make the div element editable. In this tutorial, we will learn the way to make the div element editable.
HTML contenteditable attribute
The contenteditable attribute is used to the element which can be edited by the user. It must take one of the following values.
true or empty string indicating that the element can be editable.false indicating that the content must not be edited.
For editable elements, the browser modifies the widget and allows editing.
Example: Make a div element editable
Here is a simple example to show you how we can use contenteditable attribute to edit div contents.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2> The div element is editable </h2>
<div contenteditable="">
click on text to edit.
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Make editable HTML elements
In this program, we have used both the attribute value of contenteditable to show how it functions.
Conclusion
So now if you want to include any div element which can be edited by the user. You can easily do it by using contenteditable attribute within the div. Here we have explained it with examples.
