html contenteditable attribute
The contenteditable attribute on the html element:
- → indicates that the content is editable
- is a global attribute → can be applied on all html elements;
- when applied on the root element <html>, its value is inherited by all other html elements
Examples
| <html | attribute | = | "value(s)" | > | ... | <⁄html> | example |
|---|---|---|---|---|---|---|---|
| 3. | contenteditable | = | "", , true, false | < contenteditable=""> ... <⁄> < contenteditable="true"> ... <⁄> < contenteditable="false"> ... <⁄> < contenteditable> ... <⁄> |
Video demonstration html contenteditable attribute
HTML5 html contenteditable attribute Tutorial
| min | video details |
|---|---|
| 00:02 | launch file content_editable.php in browser |
| 00:06 | open file content_editable.php in Notepad++ |
| 00:09 | the source code of the content_editable.php file displays |
| 00:12 | contentEditable attribute's values: empty string, true, false |
| 00:17 | a) contentEditable attribute, value: empty string, applied on html starting tag |
| 00:25 | testing: <html contentEditable=""> |
| 00:26 | result: the content is editable |
| 00:50 | b) contentEditable attribute, value: true, applied on html starting tag |
| 00:51 | saving the modifications in Notepad++ and refreshing the file in browser |
| 00:55 | testing: <html contentEditable="true"> |
| 00:56 | result: the content is editable |
| 01:15 | c) contentEditable attribute, value: false, applied on html starting tag |
| 01:18 | saving the modifications in Notepad++ and refreshing the file in browser |
| 01:20 | testing: <html contentEditable="false"> |
| 00:22 | result: the content is NO LONGER editable |