html5系列:form 2.0 新结构
以往的一个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 attributes对form 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 新结构的更多相关文章
- 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的无状态模 ...
- HTML5新结构标签和移动端页面布局
--------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...
- Cocos2d-x 3.0新引擎文件夹结构
Cocos2d-x 3.0新引擎文件夹结构 2014年4月29日 Cocos2d-x 3.0学习 作为一个Cocos2d-x的菜鸟,我倒是挺愿意关注不同版本号之间的差别,Cocos2d-x 3.0自 ...
- html5新结构标签
html5新结构标签 <header> 定义 section 或 page 的页眉,也就是定义头部的标签. <footer> 定义 section 或 page 的页脚. & ...
- 前端笔记之HTML5&CSS3(上)新特性&音频视频&本地存储&自定义属性
一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...
- 大熊君学习html5系列之------XHR2(XMLHttpRequest Level 2)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- html5 新增元素以及css3新特性
HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...
- Django 2.0 新特性 抢先看!
一.Python兼容性 Django 2.0支持Python3.4.3.5和3.6.Django官方强烈推荐每个系列的最新版本. 最重要的是Django 2.0不再支持Python2! Django ...
- LINQ学习之旅 C#3.0新特性(一)
一:C#3.0新语言的特性 自动属性(Auto-Implemented Properties) 隐含类型局部变量(Local Variable Type Inference) 匿名类型(Anonymo ...
随机推荐
- SQL:查询时给表起别名
Q 有两个表student.score,查询前一个表的id.name列,后一个表的total列,查询结果通过两个表的id连接起来 要求 使用别名st和sc替换表名进行查询 A SELECT st.id ...
- python面试_总结01_概念和内置高阶函数
- 简答题 1.请谈谈Python中is 和 == 的区别(代码演示) is用于比较两个变量是否引用了同一个内存地址,is表示的是对象标识符(object identity),作用是用来检查对象的标识 ...
- Tableau绘制漏斗图、甘特图、瀑布图、镶边面积图、阴影坡度图
Tableau绘制漏斗图.甘特图.瀑布图.镶边面积图.阴影坡度图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. 漏斗图 数据源 1.1 分色直条漏斗图 (1) ...
- 跨越DDD从理论到工程落地的鸿沟
摘要:本文从DDD的核心概念讲起,重点放在如何把理论落地成代码,期望给那些正在探索DDD的同学一些指引和启发. 本文分享自华为云社区<跨越DDD从理论到工程落地的鸿沟>,作者:敏捷小智. ...
- 关于 vue2.x 的 $attrs 和 $listeners
$attrs $attrs 用于多层次组件传递参数(组件标签的attribute,class和style除外),爷爷辈组件向孙子辈组件传递参数(注:参数不能被父辈prop识别,一旦被父辈prop识别且 ...
- How to use Remote-SSH in Windows
对于不太会使用 Vim 的我来说,在服务器上用 Vim 去修改 nginx.conf 实在有点麻烦,比如没有高亮和格式化.正好想起前不久微软发布了远程开发工具包,其中一个就是今天要介绍的 Remote ...
- 浏览器中 Http缓存
分类: web缓存主要有:数据库缓存.服务器缓存(代理服务器缓存.CDN缓存),浏览器缓存. 数据库缓存 当web应用的关系比较复杂,数据库中的表很多的时候,如果频繁进行数据库查询,很容易导致数据库不 ...
- LGP4001题解
题目大意 给定一张无向图,需要消耗代价才能使一条边被[数据删除],求使这张图不连通的最小代价. 一看就是最小割的应用啊... 从 \(u\) 到 \(v\),边权为 \(w\) 的边,建两条:一条从 ...
- Java基础——自动装箱与拆箱
装箱:把基本数据类型转换为对应的包装类类型 //装箱Integer i=Integer.ValuesOf(100);//自动装箱integer i1=100;//能够直接赋值成功的称为自动装箱,也调用 ...
- SpringBoot 如何实现异步编程,老鸟们都这么玩的!
镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 首先我们来看看在Spring中为什么要使用异步编程,它能解决什么问题? 为什么要用异步框架,它解决什么问题? 在SpringBoot的日常开发中 ...