介绍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边框重叠显示变粗。

我们看下效果：

html5新特性contenteditable 属性更容易实现动态表单的更多相关文章

  1. 前端进阶系列(三):HTML5新特性

    HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...

  2. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  3. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  4. HTML5新特性：范围样式

    原文出处:http://blog.csdn.net/hfahe/article/details/7381141        Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...

  5. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  6. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  7. Microsoft Tech Summit 2018 课程简述：利用 Windows 新特性开发出更好的手绘视频应用

    概述 Microsoft Tech Summit 2018 微软技术暨生态大会将于10月24日至27日在上海世博中心举行,这也会是国内举办的最后一届 Tech Summit,2019 年开始会以 Mi ...

  8. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  9. 第二季第八天 HTML5新特性

    在函数内部window.a =  a  在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...

随机推荐

  1. 为什么阿里巴巴要求谨慎使用ArrayList中的subList方法

    GitHub 3.7k Star 的Java工程师成神之路 ,不来了解一下吗? GitHub 3.7k Star 的Java工程师成神之路 ,真的不来了解一下吗? GitHub 3.7k Star 的 ...

  2. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

  3. spring boot 集成mybatis报错

    Caused by: org.springframework.beans.factory.NoUniqueBeanDefinitionException: No qualifying bean of ...

  4. [译]GLUT教程 - 移动镜头2

    Lighthouse3d.com >> GLUT Tutorial >> Input >> Move the Camera II 本节的最后一个示例是回顾.现在我们 ...

  5. 02 Memcache add详细介绍

    一:Memcached add 命令参数 ()add key flag expire length [增] key: 键名(起一个独立的名字) flag 标志,要求为一个正整数 备注:()当Memca ...

  6. usermod命令

    usermod 功能: 修改用户 常用参数:-c    账号说明-d    账号家目录-e    密码失效日期-g    主用户组GID-G    次用户组GID-l    账号名称-s    she ...

  7. vue实践---vue配合express实现请求数据mock

    mock数据是前端比较常见的技术,这里介绍下vue配合express 实现请求数据mock. 第一步: 安装 express :  npm install express -D 第二步: 简历需要mo ...

  8. Android 中通过切割图片创建人物行走动画

    以前一直使用序列图片来实现动画效果,造成空间的极大浪费,所以想要尝试下切割图片来实现动画. 如图所示,是由66rpg纸娃娃系统生成的角色行走图.本程序必须实现将人物的整体图片切割后存入4x4的数组来动 ...

  9. APNS的推送机制 3

    APNS的推送机制 首先我们看一下苹果官方给出的对iOS推送机制的解释.如下图 Provider就是我们自己程序的后台服务器,APNS是Apple Push Notification Service的 ...

  10. MFC添加菜单资源与菜单执行函数的两种命令形式

    添加资源->新建一个菜单资源->选择相应的对话框 菜单的执行函数命令形式: COMMAD 是指点击菜单后的执行命令 UPDATE_COMMAND_UI 是指点击菜单后菜单状态的函数