zoukankan      html  css  js  c++  java
  • 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 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,设置多个提交按钮来控制以不同的方式提交表单。

  • 相关阅读:
    Java两种方法实现循环报数
    不安装 oracle的客户,就可以使用pl/sql访问远程oracle 数据库的方法
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    从Oracle到PostgreSQL:最全控制文件
    springboot访问静态资源
    计算机组成原理 — 指令系统
  • 原文地址:https://www.cnblogs.com/10manongit/p/12965123.html
Copyright © 2011-2022 走看看