Make an HTML Element Editable
By Stephen Bucaro
HTML5 provides the contenteditable attribute which makes most
HTML elements editable. Shown below is code to make a div element editable.
<div id="editbox" style="border-style:solid; border-width:1px; height:200px; width:300px" contenteditable="true"></div>
Possible values for the contenteditable attribute are true, false, or inherit. inherit
sets an element's editability to the same as its parent element. The default value is false,
which makes an element NOT editable.
The contenteditable attribute is compatible with most current browsers,
including Internet Explorer 6 and higher, Firefox 3.5 and higher, and Chrome 4.0 and higher.
Once you make an HTML element editable, it's assumed that you would want to get the
contents, and creates a form button to call that function. Of course you might want to submit
that contents to the server. How to that is not explained here because it depends upon the
language and method you want to use.
<input type="button" value="Save" onclick="showText()">
More HTML Code:
• HTML DIV Basics
• HTML Special Characters - Character Entities
• Easy Form Design
• Divide a Table Into Head (thead), Body (tbody), and Footer (tfoot) Sections
• Radio Button Basics
• HTML abbr and acronym Tag
• Text Input Box Basics
• HTML5 Slider Control
• HTML Text Tags Basics
• Web Color Names Table