Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create editable content in an HTML document
In Html, we can edit the content by using contenteditable attribute, it specifies whether the elements content is editable or not by the user.
The property of contentEditable is set or returns if the content of an element is editable.
Syntax
The usage/syntax of editable content in HTML is −
<element contenteditable = "true|false">
The above contenteditable attribute has two values true/false.
True indicates that the element is editable.
False indicates that the element cannot be edited.
Example
Following is the example, to create editable content in an HTML −
<!DOCTYPE html> <html> <body> <p contenteditable="true">This content is editable. Try to edit it.</p> <p>This is a normal content. It won't edit.</p> </body> </html>
Example
Following is another example where we changing the value of contenteditable property to true −
<!DOCTYPE html>
<html>
<head>
<title>contenteditable attribute</title>
<style>
body {
width: 70%;
text-align: center;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<h2>Using contenteditable attribute</h2>
<p contenteditable="true">Tutorials Point: Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p>
</body>
</html>
Once we execute the above example we can see some text in a rectangular box. content. We can also edit the content that is present in the rectangular box, because the attribute value contenteditable is given as TRUE.
Example
If you change the value of contenteditable property to false. You cannot edit the text −
<!DOCTYPE html>
<html>
<head>
<title>contenteditable attribute</title>
<style>
body {
width: 70%;
text-align: center;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<h2>Using contenteditable attribute</h2>
<p contenteditable="false">Tutorials Point: Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p>
</body>
</html>
We cannot able to edit the content because the attribute value of contenteditable="false" is given −
Example
Now let us see an example by applying cascading styles to editable content −
<!DOCTYPE html>
<html>
<head>
<style>
.output {
font: 1rem 'Fira Sans', sans-serif;
}
blockquote {
background: orange;
border-radius: 5px;
margin: 16px 0;
}
blockquote p {
padding: 15px;
}
cite {
margin: 16px 32px;
}
blockquote p::before {
content: '\201C';
}
blockquote p::after {
content: '\201D';
}
[contenteditable='true'] {
caret-color: red;
}
</style>
</head>
<body>
<blockquote contenteditable="true">
<p>Edit this content to add your own Text</p>
</blockquote>
<cite contenteditable="true">-- Write your Name Here</cite>
</body>
</html>
446 Views
