介绍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.业务系统的新特性 开发平台 新特性的来源总结

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

  2. java线程模型Master-Worker

    这样的模型是最经常使用的并行模式之中的一个,在Nginx源代码中有涉及到有想看的能够去这个大神的博客了解一下http://blog.csdn.net/marcky/article/details/60 ...

  3. xml schema复杂类型

    xml schema复杂类型 对于复杂类型,xs:complexType, xs:sequence子节点必须有. <?xml version="1.0"?> <x ...

  4. html5小趣味知识点系列（一）pubdate

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 微信小程序的文件结构 —— 微信小程序教程系列（1）

    所有文章均是CSDN博客所看,已按照作者要求,注明出处了,感谢作者的整理! 博客文章地址:http://blog.csdn.net/michael_ouyang/article/details/548 ...

  6. python接口自动化（四十二）- 项目结构设计之大结局（超详解）

    简介 这一篇主要是将前边的所有知识做一个整合,把各种各样的砖块---模块(post请求,get请求,logging,参数关联,接口封装等等)垒起来,搭建一个房子.并且有很多小伙伴对于接口项目测试的框架 ...

  7. Mark指针的指针（**）和链表使用（*&）

    利用二级指针删除单向链表 彻底理解链表中为何使用指针的指针或者指针的引用 详解C++指针的指针和指针的引用

  8. 【BZOJ4128】Matrix BSGS+hash

    [BZOJ4128]Matrix Description 给定矩阵A,B和模数p,求最小的x满足 A^x = B (mod p) Input 第一行两个整数n和p,表示矩阵的阶和模数,接下来一个n * ...

  9. Jaxb2 实现JavaBean与xml互转

    一.简介 JAXB(Java Architecture for XML Binding) 是一个业界的标准,是一项可以根据XML Schema产生Java类的技术.该过程中,JAXB也提供了将XML实 ...

  10. 【python】-- Socket接收大数据

    Socket接收大数据 上一篇博客中的简单ssh实例,就是说当服务器发送至客户端的数据,大于客户端设置的数据,则就会把数据服务端发过来的数据剩余数据存在IO缓冲区中,这样就会造成我们想要获取数据的完整 ...