感觉最大的改变就是表单元素可以不写在form标签中。写在其他地方，加个form属性就能提交了
别的嘛感觉没什么，表单验证也不能提示信息，感觉不实用

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

        <h1>表单增强</h1>

        <form id="form1" action="index.html" method="post">

            <!--规定输入字段的值的模式或格式。传入一个正则-->

            <input type="text" pattern="[0-9]{11}" title="输入数字" placeholder="数字" />

            <!--required非空验证-->

            <input required="required" type="text" />

            <!--min最小值 max最大值-->

            <input type="number" min="10" max="100"  placeholder="数字10-100"/>

            <!--formation规定提交地址，覆盖form表单的action-->

            <input type="submit" value="提交" formaction="action1.html" />

            <!--规定提交方法，覆盖form表单的method属性-->

            <input type="submit" value="提交" formmethod="get" />

            <!--和target属性一个意思-->

            <input type="submit" value="提交" formtarget="_blank" />

        </form>

        <!--form属性，值是form表单的id，表示从属于这个表单，不用写在form标签内-->

        <input form="form1" type="text" value="" />

    </body>

</html>

HTML5表单增强的更多相关文章

  1. HTML5跨浏览器表单及HTML5表单的渐进增强

    HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...

  2. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  3. html5表单验证

    表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html ...

  4. Ideal Forms – 帮助你建立响应式 HTML5 表单

    Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...

  5. HTML5学习总结-05 HTML5表单

    一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...

  6. html5 表单样式 表单验证1 2 3

    html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. HTML5表单提交和PHP环境搭建

    HTML5表单提交相关内容和PHP环境搭建需要的软件(只备注) (2)举例介绍 (3)PHP环境搭建

  8. HTML5表单及其验证

    随笔- 15 文章- 1 评论- 115 HTML5表单及其验证   HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...

  9. HTML5表单新属性

    HTML5表单新属性 autofocus  自动聚焦 <input type="text" autofocus> placeholder占位文本 tel         ...

随机推荐

  1. Node.js log1: ERR can not find module express

    1.win7下创建项目中提示输入的命令:cd project&&npm install    安装失败 输入上面提示的命令,预期结果:自动安装了依赖 ejs 和 express,失败提 ...

  2. Silence.js高效开发移动Web前端类库

    基于Zepto的轻量级移动Web前端JavaScript类库. 编写这个类库原因及目的: 采用MVC设计模式,使代码工程化结构化. 使用RouterJS,提升前端交互性能,延长页面使用时间,并通过Aj ...

  3. Red5 1.0 RC1 与tomcat 6 整合

    1.0以上版本没整合成功过,如有人整合成功过,也分享下,在此先谢谢 一.下载red5-1.0.0-RC1.zip 下载地址:http://code.google.com/p/red5/ 和http:/ ...

  4. pomelo初探

    最近发现了一个比较好玩的东西pomelo.地址:点击打开链接 这个东西是网易开发的一套基于node.js的高性能,分布式游戏服务器框架.这套框架不仅可以用来开发游戏服务器,也可用于开发高实时web应用 ...

  5. Android 基本控件

    http://www.cnblogs.com/LT-blogs/archive/2012/08/07/2626118.html http://blog.csdn.net/android_tutor/a ...

  6. Mansory算法分析

    相信大家对mansory排版算法印象十分深刻,它能够十分有效的实现页面紧凑排版,节省空间,并且还显得十分美观.在很多网站,包括鼎鼎有名的pinterest都使用了这个算法来实现排版.这个过程有点象瓦匠 ...

  7. ORACLE表空间bigfile和smallfile

    BIGFILE | SMALLFILE Use this clause to determine whether the tablespace is a bigfile or smallfile ta ...

  8. 图像、帧、片、NALU概念理解

    图像.帧.片.NALU 是学习 H.264 的人常常感到困惑的一些概念. H.264 是一次概念的革新,它打破常规,完全没有 I 帧.P帧.B 帧的概念,也没有 IDR 帧的概念.对于 H.264 中 ...

  9. String常用方法总结

    字符串的截取: 1. slice(start,end) 返回一个新的字符串,不会改变原来引用值.end省略的时候,截取的是start到字符串结尾.传入start=0或者不传入start,就是复制了整个 ...

  10. 什么是 CSS 预处理器？

    什么是 CSS 预处理器?  就CSS本身而言,对于大多数Web前端从业人员来说就不是问题.学过CSS的人都知道,它不是一种编程语言.你可以用它开发网页样式,但是没法用它编程.换句话说,CSS基本上是 ...