介紹html5新特性的一個屬性：
contenteditable 作用域全局。所有的塊標簽都可以，例如：span、p、div、td等標簽。
但是，不可以作用域<br/>類型的標簽。
contenteditable屬性的作用是，允許標簽獲取焦點是可以輸入內容。
html5之前：
如果我們想創建一個表單，且表單的表格可以輸入內容的情況。會選擇一個js事件當點擊td標簽是動態生成一個input輸入框顯示在當前td標簽區域上方，輸入完成后將值賦給當前td中。然后input消失。
擁有html5之后，我們只要在td標簽或所有區塊標簽加上contenteditable='true'的數據就可以實現輸入操作了。是不是很方便。
一種場景：
我們可以利用html5的contenteditable屬性配合table區實現動態表單生成的操作。只要將需要輸入的td框賦值上contenteditable='true'，標題框賦值contenteditable='false'或者不寫就可以了。
或者提供一個空白的table，列和行可以自動添加的表單，這樣用戶想要什么樣的表單，就自己去操作合適，我們保存模板就可以了。
可能遇到的問題：
后台如何保存數據，前台如何展示模板信息；用戶需要有限制性輸入內容如何處理，例如：性別內容只可以選擇男和女或使用單選下拉框的情況如何處理；如果用戶需要統計數據信息，如何處理數據庫中的信息。這個是實現一個實用性，易用性動態表單都需要考慮。但這些也是都可以解決的。如果有需要做動態表單的小伙伴，就好好思考這些問題吧。希望本文章可以幫助到你。
這里只提供一個簡單實例
實例源碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> td{ line-height: 2em; min-width: 200px; border: 1px solid #d4d4d4; padding: 5px; padding-top: 7px; padding-bottom: 7px; vertical-align: top; } </style> </head> <body> <table cellspacing="0" style="border-collapse: collapse;"> <thead> <tr><th colspan="4">個人信息</th></tr> </thead> <tbody><tr> <td contenteditable="false" style="text-align: right;">姓名：</td><td contenteditable="true"></td> <td contenteditable="false" style="text-align: right;">性別：</td><td contenteditable="true"></td></tr> <tr> <td contenteditable="false" style="text-align: right;">出生日期：</td><td contenteditable="true"></td> <td contenteditable="false" style="text-align: right;">身份證號：</td><td contenteditable="true"></td></tr> </tbody> </table> </body> </html>
注意：
cellspacing="0"處理td之間的空隙；
style="border-collapse: collapse;"處理td邊框重疊顯示變粗。
我們看下效果：
