介绍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. android电话状态的监听

    电话状态的监听: /*** * 继承PhoneStateListener类,我们能够又一次其内部的各种监听方法 然后通过手机状态改变时,系统自己主动触发这些方法来实现我们想要的功能 */ class ...

  2. vi 详解

    1.vi的基本概念 基本上vi可以分为三种状态,分别是命令模式(command mode).插入模式(Insert mode)和底行模式(last line mode),各模式的功能区分如下: ...

  3. FP Tree算法原理总结（转载）

    FP Tree算法原理总结 在Apriori算法原理总结中,我们对Apriori算法的原理做了总结.作为一个挖掘频繁项集的算法,Apriori算法需要多次扫描数据,I/O是很大的瓶颈.为了解决这个问题 ...

  4. 交易应用及网站驱动不兼容Windows 10的解决方案

        微软公司于2015年7月29日正式发布了Windows 10操作系统.全球范围内已有数以千万计的用户踊跃地升级到了Windows 10,在新用户享受Windows 10所带来的全新使用体验的同 ...

  5. x264源代码学习1：概述与架构分析

    函数背景色 函数在图中以方框的形式表现出来.不同的背景色标志了该函数不同的作用: 白色背景的函数:不加区分的普通内部函数. 浅红背景的函数:libx264类库的接口函数(API). 粉红色背景函数:滤 ...

  6. PYTHON测试邮件系统弱密码

    #-*- coding:utf-8 -*- #测试公司邮件系统弱密码, from email.mime.text import MIMEText import smtplib #弱密码字典 passL ...

  7. MySQL的基本操作--第一弹

    前言:在听许嵩,忆当年,意气风发 ———————————————————————————————————————————————— 好了,今天和大家同步讲解mysql的知识了.都是最基本的知识. 一. ...

  8. c3p0;maven;model;

  9. 配置过滤器filter对跨站脚本攻击XSS实现拦截

    1.web.xml中配置filter [html] view plain copy   <filter> <filter-name></filter-name> & ...

  10. 监控httpd的shell脚本

    #!/bin/bash # Apache httpd进程监控shell # 如果你在使用RHEL / CentOS / Fedora Linux,使用这个重启命令 RESTART="/sbi ...