感觉最大的改变就是表单元素可以不写在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. Google地图轨迹回放模拟

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 充分利用CPU高速缓存，提高程序效率（原理篇）

    提高程序效率应该充分利用CPU的高速缓存.要想编写出对CPU缓存友好的程序就得先明白CPU高速缓存的运行机制. i5-2400S: 1.有三级缓存分别为 32k(数据.指令缓存分开,分为32k),25 ...

  3. pushMeBaby，github链接

    https://github.com/stefanhafeneger/PushMeBaby

  4. Java琐碎知识点

    jps命令是JDK1.5提供的一条显示当前用户的所有java进程pid的指令,类似Linux上的ps命令简化版,Windows和linux/unix平台都可以用比较常用的参数:-q:只显示pid,不显 ...

  5. Redis 实践笔记

    本文来自:http://www.cnblogs.com/me-sa/archive/2012/03/13/redis-in-action.html 最近在项目中实践了一下Redis,过程中遇到并解决了 ...

  6. android 实现静默安装、卸载

    方法1:[使用调用接口方法,由于安装卸载应用程序的部分API是隐藏的,所以必须下载Android系统源码,在源码下开发并编译之后使用MM命令编译生成APK文件] import java.io.File ...

  7. effective c++ 条款06 不想自动生成函数,就明确拒绝

    编辑器会主动的生成三个/五个函数,如果不需要我们应该主动拒绝 使用私有属性来拒绝 ``` include int main() { return 0; } ``` 使用继承的方式来拒绝

  8. Metafunction

    Metafunction is a more general idiom than type generator. Metafunctions that produce type(s) as a re ...

  9. Node.js内置的工具和第三方模块来进行单步调试

    1.命令行调试: Node.js调试命令: run 执行脚本,在第一行暂停 restart 重新执行脚本 cont,c 继续执行,知道遇到下一个断点 next,n 单步执行 step,s 单步执行,并 ...

  10. css中element element和element>element选择器的区别

    就是这样的选择器: 比如html中有这样一段布局: <div> <p>我是一个段落</p> </div> 这时你用div p{background:ye ...