html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性：
contenteditable 做用域全局。全部的块标签均可以，例如：span、p、div、td等标签。
可是，不能够做用域<br/>类型的标签。css
contenteditable属性的做用是，容许标签获取焦点是能够输入内容。
html5以前：
若是咱们想建立一个表单，且表单的表格能够输入内容的状况。会选择一个js事件当点击td标签是动态生成一个input输入框显示在当前td标签区域上方，输入完成后将值赋给当前td中。而后input消失。
拥有html5以后，咱们只要在td标签或全部区块标签加上contenteditable='true'的数据就能够实现输入操做了。是否是很方便。
一种场景：
咱们能够利用html5的contenteditable属性配合table区实现动态表单生成的操做。只要将须要输入的td框赋值上contenteditable='true'，标题框赋值contenteditable='false'或者不写就能够了。
或者提供一个空白的table，列和行能够自动添加的表单，这样用户想要什么样的表单，就本身去操做合适，咱们保存模板就能够了。
可能遇到的问题：
后台如何保存数据，前台如何展现模板信息；用户须要有限制性输入内容如何处理，例如：性别内容只能够选择男和女或使用单选下拉框的状况如何处理；若是用户须要统计数据信息，如何处理数据库中的信息。这个是实现一个实用性，易用性动态表单都须要考虑。但这些也是均可以解决的。若是有须要作动态表单的小伙伴，就好好思考这些问题吧。但愿本文章能够帮助到你。html
这里只提供一个简单实例
实例源码：html5
<!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边框重叠显示变粗。
咱们看下效果：spa
原文出处：https://www.cnblogs.com/gynbk/p/10979818.htmlcode