介绍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. 软件project--谈项目开发

    前段时间一直忙自考.着急赶项目进度,如今最终有时间回想这段时间的学习,突然发现自己已有半个月没有沉淀. 今天早上醒来.灵感如泉水般涌出,挡都挡不住.所以早上一到机房,便迫不及待的想大家分享灵感,希望大 ...

  2. [Erlang危机](5.1.1)内存

    原创文章,转载请注明出处:server非业余研究http://blog.csdn.net/erlib 作者Sunface , and some of the hidden data I mention ...

  3. Atitit.业务系统的新特性 开发平台 新特性的来源总结

    Atitit.业务系统的新特性 开发平台 新特性的来源总结 1.1. 语言新特性(java c# php js python lisp c++ oc swift ruby  go dart1 1.2. ...

  4. shadow密码文件

    登录Linux会要求输入用户名和密码.通常本地文件中会存储一份用户密码,并与用户输入对比,如果相同就允许用户登录.起初用户密码存储与/etc/passwd中,但由于/etc/passwd必须供所有用户 ...

  5. 【转】【Mac系统】之Python版本切换、谷歌浏览器取消自动升级

    都是很有用的文章,本文都是转载文章,以便后续查阅: Mac Chrome浏览器取消自动升级(看这一篇就够了) <Mac修改默认python版本> <mac设置python版本切换,和 ...

  6. Python爬上不得姐 并将段子写入数据库

    #Python2.7 可以优化一下 前10页 每页点赞最多的段子 百思不得姐 # -*- coding: utf-8 -*-import MySQLdbimport urllib,urllib2imp ...

  7. Unity Texture2D的sRGB(Color Texture)的作用

    在gramma空间下,勾选与否无关. 在liner空间下,勾选shader会自动将读到的像素作gramma矫正,即x的0.45次方 不勾选,shader读到的就是原始的颜色值 然后unity如果选了g ...

  8. python函数式编程-------python2.7教程学习【廖雪峰版】（五）

    2017年6月13日19:08:13 任务: 看完函数式编程 笔记: 该看:函数式编程1.函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数调用,就可以把复杂任务分解 ...

  9. java jdbc连接数据库，Properties 属性设置参数方法

    今天在整合为数据库发现在配置中实现的赋值方式,可以用代码实现.特记录下共以后参考: 代码:        // 操作数据库        Connection conn; String strData ...

  10. java.lang.IllegalStateException: ImageView no longer exists. You should not use this PhotoViewAttacher any more.

    java.lang.IllegalStateException: ImageView no longer exists. You should not use this PhotoViewAttach ...