感觉最大的改变就是表单元素可以不写在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. Java的Git管理工具Gitblit

    From:http://www.oschina.net/p/gitblit Gitblit 是一个纯 Java 库用来管理.查看和处理 Git 资料库.相当于 Git 的 Java 管理工具. 下载地 ...

  2. C++ Primer笔记9_构造函数_拷贝构造(深拷贝与浅拷贝)

    1.构造函数: >构造函数是一个特殊的.与类同名的成员函数,用于给每一个成员设置适当的初始值. >构造函数不能有返回值,函数名与类名同样. >缺省构造函数时,系统将自己主动调用该缺省 ...

  3. 【设计模式】学习笔记13：组合模式（Composite）

    本文出自   http://blog.csdn.net/shuangde800 认识组合模式 上一篇中,我们可以用迭代器来实现遍历一个集合(数组,ArrayList, Vector, HashTabl ...

  4. 【Quick-COCOS2D-X 3.3 怎样绑定自己定义类至Lua之四】使用绑定C++至Lua的自己定义类

    续[Quick-COCOS2D-X 3.3 怎样绑定自己定义类至Lua之三]动手绑定自己定义类至Lua 之后.我们已经完毕了自己定义类至Lua的绑定.在接下来的环节,我们将使用它. 首先,我们须要确定 ...

  5. 【并查集+拓扑排序】【HDU1811】【Rank of Tetris】

    题意:给你3种关系 A=B,A>B,A<B 问是否排名方式唯一,或者存在矛盾 解 1.读入数据先处理 =号 用并查集的祖先作为代表元素,其他儿子节点都等于跟这个点重叠. 再读入 '< ...

  6. Linux下命令行显示当前全路径方法

    /etc/profile 和 ~/.bashrc 或者直接在用户的.bash_profile中添加 export PS1='[\u@\h \W]\$' 然后执行source命令

  7. (原)css 响应式媒体查询 模板

    @media only screen and (max-width:340px) { html,input{ font-size:80%; } } @media only screen and (ma ...

  8. .NET 3.5(5) - LINQ查询操作符之Select、Where、OrderBy、OrderByDescending

    .NET 3.5(5) - LINQ查询操作符之Select.Where.OrderBy.OrderByDescending 介绍    ·Select - Select选择:延迟    ·Where ...

  9. input file 样式以及获取选择文件方法集合

    样式一(http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html) <style> a{display: ...

  10. 设置php在apache下加载ini配置文件路径，~和curl扩展无法加载的问题

    php以模块的方式加载到apache的时候,php配置文件目录为C:windows.这不合理,应该选择php本身目录的配置文件加载,可以在apache的httpd.conf配置文件里设置PHPIniD ...