from表单_from表单提交 - CSDN
精华内容
参与话题
  • from 表单提交

    万次阅读 2013-12-10 21:48:00
    因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因。 如有冒犯请联系本人,或删除,或标明出处。 因为好的文章,以前只想收藏,但连接有时候会失效,...

    因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因。

    如有冒犯请联系本人,或删除,或标明出处。

    因为好的文章,以前只想收藏,但连接有时候会失效,所以现在碰到好的直接转到自己这里。

    原文 出处http://www.cnblogs.com/fish-li/archive/2011/07/17/2108884.html



    Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源。 虽然Asp.net WebForms框架为了帮助我们简化开发工作,做了很完美的封装,让我们只需要简单地使用服务端控件就可以直接操作那些 HTML表单元素了。但我认为了解一些基础的东西,可以使我们不必束缚在WebForms框架上,以及遇到一些奇怪问题时, 可以更从容地解决它们。

    今天,我将和大家来聊聊表单,这个简单又基础的东西。我将站在HTML和单纯的Asp.net框架的角度来解释它们的工作方式, 因此,本文不演示WebForms服务器控件的相关内容。

    简单的表单,简单的处理方式

    好了,让我们进入今天的主题,看看下面这个简单的HTML表单。

    <form action="Handler1.ashx" method="post" >
    <p>客户名称: <input type="text" name="CustomerName" style="width: 300px" /></p>
    <p>客户电话: <input type="text" name="CustomerTel" style="width: 300px" /></p>
    <p><input type="submit" value="提交" /></p>
    </form>
    

    在这个HTML表单中,我定义了二个文本输入框,一个提交按钮,表单将提交到Handler1.ashx中处理,且以POST的方式。
    注意哦,如果我们想让纯静态页面也能向服务器提交数据,就可以采用这样方式来处理:将action属性指向一个服务器能处理的地址。

    说明:当我们使用WebForms的服务器表单控件时,一般都会提交到页面自身来处理(action属性指向当前页面), 这样可以方便地使用按钮事件以及从服务器控件访问从浏览器提交的控件输入结果。
    如果在URL重写时,希望能在页面回传时保持URL不变,即:action为重写后的URL,那么可以Page类中执行以下调用:

    Form.Action = Request.RawUrl;    // 受以下版本支持:3.5 SP1、3.0 SP1、2.0 SP1
    
    

    好了,我们再回到前面那个HTML表单,看一下如果用户点击了“提交”按钮,浏览器是如何把表单的内容发出的。 在此,我们需要Fiddler工具的协助,请在提交表单前启动好Fiddler。我将这个表单的提交请求过程做了如下截图。

    上图是将要提交的表单的输入情况,下图是用Fiddler看到的浏览器发出的请求内容。

    在这张图片中,我们可以看到浏览器确实将请求发给了我前面在action中指定的地址,且以POST形式发出的。 表单的二个控件的输入值放在请求体中,且做了【编码】处理,编码的方式用请求头【Content-Type】说明, 这样,当服务端收到请求后,就知道该如何读取请求的内容了。 注意:表单的数据是以name1=value1&name2=value2 的形式提交的,其中name,value分别对应了表单控件的相应属性。

    我们还可以在Fiddler中,将视图切换到WebForms选项卡,这样能更清楚地只查看浏览器提交的数据,如下图。

    看了客户端的页面和请求的内容,我们再来看看在服务端如何获取浏览器提交的表单的输入吧,代码如下:

    string name = context.Request.Form["CustomerName"];
    string tel = context.Request.Form["CustomerTel"];
    

    代码很简单,直接根据表单控件的name属性访问Request.Form就可以了。

    表单提交,成功控件

    我们再来看一下浏览器是如何提交表单的,或者说,浏览器在提交表单时,要做哪些事情。

    浏览器并不是将所有的表单控件全部发送到服务器的,而是会查找所有的【成功控件】,只将这些成功控件的数据发送到服务端, 什么是成功控件呢?
    简单地来说,成功控件就是:每个表单中的控件都应该有一个name属性和”当前值“, 在提交时,它们将以 name=value 的形式做为提交数据的一部分。
    对于一些特殊情况,成功控件还有以下规定:
    1. 控件不能是【禁用】状态,即指定【disabled="disabled"】。即:禁用的控件将不是成功控件。
    2. 如果一个表单包含了多个提交按键,那么仅当用户点击的那个提交按钮才算是成功控件。
    3. 对于checkbox控件来说,只有被用户勾选的才算是成功控件。
    4. 对于radio button来说,只有被用户勾选的才算是成功控件。
    5. 对于select控件来说,所有被选择的选项都做为成功控件,name由select控件提供。
    6. 对于file上传文件控件来说,如果它包含了选择的文件,那么它将是一个成功控件。
    此外,浏览器不会考虑Reset按钮以及OBJECT元素。

    注意:
    1. 对于checkbox, radio button来说,如果它们被确认为成功控件,但没有为控件指定value属性, 那么在表单提交时,将会以"on"做为它们的value
    2. 如果在服务端读不到某个表单控件的值,请检查它是否满足以上规则。

    提交方式:在前面的示例代码中,我为form指定了method="post",这个提交方法就决定了浏览器在提交数据时,通过什么方式来传递它们。
    如果是【post】,那么表单数据将放在请求体中被发送出去。
    如果是【get】,那么表单数据将会追加到查询字符串中,以查询字符串的形式提交到服务端。
    建议:表单通常还是以post方式提交比较好,这样可以不破坏URL,况且URL还有长度限制。

    数据的编码:前面我将浏览器的请求细节用Fiddler做了个截图,从这个图中我们可以看到:控件输入的内容并不是直接发送的, 而是经过一种编码规则来处理的。目前基本上只会只使用二种编码规则:application/x-www-form-urlencoded 和 multipart/form-data , 这二个规则的使用场景简单地说就是:后者在上传文件时使用,其它情形则使用前者(默认)。
    这个规则是在哪里指定的呢? 其实form还有个enctype属性,用它就可以指定编码规则,当我在VS2008写代码时,会有以下提示:

    按照我前面说过的编码规则选择逻辑,application/x-www-form-urlencoded做为默认值,所以,一般情况下我们并不用显式指定。 除非我们要上传文件了,那么此时必须设置enctype="multipart/form-data"

    好了,说了这么一大堆理论,我们再来看一下浏览是如何处理表单数据的。这个过程大致分为4个阶段:
    1. 识别所有的成功控件。
    2. 为所有的成功控件创建一个数据集合,它们包含 control-name/current-value 这样的值对。
    3. 按照form.enctype指定的编码规则对前面准备好的数据进行编码。编码规则将放在请求中,用【Content-Type】指出。
    4. 提交编码后的数据。此时会区分post,get二种情况,提交的地址由form.action属性指定的。

    多提交按钮的表单

    用过Asp.net WebForms框架的人可能都写过这样的页面:一个页面中包含多个服务端按钮。处理方式嘛, 也很简单:在每个按钮的事件处理器写上相应的代码就完事了,根本不用我们想太多。
    不过,对于不理解这背后处理过程的开发人员来说,当他们转到MVC框架下,可能会被卡住:MVC框架中可没有按钮事件! 即使用不用MVC框架,用ashx通用处理器的方式,也会遇到这种问题,怎么办?
    对于这个问题,本文将站在HTML角度给出二个最根本的解决办法。

    方法1:根据【成功控件】定义,我们设置按钮的name,在服务端用name来区分哪个按钮的提交:

    HTML代码

    <form action="Handler1.ashx" method="post">
    <p>客户名称: <input type="text" name="CustomerName" style="width: 300px" /></p>
    <p>客户电话: <input type="text" name="CustomerTel" style="width: 300px" /></p>
    <p><input type="submit" name="btnSave" value="保存" />
        <input type="submit" name="btnQuery" value="查询" />
    </p>
    </form>
    

    服务端处理代码

    // 注意:我们只要判断指定的name是否存在就可以了。        
    if( string.IsNullOrEmpty(context.Request.Form["btnSave"]) == false ) {
        // 保存的处理逻辑
    }
    if( string.IsNullOrEmpty(context.Request.Form["btnQuery"]) == false ) {
        // 查询的处理逻辑
    }
    

    方法2:我将二个按钮的name设置为相同的值(根据前面的成功控件规则,只有被点击的按钮才会提交),在服务端判断value,示例代码如下:

    <form action="Handler1.ashx" method="post">
    <p>客户名称: <input type="text" name="CustomerName" style="width: 300px" /></p>
    <p>客户电话: <input type="text" name="CustomerTel" style="width: 300px" /></p>
    <p><input type="submit" name="submit" value="保存" />
        <input type="submit" name="submit" value="查询" />
    </p>
    </form>
    

    string action = context.Request.Form["submit"];
    if( action == "保存" ) {
        // 保存的处理逻辑
    }
    if( action == "查询" ) {
        // 查询的处理逻辑
    }
    

    当然了,解决这个问题的方法很多,我们还可以在提交前修改form.action属性。 对于MVC来说,可能有些人会选择使用Filter的方式来处理。最终选择哪种方法,可根据各自喜好来选择。
    我可能更喜欢直接使用Ajax提交到一个具体的URL,这样也很直观,在服务端也就不用这些判断了。接着往下看吧。

    上传文件的表单

    前面我说到“数据的编码"提到了form.enctype,这个属性正是上传表单与普通表单的区别,请看以下示例代码:

    <form action="Handler2.ashx" method="post" enctype="multipart/form-data">
    <p><input type="text" name="str" value="一个字符串,别管它" /></p>
    <p>要上传的文件1<input type="file" name="file1"/></p>
    <p>要上传的文件2<input type="file" name="file2"/></p>
    <p><input type="submit" value="提交" /></p>
    </form>
    

    我将上传2个小文件

    我们再来看看当我点击提交按钮时,浏览器发送的请求是个什么样子的:

    注意我用红色边框框出来的部分,以及请求体中的内容。此时请求头Content-Type的值发生了改变, 而且还多了一个叫boundary的参数,它将告诉服务端:请求体的内容以这个标记来分开。 并且,请求体中每个分隔标记会单独占一行,且具体内容为:"--" + boundary, 最后结束的分隔符的内容为:"--" + boundary + "--" 也是独占一行。 从图片中我们还可以发现,在请求体的每段数据前,还有一块描述信息。
    具体这些内容是如何生成的,可以参考本文后面的实现代码。

    再来看看在服务端如何读取上传的文件。

    HttpPostedFile file1 = context.Request.Files["file1"];
    if( file1 != null && string.IsNullOrEmpty(file1.FileName) == false )
        file1.SaveAs(context.Server.MapPath("~/App_Data/") + file1.FileName);
    
    HttpPostedFile file2 = context.Request.Files["file2"];
    if( file2 != null && string.IsNullOrEmpty(file2.FileName) == false )
        file2.SaveAs(context.Server.MapPath("~/App_Data/") + file2.FileName);
    

    或者

    HttpFileCollection files = context.Request.Files;
    foreach( string key in files.AllKeys ) {
        HttpPostedFile file = files[key];
        if( string.IsNullOrEmpty(file.FileName) == false )
            file.SaveAs(context.Server.MapPath("~/App_Data/") + file.FileName);
    }
    

    二种方法都行,前者更能体现控件的name与服务端读取的关系,后者在多文件上传时有更好的扩展性。

    安全问题:注意,上面示例代码中,这样的写法是极不安全的。正确的做法应该是:重新生成一个随机的文件名, 而且最好能对文件内容检查,例如,如果是图片,可以调用.net的一些图形类打开文件,然后"另存"文件。 总之,在安全问题面前只有一个原则:不要相信用户的输入,一定要检查或者转换。

    MVC Controller中多个自定义类型的传入参数

    前面的所有示例代码中都有一个规律:在服务端读取浏览器提交的数据时,都会使用控件的name属性,基本上在Asp.net中就是这样处理。 但是在MVC中,MS为了简化读取表单数据的代码,可以让我们直接在Controller的方法中直接以传入参数的形式指定, 此时框架会自动根据方法的参数名查找对应的输入数据(当然也不止表单数据了)。下面举个简单的例子:

    <form action="/Home/Submit" method="post">
    <p>客户名称: <input type="text" name="Name" style="width: 300px" /></p>
    <p>客户电话: <input type="text" name="Tel" style="width: 300px" /></p>
    <p><input type="submit" value="提交" /></p>
    </form>
    

    Conntroller中的方法的签名:

    public ActionResult Submit(Customer customer)
    {
    }
    
    public ActionResult Submit(string name, string tel)
    {
    }
    

    以上二种方法都是可以的,当然了,前者会比较好,但需要事先定义一个Customer类,代码如下:

    public class Customer
    {
        public string Name { get; set; }
    
        public string Tel { get; set; }
    }
    

    如果表单简单或者业务逻辑简单,我们或许一直也不会遇到什么麻烦,以上代码能很好的工作。 但是,如果哪天我们有了新的业务需要求,需要在这个表单中同时加上一些其它的内容,例如,要把业务员的资料也一起录入进去。 其中业务员的实体类定义如下:

    public class Salesman
    {
        public string Name { get; set; }
    
        public string Tel { get; set; }
    }
    

    Controller的接口需要修改成:

    public ActionResult Submit(Customer customer, Salesman salesman)
    {
    }
    

    这时,HTML表单又该怎么写呢?刚好,这二个类的(部分)属性名称一样,显然,前面表单中的Name,Tel就无法对应了。 此时我们可以将表单写成如下形式:

    <form action="/Home/Submit" method="post">
    <p>客户名称: <input type="text" name="customer.Name" style="width: 300px" /></p>
    <p>客户电话: <input type="text" name="customer.Tel" style="width: 300px" /></p>
    <p>销售员名称: <input type="text" name="salesman.Name" style="width: 300px" /></p>
    <p>销售员电话: <input type="text" name="salesman.Tel" style="width: 300px" /></p>
    <p><input type="submit" value="提交" /></p>
    </form>
    

    注意Controller方法中的参数名与HTML表单中的name是有关系的。

    F5刷新问题并不是WebForms的错

    刚才说到了MVC框架,再来说说WebForms框架。以前时常听到有些人在抱怨用WebForms的表单有F5的刷新重复提交问题。 在此我想为WebForms说句公道话:这个问题并不是WebForms本身的问题,是浏览器的问题, 只是如果您一直使用WebForms的较传统用法,是容易产生这个现象的。那么什么叫做【传统用法】呢?这里我就给个我自己的定义吧: 所谓的WebForms的传统用法是说:您的页面一直使用服务器控件的提交方式(postback),在事件处理后,页面又进入再一次的重现过程, 或者说:当前页面一直在使用POST方式向当前页面提交。

    那么如何避开这个问题呢?办法大致有2种:

    1. PRG模式(Post-Redirect-Get),在事件处理后,调用重定向的操作Response.Redirect(), 而不要在事件处理的后期再去给一些服务器控件绑定数据项了!
    建议:按钮事件只做一些提交数据的处理,将数据绑定的操作放在OnPreRender方法中处理,而不是写在每个事件中(遍地开花)。 不过,这种方式下,可能伟大的ViewState就发挥不了太大的作用了,如果您发现ViewState没用了,在Web.config中全局关掉后, 又发现很多服务器控件的高级事件又不能用了!嗯,杯具有啊。
    这个话题说下去又没完没了,到此为止吧,不过,千万不要以为这种方法是在倒退哦。

    2. 以Ajax方式提交表单,请继续阅读本文。

    以Ajax方式提交整个表单

    前面一直在说”浏览器提交表单",事实上我们也可以用JavaScript提交表单,好处也有很多,比如前面所说的F5刷新问题。 以Ajax方式提交表单的更大好处它是异步的,还可以实现局部刷新,这些特性都是浏览器提交方式没有的。 前面我提到表单在提交时,浏览器要实现的4个步骤,基本上用JS来完成这个操作也是一样的。 但是,前面说的步骤好像很麻烦呢,有没有简单的方法来实现这个过程呢? 嗯,有的,这里我将使用JQuery以及jquery.form.js这个插件来演示这个复杂过程的简单处理方案。

    示例用的HTML表单还是我前面用的代码,完全不需要修改:

    <form action="Handler1.ashx" method="post" >
    <p>客户名称: <input type="text" name="CustomerName" style="width: 300px" /></p>
    <p>客户电话: <input type="text" name="CustomerTel" style="width: 300px" /></p>
    <p><input type="submit" value="提交" /></p>
    </form>
    

    JS代码如下:

    $(function(){
        $('form').ajaxForm({
            success: function(responseText){
                alert(responseText);
            }
        });
    });
    

    是的,就是这么简单,只要调用ajaxForm()就行了。你也可以传入任何$.ajax()能接受的参数。
    它的作用是:修改表单的提交方式,改成Ajax方式提交。最终当用户点击“提交”按钮时,此时不再是浏览器的提交行为了, 而是使用Ajax的方式提交,提交的URL以及提交方法就是在FORM中指定的参数。

    如果您希望要用户点击某个按钮或者链接时,也能提交表单(不经过提交按钮),那么可以使用如下方法:

    $(function(){
        $("#btnId").click(function(){
            $('form').ajaxSubmit({
                success: function(responseText){
                    alert(responseText);
                }
            });
        });
    });
    

    变化很小,只需要将ajaxForm修改成ajaxSubmit就OK了。 与ajaxForm()不同,调用ajaxSubmit()方法将会立即提交表单。

    以Ajax方式提交部分表单

    在前面的示例中,我们看到以Ajax方式提交一个表单是非常容易的,它完全模拟了浏览器的行为。 不过,有时我们可能需要只提交表单的一部分,为的是更好的局部更新,那么又该如何做呢?
    假如我有以下表单的一部分,我只希望在用户某个按钮时将它提交到服务端:

    <div id="divCustomerInfo">
    <p>客户名称: <input type="text" name="CustomerName" style="width: 300px" /></p>
    <p>客户电话: <input type="text" name="CustomerTel" style="width: 300px" /></p>
    </div>
    

    我们可以这样来提交这部分表单的数据:

    $("#btnId").click(function(){
        $.ajax({
            url: "Handler1.ashx", type: "POST",
            data: $('#divCustomerInfo :text').fieldSerialize(),
            success: function(responseText){
                alert(responseText);
            }
        });
        return false;
    });
    

    注意关键的代码行:data: $('#divCustomerInfo :text').fieldSerialize()
    注意:此时将由您指定一个【JQuery选择器】来过滤要提交的控件,而不是使用成功控件的筛选逻辑。

    或者,您也可以使用下面将要介绍的方法,仍然是使用 data: {} 的方式,但需要手工指定数据成员。

    使用JQuery,就不要再拼URL了!

    JQuery越来越流行,以至于在创建MVC项目时,VS IDE会把JQuery也准备好了,可能MS认为开发WEB项目离不开JQuery了。
    的确,JQuery非常方便,尤其是在处理DOM时,不仅如此,在处理AJAX请求时,也非常方便。

    不过,有件事却让我很纳闷:经常看到有人在使用JQuery实现Ajax时,把一堆参数放在URL中传递,当然了, 发送GET请求嘛,这样做不错,但是,让我不解的是:URL是拼接起来的,而且代码又臭又长!

    如果是一个简单的参数:"aaa.aspx?id=" + xxId ,这样也就罢了。但是当一堆参数拼接在一起时,可能一下子还看不清楚到底有几个什么样的参数。 而且经验丰富一些的开发人员会发现这样做有时会有乱码问题,可能网上搜过后,知道还有编码的工作要处理,于是又加了一堆编码方法。 到此为止,这段代码会让人看起来很累!

    如果您平时也是这样做的,那么我今天就告诉您:不要再拼接URL了! $.ajax()的参数不是有个data成员嘛,用它吧。看代码:

    $.ajax({
        url: "Handler1.ashx", type: "POST",
        data: { id: 2, name: "aaa", tel: "~!@#$%^&*()_+-=<>?|", xxxx: "要多少还可以写多少", encoding: "见鬼去吧。?& :)" },
        success: function(responseText) {
            $("#divResult").html(responseText);
        }
    });
    

    你说什么,只能使用GET ? 哦,那就改一下 type 参数吧。

    $.ajax({
        url: "Handler1.ashx", type: "GET",
        data: { id: 2, name: "aaa", tel: "~!@#$%^&*()_+-=<>?|", xxxx: "要多少还可以写多少", encoding: "见鬼去吧。?& :)" },
        success: function(responseText) {
            $("#divResult").html(responseText);
        }
    });
    

    看了这个示例,您还会继续拼URL吗?

    说明:为了排版简单,我将参数放在一行了,建议实际使用时,不要挤在一行。

    id, name 有什么关系

    通常我们在写HTML代码时,会给控件指定一个id属性,这个属性只供JS和CSS使用,在表单提交时,它不起任何作用。

    在上面的示例代码中,可能data {}中的各个value就来源于各个不同的控件,那么为那些控件指定相应的id属性将会方便地找到它们。
    但是如果不需要用JS和CSS控制的控件,或许它们只是用来显示一些数据(只读),那么就没有必要指定id属性, 当然了,name属性也可以不用给出(避免提交无意义的数据)。

    使用C#模拟浏览器提交表单

    浏览器也是一个普通的应用程序,.net framework也提供一些类也能让我们直接发起HTTP请求。 今天我将再次用C#来模拟浏览器的提交请求,同时也可以加深对HTTP请求的理解。

    示例代码分为二段,一段示范了使用application/x-www-form-urlencoded编码方式提交, 另一段则示范了使用multipart/form-data的编码方式。
    为了让大家能再次利用这些代码,我已将关键部分写成独立方法,希望当您有这方面的需求时能马上可以用上。 代码如下:

    1. application/x-www-form-urlencoded

    /// <summary>
    /// 向指定的URL地址发起一个POST请求,同时可以上传一些数据项。
    /// </summary>
    /// <param name="url">要请求的URL地址</param>
    /// <param name="keyvalues">要上传的数据项</param>
    /// <param name="encoding">发送,接收的字符编码方式</param>
    /// <returns>服务器的返回结果</returns>
    static string SendHttpRequestPost(string url, Dictionary<string, string> keyvalues, Encoding encoding)
    {
        if( string.IsNullOrEmpty(url) )
            throw new ArgumentNullException("url");
        
        string postData = null;
        // 将数据项转变成 name1=value1&name2=value2 的形式
        if( keyvalues != null && keyvalues.Count > 0 ) {
            postData = string.Join("&",
                    (from kvp in keyvalues
                     let item = kvp.Key + "=" + HttpUtility.UrlEncode(kvp.Value)
                     select item
                     ).ToArray()
                 );
        }
    
        if( encoding == null )
            encoding = Encoding.UTF8;
    
    
        HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
        request.Method = "POST";            
        request.ContentType = "application/x-www-form-urlencoded; charset=" + encoding.WebName;
        
        if( postData != null ) {
            byte[] buffer = encoding.GetBytes(postData);
    
            Stream stream = request.GetRequestStream();
            stream.Write(buffer, 0, buffer.Length);
            stream.Close();
        }
    
        using( WebResponse response = request.GetResponse() ) {
            using( StreamReader reader = new StreamReader(response.GetResponseStream(), encoding) ) {
                return reader.ReadToEnd();
            }
        }
    }
    
    // 调用上面方法的示例代码
    string Test_SendHttpRequestPost()
    {
        string url = "http://localhost:1272/FormWebSite1/Handler1.ashx";
    
        Dictionary<string, string> keyvalues = new Dictionary<string, string>();
        keyvalues.Add("CustomerName", "我是李奇峰,$%@+& ?#^/");
        keyvalues.Add("CustomerTel", "1381723505x");
    
        return SendHttpRequestPost(url, keyvalues, null);
    }
    

    2. multipart/form-data 。注意这部分代码有点复杂,因此我加了很多注释。

    /// <summary>
    /// 向指定的URL地址发起一个POST请求,同时可以上传一些数据项以及上传文件。
    /// </summary>
    /// <param name="url">要请求的URL地址</param>
    /// <param name="keyvalues">要上传的数据项</param>
    /// <param name="fileList">要上传的文件列表</param>
    /// <param name="encoding">发送数据项,接收的字符编码方式</param>
    /// <returns>服务器的返回结果</returns>
    static string SendHttpRequestPost(string url, Dictionary<string, string> keyvalues,
        Dictionary<string, string> fileList, Encoding encoding)
    {
        if( fileList == null )
            return SendHttpRequestPost(url, keyvalues, encoding);
    
        if( string.IsNullOrEmpty(url) )
            throw new ArgumentNullException("url");        
    
        if( encoding == null )
            encoding = Encoding.UTF8;
    
    
        HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
        request.Method = "POST";        // 要上传文件,一定要是POST方法
    
        // 数据块的分隔标记,用于设置请求头,注意:这个地方最好不要使用汉字。
        string boundary = "---------------------------" + Guid.NewGuid().ToString("N");
        // 数据块的分隔标记,用于写入请求体。
        //   注意:前面多了一段: "--" ,而且它们将独占一行。
        byte[] boundaryBytes = Encoding.ASCII.GetBytes("\r\n--" + boundary + "\r\n");
    
        // 设置请求头。指示是一个上传表单,以及各数据块的分隔标记。
        request.ContentType = "multipart/form-data; boundary=" + boundary;
    
        
        // 先得到请求流,准备写入数据。
        Stream stream = request.GetRequestStream();
    
    
        if( keyvalues != null && keyvalues.Count > 0 ) {
            // 写入非文件的keyvalues部分
            foreach( KeyValuePair<string, string> kvp in keyvalues ) {
                // 写入数据块的分隔标记
                stream.Write(boundaryBytes, 0, boundaryBytes.Length);
    
                // 写入数据项描述,这里的Value部分可以不用URL编码
                string str = string.Format(
                        "Content-Disposition: form-data; name=\"{0}\"\r\n\r\n{1}",
                        kvp.Key, kvp.Value);
    
                byte[] data = encoding.GetBytes(str);
                stream.Write(data, 0, data.Length);
            }
        }
    
    
        // 写入要上传的文件
        foreach( KeyValuePair<string, string> kvp in fileList ) {
            // 写入数据块的分隔标记
            stream.Write(boundaryBytes, 0, boundaryBytes.Length);
    
            // 写入文件描述,这里设置一个通用的类型描述:application/octet-stream,具体的描述在注册表里有。
            string description = string.Format(
                    "Content-Disposition: form-data; name=\"{0}\"; filename=\"{1}\"\r\n" +
                    "Content-Type: application/octet-stream\r\n\r\n",
                    kvp.Key, Path.GetFileName(kvp.Value));
    
            // 注意:这里如果不使用UTF-8,对于汉字会有乱码。
            byte[] header = Encoding.UTF8.GetBytes(description);
            stream.Write(header, 0, header.Length);
    
            // 写入文件内容
            byte[] body = File.ReadAllBytes(kvp.Value);
            stream.Write(body, 0, body.Length);
        }
    
    
        // 写入结束标记
        boundaryBytes = Encoding.ASCII.GetBytes("\r\n--" + boundary + "--\r\n");
        stream.Write(boundaryBytes, 0, boundaryBytes.Length);
    
        stream.Close();
    
        // 开始发起请求,并获取服务器返回的结果。
        using( WebResponse response = request.GetResponse() ) {
            using( StreamReader reader = new StreamReader(response.GetResponseStream(), encoding) ) {
                return reader.ReadToEnd();
            }
        }
    }
    
    
    // 调用上面方法的示例代码
    string Test_SendHttpRequestPost2()
    {
        string url = "http://localhost:1272/FormWebSite1/Handler2.ashx";
    
        Dictionary<string, string> keyvalues = new Dictionary<string, string>();
        keyvalues.Add("Key1", "本示例代码由 Fish Li 提供");
        keyvalues.Add("Key2", "http://www.cnblogs.com/fish-li");
        keyvalues.Add("Key3", "来几个特殊字符:~!@#$%^&*()-=_+{}[]:;'\"<>?/.,|\\");
        
        Dictionary<string, string> fileList = new Dictionary<string, string>();
        fileList.Add("file1", @"H:\AllTempFiles\ascx中文字.gif");
        fileList.Add("file2", @"H:\AllTempFiles\asax中文字.gif");
    
        return SendHttpRequestPost(url, keyvalues, fileList, Encoding.UTF8);
    }
    

    说明:上面的示例方法中,我并没有对KEY编码,是因为:我想大家选用的KEY应该是不需要编码的(英文字母与数字的组合)。
    而且,我也没加入对Cookie处理的那部分代码,如果您需要在发送请求时,保留Cookie,那么请参考我上一篇博客 【细说Cookie】中的示例代码。

    资源链接

    W3C Forms
    http://www.w3.org/TR/html4/interact/forms.html

    jquery.form.js
    https://github.com/malsup/form

    更多的jquery.form演示
    http://www.cnblogs.com/fish-li/archive/2011/05/02/2034010.html



    展开全文
  • HTML-表单from

    2017-12-15 09:53:00
    1 表单工作原理: 当访问html页面时,填写表单,提交。 浏览器将所有数据打包,发送到web服务器。 web服务器接受数据,传给服务器脚本进行处理。 web服务器脚本处理后,创建一个全新的html页面作为响应,传回给web...

    1 表单工作原理:

    1. 当访问html页面时,填写表单,提交。
    2. 浏览器将所有数据打包,发送到web服务器。
    3. web服务器接受数据,传给服务器脚本进行处理。
    4. web服务器脚本处理后,创建一个全新的html页面作为响应,传回给web服务器。
    5. 浏览器收到响应,并显示页面。

    2 表单创建

    创建用form元素,再添加相应元素。

    <form action="web服务器URL/脚本所在文件夹/脚本名" method="数据发送方式(POST/GET)">
    
    </form>

    中间添加元素一般具有三个常见属性,

    • name:传递数据时数据的名字,唯一性。必须和服务器脚本中变量名相同。
    • type:表单种类,大部分有text,submit,radio,checkbox,number等
    • value: 当被选择时,该数据的数据值。即传送给服务器的数据,与name相匹配。

    2.1 表单中元素类别:

    文本输入:

    输入少字符的文本,与textarea区别。
    使用maxlength属性,规定最大字符数。

    <input type="text" name="fullname">

    提交输入:

    <input type="submit" value="按钮显示文本">

    单选钮输入:

    一组给定选项关联单选按钮,name值必须相同。

    <input type="radio" name="hotornot" value="hot" checked>hot</br>
    <input type="radio" name="hotornot" value="not">not

    复选框输入:

    一组给定选项关联复选按钮,name值必须相同。传递数据时,数据值用&相连,幅值给name。例如 : spice=salt&pepper;

    <input type="checkbox" name="spice" value="salt">salt</br>
    <input type="checkbox" name="spice" value="pepper">pepper</br>
    <input type="checkbox" name="spice" value="garlic">garlic

    文本区输入:

    适合大量字符输入,可规定文本区大小,超过时自动加入滚动条。
    使用maxlength属性,规定最大字符数。

    <textarea name="comments" rows="10" cols="20">初始文本</textarea>

    下拉菜单:

    下拉菜单,仅需要在select中规定name,被选择选项value传递。

    <select name="characters">
        <option value="black">black</option>
        <option value="red">red</option>
        <option value="green">green</option>
    </select>

    增加multiple属性,下拉菜单单选变为多选,使用ctrl或command进行多选。

    <select name="characters" multiple>

    数字输入:

    <input type="number" min="0" max="100">

    范围输入:

    <input type="range" min="0" max="100" step="5">

    ###颜色输入:

    <input type="color" >

    日期输入:

    <input type="date" >

    邮箱输入:

    <input type="email" >

    电话输入:

    <input type="tel" >

    URL输入:

    <input type="url" >

    密码输入:

    输入字符加入掩码显示,但是传递并不十分安全。

    <input type="password" name="secret" >

    文件输入:

    允许选择一个文件,添加到表单数据中进行传输,但是传输方式必须为POST。

    <input type="file" name="doc" >

    注意

    • input元素为void元素,多个input进行换行排版时,每个input元素后加入<br>
    • 对于input元素,我们会加入标签,方便用户使用。<label>更精准,文末。
      <><>中间green即标签
    <option value="green">green</option>

    Name即标签

    Name:<input type="text" name="fullname">
    • 对于选择选项,一般设置一个默认选项,添加checked属性即可。
    • placeholder属性,添加该属性为元素提供输入案例,比正常内容颜色浅,单击后占位文本消失。
    <input type="text" name="fullname" placeholder="Buckaroo Banzai">
    • required属性,指定该属性后,元素必须填写后,才可提交订单。

    2.2 数据传输方法

    传输方式只要为两种:POST,GET

    POST:打包表单变量,后台发送到服务器。表单数据作为请求的一部分发送,用户不可见。

    GET:打包表单变量,追加到URL最后,向服务器发送请求。用户本身可以在地址栏看到表单数据。

    适用情况:

    • 提交表单后需添加标签(不用再次提交表单):GET
    • 数据私有,信用卡,口令:POST
    • 使用<textarea>含有大量字符:POST
    • 订购,查询,反馈等:POST

    2.3 表单布局

    • 对于表单的布局,我们常采用css中表格布局,使用table进行布局。
    • 对于多个选项,我们使用fieldset,legend进行分组。
    <fieldset>
        <legend>Condiments</legend>
            <input type="checkbox" name="spice" value="salt">salt</br>
            <input type="checkbox" name="spice" value="pepper">pepper</br>
            <input type="checkbox" name="spice" value="garlic">garlic
    </fieldset>

    2.4 标签label增加可访问性

    更精准添加标签,使用<label>元素,首先必须为每一个与元素添加唯一id。

    格式:

    <input type="radio" name="hotornot" id="hot" value="hot" checked>
    <label for="hot">hot</label>

    注:id名可以与name相同,但是必须唯一。

    展开全文
  • form表单的提交

    千次阅读 2019-04-07 20:22:57
    开发工具与关键技术:MVC JQuery 的 form表单的提交 作者:沈金凤 年级:18级(5)班 撰写日期:2019年4月2日 一、Form表单有两个属性分别是:“action”和“method”: Action: 的值是URL 就是当提交表单时向...

    开发工具与关键技术:MVC JQuery 的 form表单的提交

    一、Form表单有两个属性分别是:“action”和“method”:
    Action: 的值是URL 就是当提交表单时向某个地方(要提交到某处的地址)发送表单数据
    Method: 的值是 get和 post 就是用来提交表单的方式
    二、Method中的 get 和 post 的提交时的区别:
    Get: get提交时参数会直接暴露在URL上,get 与 post 相比更简单也更快,而且在大多数的时候都能使用,但是get有数据量的限制。
    Post: post能更新服务器上的文件或数据库向服务器发送大量的数据,在发送的内容可包含的未知字符用户输入时,post 比 get 更稳定也更可靠,get有数据量的限制而post则没有数据量的限制。
    三、Method中的 get 和 post 的区别之处
    get 是用来向服务器中获取数据的,而post 是用来向服务器中传递修改数据,get 将表单里的数据提交到action所指定的地址的URL后面,而且它们之间用“?”号连接,各个变量之间则用“&“连接,post是将表单里的数据放到form数据体里按照变量和值对象的方式传递到action所指定的地址上。
    四、获取表单数据可以用post提交方式的有:FormCollection form 、Request.Form[“表单元素中name属性的值“]和参数,而参数也可以用get来提交。
    用get提交时如下图表示:(代码来源于老师)
    在这里插入图片描述

    参数会直接暴露在URL上如下图所示:
    在这里插入图片描述
    而用post提交时如下图:
    在这里插入图片描述
    参数会发送到它指定的位置上不会在URL上如下图:

    在这里插入图片描述

    展开全文
  • form表单提交的几种方式

    万次阅读 多人点赞 2019-06-05 10:58:42
    表单提交方式一:直接利用form表单提交 html页面代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Insert title here</title> </head> &...

    表单提交方式一:直接利用form表单提交
    html页面代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Insert title here</title>
    </head>
    <body>
    <form action="http://localhost:8080/user" method="post">
    
    	username:<input type="text" name="username" /><br>
    	
    	password:<input type="password" name="password" /> <br>
    	
    	<input type="submit" value="登录">
    
    </form>
    
    </body>
    </html>
    

    controller页面代码:

    package com.help.demo.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    @Controller
    public class UserController {
    
    	@PostMapping("/user")
    	@ResponseBody
    	public String add(String username,String password){
    		System.out.println("返回值是》》"+username+"---->"+password);
    		String str = "返回值是"+username+password;
    		return str;
    	}
    }
    
    

    完成后启动项目 并访问http://localhost:8080/query.html 输入用户名和密码
    在这里插入图片描述
    出现下图表示成
    在这里插入图片描述

    》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

    表单提交方式二:使用ajax提交
    html页面代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Insert title here</title>
    </head>
    <body>
    <!--  -->
    <form  method="post" onsubmit="return false" action="##" id="formtest">
    
    	username:<input type="text" name="username" /><br>
    	
    	password:<input type="password" name="password" /> <br>
    	
    	<input type="button" value="登录" onclick="login()">
    
    </form>
    	<script type="text/javascript" src="/js/jquery.min.js"></script>
    	<script type="text/javascript" src="/js/jquery.easyui.min.js"></script>
    	<script type="text/javascript" src="/js/extJquery.js"></script>
    	<script type="text/javascript" src="/js/extEasyUI.js"></script>
    <script type="text/javascript">
    function login() {
        $.ajax({
        //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
            /*
            dataType:
    			要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:
    			xml:返回XML文档,可用JQuery处理。
    			html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
    			script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
    			json:返回JSON数据。
    			jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
    			text:返回纯文本字符串。
            */
            url: "http://localhost:8080/user",//url
            data: $('#formtest').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
            success: function (result) {
            	alert("成功")
                console.log(result);//打印服务端返回的数据(调试用)
                if (result.resultCode == 200) {
                    alert("SUCCESS");
                }
                ;
            },
            error : function(s,s2,s3) {
    			//数据成功传到后台 也有返回值 但就是报错 parsererror :参考
    			https://blog.csdn.net/AinGates/article/details/75250223 / 
    			https://blog.csdn.net/AinGates/article/details/75250223
            	/*
            	    写了一个ajax方法,后台一切正常,通过浏览器的F12工具查看XMLHttpRequest.status返回200,XMLHttpRequest.readyState返回4,也都没有问题。但是回调函数跳到error里,报parsererror的错误。经过排查,发现是因为后台返回时用了@ResponseBody注解(SpringMVC返回json格式的注解),但前台ajax提交没有定义dataType属性(定义服务器返回的数据类型)
    
    			    还有一种情况是ajax方法中定义了 dataType:"json"属性,就一定要返回标准格式的json字符串,要不jQuery1.4+以上版本会报错的,因为不是用eval生成对象了,用的JSON.parse,如果字符串不标准就会报错。比如只返回一个简单的字符串“success”,“fail”, true,false,并不是标准的json字符串就会报错。
    			
    		               首先,jQuery 1.4版本之后对服务端返回的JSON 数据要求比较严格,必须严格按照JSON的标准来了。
            	*/
    			
    			console.log(s)
            	console.log(s2)
            	console.log(s3)
            	
                alert("异常!");
            }
        });
    }
    </script>
    
    </body>
    
    </html>
    

    controller类的代码不变,启动项目并访问http://localhost:8080/query.html 返货成功即可

    这里遇到一个问题:就是传过去数据后,返回值正常,但进入了error ,使用console打印error时出现 parsererror

    错误原因:ajax的datatype设置问题 我之前设置为 json ,这种只能是接收后台传回来的json值 传回其他值就会出现这种错误

    解决办法:将datatype的类型改为 text

    》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

    表单提交方式三:使用easyui的form插件提交
    html页面代码:(需要引入Jquery 与 easyui的js文件)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Insert title here</title>
    </head>
    <body>
    <!--  -->
    <form  method="post" onsubmit="return false" action="##" id="formtest">
    
    	username:<input type="text" name="username" /><br>
    	
    	password:<input type="password" name="password" /> <br>
    	
    	<input type="button" value="登录" onclick="login()">
    
    </form>
    	<script type="text/javascript" src="/js/jquery.min.js"></script>
    	<script type="text/javascript" src="/js/jquery.easyui.min.js"></script>
    	<script type="text/javascript" src="/js/extJquery.js"></script>
    	<script type="text/javascript" src="/js/extEasyUI.js"></script>
    <script type="text/javascript">
    function login() {
    	//参考:http://www.jeasyui.net/plugins/166.html
       $("#formtest").form("submit",{
    	   url:"http://localhost:8080/user",
    	   onsubmit:function(){
    		   //这里验证表单是否可以提交  如果返回false阻止提交
    	   },
    	   success:function (data){
    		   alert("12354")
    		   alert(data)
    	   }
    	   
       })
    }
    </script>
    
    </body>
    
    </html>
    

    controller类不变,启动项目并访问http://localhost:8080/query.html 这个是我定义的页面返回结果表示成功

    》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

    表单提交方式四:form表单提交文件/图片
    需要设定form的enctype=“multipart/form-data” 如果不加这个会传不过去

    附件只能通过submit方法进行提交

    》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

    将form表单的一些属性记在下方以便参考

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Insert title here</title>
    </head>
    <body>
    <!--form表单中的属性: 
         accept-charset  作用: 规定服务器可处理的表单数据字符集。   常用值: UTF-8 - Unicode 字符编码   、ISO-8859-1 - 拉丁字母表的字符编码 、 gb2312 - 简体中文字符集       
         action  作用:规定当提交表单时向何处发送表单数据。  可能的值: 绝对 URL - 指向其他站点(比如 src="www.example.com/example.htm")、相对 URL - 指向站点内的文件(比如 src="example.htm")
         autocomplete  作用:规定是否启用表单的自动完成功能。
         enctype 作用:规定在发送表单数据之前如何对其进行编码  enctype 属性可能的值:  application/x-www-form-urlencoded    multipart/form-data   text/plain
     	 method 作用:规定用于发送 form-data 的 HTTP 方法     常用值:get / post
     	 name 作用:规定表单的名称。
     	 novalidate 作用:如果使用该属性,则提交表单时不进行验证。  使用方式 : novalidate="novalidate"
     	 target 作用:规定在何处打开 action URL。 常用值: _blank:在新窗口中打开。    _self:默认。在相同的框架中打开。   _parent:在父框架集中打开。  _top:在整个窗口中打开。   framename:在指定的框架中打开。 
     -->
    <form>
    <!--常用的表单元素   form   表单  input   表单元素,表单项     select和option  下拉菜单      textarea 文本域  -->
    	<!-- input 属性 :  
    		value 属性规定输入字段的初始值
    		readonly 属性规定输入字段为只读(不能修改)
    		disabled 属性规定输入字段是禁用的。  被禁用的元素是不可用和不可点击的。  被禁用的元素不会被提交。  disabled 属性不需要值。它等同于 disabled="disabled"。
    		size 属性规定输入字段的尺寸
    		maxlength 属性规定输入字段允许的最大长度
    		H5之后添加的属性
    		autocomplete 属性规定表单或输入字段是否应该自动完成。  当自动完成开启,浏览器会基于用户之前的输入值自动填写值。
    					提示:您可以把表单的 autocomplete 设置为 on,同时把特定的输入字段设置为 off,反之亦然。
    			        autocomplete 属性适用于 <form> 以及如下 <input> 类型:text、search、url、tel、email、password、datepickers、range 以及 color。
    					例子  <form action="action_page.php" autocomplete="on">   First name:<input type="text" name="fname"><br>  E-mail: <input type="email" name="email" autocomplete="off"><br>  </form> 
    		autofocus 属性是布尔属性。  如果设置,则规定当页面加载时 <input> 元素应该自动获得焦点。
    		form 属性规定 <input> 元素所属的一个或多个表单。   提示:如需引用一个以上的表单,请使用空格分隔的表单 id 列表。
    		formaction 属性规定当提交表单时处理该输入控件的文件的 URL。  
    					formaction 属性覆盖 <form> 元素的 action 属性。     
    					formaction 属性适用于 type="submit" 以及 type="image"
    		formenctype 属性规定当把表单数据(form-data)提交至服务器时如何对其进行编码(仅针对 method="post" 的表单)。
    					formenctype 属性覆盖 <form> 元素的 enctype 属性。
    					formenctype 属性适用于 type="submit" 以及 type="image"。
    		formmethod 属性定义用以向 action URL 发送表单数据(form-data)的 HTTP 方法。
    					formmethod 属性覆盖 <form> 元素的 method 属性。
    					formmethod 属性适用于 type="submit" 以及 type="image"。
    	    formnovalidate 属性
    					novalidate 属性是布尔属性。
    					如果设置,则规定在提交表单时不对 <input> 元素进行验证。
    					formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
    					formnovalidate 属性可用于 type="submit"。
    		formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。
    					formtarget 属性会覆盖 <form> 元素的 target 属性。
    					formtarget 属性可与 type="submit" 和 type="image" 使用。			
    		height 和 width 属性规定 <input> 元素的高度和宽度。   height 和 width 属性仅用于 <input type="image">。
    					注释:请始终规定图像的尺寸。如果浏览器不清楚图像尺寸,则页面会在图像加载时闪烁。
    		min 和 max 属性规定 <input> 元素的最小值和最大值。
    					min 和 max 属性适用于如需输入类型:number、range、date、datetime、datetime-local、month、time 以及 week。
    		multiple 属性是布尔属性。    如果设置,则规定允许用户在 <input> 元素中输入一个以上的值。
    					multiple 属性适用于以下输入类型:email 和 file。
    		pattern 属性规定用于检查 <input> 元素值的正则表达式。    pattern 属性适用于以下输入类型:text、search、url、tel、email、and password。
    		placeholder 属性规定用以描述输入字段预期值的提示(样本值或有关格式的简短描述)。  该提示会在用户输入值之前显示在输入字段中。
    					placeholder 属性适用于以下输入类型:text、search、url、tel、email 以及 password。
    		required 属性是布尔属性。   如果设置,则规定在提交表单之前必须填写输入字段。
    					required 属性适用于以下输入类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
    		step 属性规定 <input> 元素的合法数字间隔。     示例:如果 step="3",则合法数字应该是 -3、0、3、6、等等。
    		
    		
    	-->
    	
    	<!-- 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type=’submit’>)就可以进行数据的提交,每一个input标签都需要有一个name属性,才能进行提交 -->
    	
    	<!-- 用户名  type 是类型  name -->
    	First name: <input type="text" name="firstname"><br>
    	Last nameee: <input type="text" name="lastname"><br>
    	<!-- 密码 -->
    	Password: <input type="password" name="pwd"><br><br>
    	<!-- 单选按钮 -->
    	性别:<input type="radio" name="sex" value="male">Male
    	<input type="radio" name="sex" value="female">Female<br><br>
    	<!-- 复选框 -->
    	爱好:<input type="checkbox" name="vehicle" value="Bike">I have a bike
    	<input type="checkbox" name="vehicle" value="Car">I have a car <br><br>
    	<!-- 文件域 -->
    	选择文件:<input type="file" name="newfile"> <br><br>
    	
    	<!-- 隐藏域  这个在页面上不可加 可以保存一些不需要显示的隐藏信息 用于传递值-->
    	<input type="hidden" name="newhidden">
    	<!-- 将表单里的信息清空 重新填写 -->
    	<input type="reset" value="清空表单"><br><br>
    		<!-- 用来设置一个按钮 这个按钮没有提价功能 -->
    	<input type="button" value="注册">
    	<!--这个不常用    图片提交按钮 点击这个与点击submit效果相同    插入图片用 img标签 而不是input标签-->
    	<input type="image" name="newimg" ><br><br>
    	<!--常用   提交按钮  type 是类型  value 是按钮显示的内容-->
    	<input type="submit" value="Submit"><br><br>
    	<!--
    	 type=image和type=submit的异同:
    	都可以相应回车,并且都能提交。
    	区别就是type=image的input提交方式会把按钮点击的位置坐标x,y提交过去。
    	对于通常的表单应用来说,这样多一两个参数并没有问题,因为我们在接收端中都是按照指定的名称来处理参数,
    	所以即使多了两个参数也不会有任何问题。
             但是在做支付接口的时候(例如:支付宝接口)你就会发现,多出两个隐藏参数会带来很麻烦的问题,
             因为在在提交表单之后,接收端会对参数名称进行MD5校验,想想多两个参数会带来什么问题。
             将会直接导致表单校验不通过,然后支付失败的问题。
         
             所以在在通常网站开发中不提倡使用type=image作为表单的提交按钮。
     -->
    </form>
    </body>
    </html>
    

    本人只是为了记录自己的经历,如果侵犯到您的权益 ,请与1194821568@qq.com联系

    展开全文
  • from表单

    2019-09-08 10:51:36
    做出试图 1写出官网的小案例 ...2对比要写出的from表单样式和官网小案例的差别 3更具差别,做一些删除,修改复制 提交 1,监听到按钮点击 留意按钮的lay-filter属性 2,监听到后,进行服务器...
  • from表单学习笔记

    2018-11-22 20:39:48
    accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。 action 规定向何处提交表单的地址(URL)(提交页面)。 autocomplete 规定浏览器应该自动完成表单(默认:开启)。 enctype 规定被提交数据...
  • from表单应用

    2019-04-08 09:06:47
    今天,我们来学习from表单的应用,首先,我们要知道from的两个属性action和method,前者表示规定表单提交时向何处发生表单数据,后者规定了表单提交的方式,简单的说就是前者是地址,后者是方式,而提交的方式有两种...
  • HTML——From表单

    2020-07-24 19:18:27
    from表单 之前学习的标签更多的是向用户展示信息,假如服务器端需要验证用户是否存在,这时就需要有一个用户输入内容的标签。表单在网页中主要负责数据采集功能,它用标签定义。用户输入的信息都要包含在form标签中...
  • from表单提交

    千次阅读 2020-08-20 09:50:49
    <form action="https://www.baidu.com" method="post"> <input type="text" name="name" value="性别"/> <input type="text" name="sex" value="男"/> <button type="submit">.../button...
  • html中form表单的使用方法和介绍

    万次阅读 多人点赞 2017-10-04 09:52:31
    form表单的使用方法 第1节、表单赏析 第2节、了解表单 功能:用于搜集不同类型的用户输入的内容   有了表单,网页的内容可以由用户自己创建,那么对于网页来说,我们既是网页创建都者,也是网页的消费者。 ...
  • HTML中Form表单的使用

    千次阅读 多人点赞 2020-09-29 15:10:14
    1、form表单标记 表单标记以<form>标记开头,以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。 <form>标记的基本语法如下: <form action="url" method="get | ...
  • vue的from表单提交

    万次阅读 2018-01-03 11:41:15
    前几天在做一个项目的时候,用到vue框架...使用的时候是通过给邮箱发送一个连接然后跳转到我们写好的修改密码的页面,当时这个页面是通过form表单来写的,在使用的时候,就遇到了一个问题,由于该链接设定的是只能使用
  • ``` <from id='myfrom'> 足球 篮球 名称: 类型: 重置"> </from> ``` 如上诉代码,执行重置,如何清空input type=text中的值,
  • layui 如何清空form表单

    万次阅读 2018-12-08 16:29:03
    炒鸡有用的form表单清空: document.getElementById("form表单的id").reset(); 当你不想清空所有的form表单,而只想清空某一个input: document.getElementById("input的id").value=""...
  • JS动态创建from表单

    万次阅读 2016-12-04 16:33:27
    //js动态创建form 提交表单 function formSubmit(elementValue) {  var turnForm = document.createElement("form");   //一定要加入到body中!!   document.body.appendChild(turnForm);  turnForm....
  • vue form表单数据提交

    万次阅读 2019-07-28 19:31:59
    利用v-model能比较便捷地上传用户信息的数据,不用一个个参数地拼接。直接在data根据要传的字段定义一个对象, 再利用双向绑定得到值。...div class="from_box"> <form action=""> <input ty...
  • springMVC+thymeleaf 简单例子 后端: @RequestMapping(value = "/add", method=RequestMethod.POST) public String save(@ModelAttribute(value="message") Message message) { ......} 前端: ...
  • easyUI 清空form表单

    万次阅读 2014-12-25 15:58:55
    $("#xx_form").form('clear');
  • Form表单提交list到后台

    千次阅读 2018-10-22 23:01:32
    实体类   : 页面---- 表单提交: 后台接收action:
  • jquery代替button提交form表单

    万次阅读 2018-08-06 15:26:26
    若要使提交的form表单在新窗口打开,可以在from表单中添加target="_blank"即可。 代码演示: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;
1 2 3 4 5 ... 20
收藏数 164,365
精华内容 65,746
关键字:

from表单