以往的一个form表单,结构比较死板,所有的form元素都必须处在<form></form>之间才有效,这会造成一些麻烦,比如说:像bootstrap这种使用<div>来控制布局的框架,<form>放在哪都很尴尬;另外,目前的web 2.0,UI比较丰富,为了布局或其它的原因,表单元素之间可能充斥着大量非表单相关的元素,而form 1.0又规定表单元素必须在闭合的<form>标签以内,那<form></form>就相隔得非常远了,也是相当别扭的。

form 2.0并不要求form元素处在<form></form>之间,只需要为其指定属于哪个表单(甚至是“哪几个表单”)即可,由此便衍生出以下的写法:

<form id="test-form" method="post" action="save.php"></form>
First name:
<input type="text" name="firstname" form="test-form" />
<br />
Last name:
<input type="text" name="lastname" form="test-form" />

另外,每个form元素可以隶属于多个form表单,换句话说,多个form表单可以共享同一个form元素。用form属性指定多个form表单时用空格分隔,如下所示:

<form id="test-form1" method="post" action="save.php"></form>
<form id="test-form2" method="post" action="save.php"></form>
<input type="text" name="firstname" form="test-form1 test-form2" />

form override attributes(表单重写属性)

网上的资料都把这一部分放到form 2.0 attribute来写,但我认为form override attributesform 2.0的结构是有非常重大的影响的,因此放到这一块来叙述。

表单重写属性有:
formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性

以一个例子来进行说明:

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" /> //普通的提交按钮
<br />
<!--用这个按钮来提交的时候,由于`formaction`重写了表单的`action`属性,因此该表单将会被提交到`demo_admin.asp`而非`demo_form.asp`-->
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<!--用这个按钮来提交的时候,由于`formnovalidate`重写了表单的`novalidate`属性,因此该表单在提交时将不会进行验证-->
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>

由此,可以利用form override attributes,设置多个提交按钮来控制以不同的方式提交表单。

html5系列:form 2.0 新结构的更多相关文章

  1. ASP.NET MVC深入浅出系列(持续更新) ORM系列之Entity FrameWork详解(持续更新) 第十六节:语法总结(3)(C#6.0和C#7.0新语法) 第三节:深度剖析各类数据结构(Array、List、Queue、Stack)及线程安全问题和yeild关键字 各种通讯连接方式 设计模式篇 第十二节: 总结Quartz.Net几种部署模式(IIS、Exe、服务部署【借

    ASP.NET MVC深入浅出系列(持续更新)   一. ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态模 ...

  2. HTML5新结构标签和移动端页面布局

    --------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...

  3. Cocos2d-x 3.0新引擎文件夹结构

    Cocos2d-x 3.0新引擎文件夹结构 2014年4月29日  Cocos2d-x 3.0学习 作为一个Cocos2d-x的菜鸟,我倒是挺愿意关注不同版本号之间的差别,Cocos2d-x 3.0自 ...

  4. html5新结构标签

    html5新结构标签 <header>  定义 section 或 page 的页眉,也就是定义头部的标签. <footer> 定义 section 或 page 的页脚. & ...

  5. 前端笔记之HTML5&CSS3(上)新特性&音频视频&本地存储&自定义属性

    一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...

  6. 大熊君学习html5系列之------XHR2(XMLHttpRequest Level 2)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  7. html5 新增元素以及css3新特性

    HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...

  8. Django 2.0 新特性 抢先看!

    一.Python兼容性 Django 2.0支持Python3.4.3.5和3.6.Django官方强烈推荐每个系列的最新版本. 最重要的是Django 2.0不再支持Python2! Django ...

  9. LINQ学习之旅 C#3.0新特性(一)

    一:C#3.0新语言的特性 自动属性(Auto-Implemented Properties) 隐含类型局部变量(Local Variable Type Inference) 匿名类型(Anonymo ...

随机推荐

  1. 面试中的MySQL主从复制|手撕MySQL|对线面试官

    关注微信公众号[程序员白泽],进入白泽的知识分享星球 前言 作为<手撕MySQL>系列的第三篇文章,今天讲解使用bin log实现主从复制的功能.主从复制也是MySQL集群实现高可用.数据 ...

  2. Pycharm:调试、断点

    1.调试:Shift+F10 或 2.快捷键: 步进:F8 进入函数内:F7 运行到下一个断点处:F9 3.删除所有断点 菜单栏->Run->View BreakPoints.. 减号代表 ...

  3. LeetCode-092-反转链表 II

    反转链表 II 题目描述:给你单链表的头指针 head 和两个整数 left 和 right ,其中 left <= right .请你反转从位置 left 到位置 right 的链表节点,返回 ...

  4. 矩池云里查看cuda版本

    可以用下面的命令查看 cat /usr/local/cuda/version.txt 如果想用nvcc来查看可以用下面的命令 nvcc -V 如果环境内没有nvcc可以安装一下,教程是矩池云上如何安装 ...

  5. w10环境vs2017,vs2019配置Opengl快捷方法

    最近,计算机图形学老师向我们布置了任务,配置自己的opengl.百度之后我发现很多教程和方法尝试之后,我发现一种简单的方法来分享给大家. 首先我的软件配置是w10专业版系统+Visual Stdio ...

  6. 监督学习,无监督学习常用算法集合总结,引用scikit-learn库(监督篇)

    why写这篇blog 最近在接触这方面的知识,但是找了许多的笔记,都感觉没有很好的总结出来,也正好当做是边学习,边复习着走.大佬轻喷.参考书目<python机器学习基础教程> 将分别从以下 ...

  7. WPF中Enter 焦点转移方法

    1.Set the TabIndex="16"2. private void detailGrid_Keydown(object sender, KeyEventArgs e) { ...

  8. 创世区块配置文件genesis.json的格式解读

    创世区块配置文件genesis.json的格式解读 中文网站上关于genesis 的解析大多数都来自于这个Gist:Ethereum private network configuration gui ...

  9. Net6Configuration & Options 源码分析 Part3 IOptionsMonitor 是如何接收到配置文件变更并同步数据源的

    配置源的同步 IOptionsMonitor 使用 //以下demo演示使用IOptionsMonitor重新加载配置并当重新加载配置是执行回调函数 var configuration = new C ...

  10. 配置Openfiler做ISCS实验

    在VMware workstation中安装openfiler(linux底层)   系统安装 选择redhat6,64bit   分配30G 2.   3.. 4.5.               ...