介绍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. Atitit.跨语言 java c#.net php js常用的codec encode算法api 兼容性  应该内置到语言里面

    Atitit.跨语言 java c#.net php js常用的codec encode算法api 兼容性  应该内置到语言里面 1. 常用算法1 1.1. 目录2 1.2. 定义和用法编辑2 1.3 ...

  2. Linux下vim命令总结

    一.光标控制命令   命令                   移动    k                   向上移一行    j                   向下移一行    h    ...

  3. iOS SDWebImage加载大图导致内存崩溃解决方案

    static BOOL SDImageCacheOldShouldDecompressImages = YES; static BOOL SDImagedownloderOldShouldDecomp ...

  4. iOS中三种方式实现登录界面播放视频或gif效果

    现在app都做的越来越炫酷,各种动画效果,各种特效很好的提高了用户的体验.很多app在登录界面都使用了动画效果,比如Uber,Keep,QQ等等.这些动画效果基本都是使用gif或者MP4来实现的. 效 ...

  5. linux修改root管理员密码

    以root 身份登录(SSH操作) 输入 passwd 命令 就可以看到提示输入新密码了 输入密码的时候是看不到字符的.

  6. C++编译错误C2365

    曾经我们说重定义一般是函数或者变量的重定义.今天遇到了一个新类型的重定义errorC2365 #include <iostream> using namespace std; class ...

  7. centos6.9使用NTFS-3G挂载ntfs文件系统

    centos6.9使用NTFS-3G挂载ntfs文件系统 工作中,难免需要到linux 系统上拷贝文件,但linux 自己不支持ntfs,下面就是解决问题的办法. NTFS-3G是一个开源软件,支持在 ...

  8. Android Handler警告，SimpleDateFormat警告

    1:Handler// This Handler class should be static or leaks might occur: IncomingHandler    @SuppressLi ...

  9. 【BZOJ3707】圈地 几何

    [BZOJ3707]圈地 Description 2维平面上有n个木桩,黄学长有一次圈地的机会并得到圈到的土地,为了体现他的高风亮节,他要使他圈到的土地面积尽量小.圈地需要圈一个至少3个点的多边形,多 ...

  10. Just a Hook(线段树)

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...