Skip to main content

HTML5 Features - Make your Content Editable

6. Make your Content Editable

Content Editable
The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>untitled</title>  
  7. </head>  
  8. <body>  
  9.     <h2> To-Do List </h2>  
  10.      <ul contenteditable="true">  
  11.         <li> Break mechanical cab driver. </li>  
  12.         <li> Drive to abandoned factory  
  13.         <li> Watch video of self </li>  
  14.      </ul>  
  15. </body>  
  16. </html>  
Or, as we learned in the previous tip, we could write it as:
  1. <ul contenteditable=true> 
Labels:

Comments

Post a Comment