精华内容
下载资源
问答
  • 但是 我提交的是整个form表单的值 这个表单中有很多表单域的!就像注册一样要提交很多信息 但是目前$.post()这种方式是不是只带一个参数。就算可待多个参数,那么我是不是要在,{"":,"":.........将所有的信息都...
  • form表单提交的几种方式

    万次阅读 多人点赞 2019-06-04 09:41:03
    表单提交方式一:直接利用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联系

    展开全文
  • form表单详解

    千次阅读 2020-07-06 16:02:56
    form表单详解form表单属性 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序以处理,从而使得Web服务器与用户之间具有交互功能。 表单实现前后台交互:用户将...

    form表单

    表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序以处理,从而使得Web服务器与用户之间具有交互功能。
    表单实现前后台交互:用户将表单提交到后台再右后台提交到数据库的过程,实现前后端交互。
    表单在网页中主要负责数据采集功能,它用< form >标签定义。用户输入的信息都要包含在form标签中,点击提交后,< form >和</ form >里面包含的数据将被提交到服务器或者电子邮件里。
    所有的用户输入内容的地方都用表单来写,如登录注册、搜索框。

    在这里插入图片描述
    在这里插入图片描述

    form表单简介

    表单是由窗体和控件组成的,一个表单一般应该包含用户填 写信息的输入框,提交按钮等,这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
    表单标签的格式:
    < form action="url" method=get|post name=“myform” >< /form >

    • name:表单提交时的名称
    • action:提交到的地址
    • method:提交方式,默认为get
      post和get区别:
    1. 数据提交方式,get把提交的数据url可以看到,post看不到
    2. get一般用于提交少量数据,post用来提交大量数据
    3. get最多提交2kb数据,post理论上没有限制
    4. get提交的数据在浏览器历史记录中,安全性不好

    一个完整的表单包含三个基本组成部分

    • 表单标签
      是指< form >标签本身,它是一个包含表单元素的区域,使用< form >< /form >定义
    • 表单域
      是< form >标签中用来收集用户输入的每一项,通常用input标签来定义,input标签有不同的类型,用以对用用户不同的数据(比如:文本域、下拉列表、单选框、复选框等等)
    • 表单按钮
      用来提交< form >表单中所有信息到服务器
      *表单域和表单按钮都属于表单元素

    form表单属性

    form支持HTML的全局属性

    属性 描述
    accept MIME_type HTML5 不支持。规定服务器接收到的文件的类型(文件是通过文件上传提交的)
    accept-charset character_set 规定服务器可处理的表单数据字符集
    action URL 规定当提交表单时向何处发送表单数据
    autocomplete on / off 规定是否启用表单的自动完成功能
    enctype application / x-www-form-urlencoded
    multipart / form-data
    text / plain
    规定在向服务器发送表单数据之前如何对其进行编码(适用于 method=“post” 的情况)
    method get / post 规定用于发送表单数据的 HTTP 方法
    name text 规定表单的名称
    target _blank
    _self
    _parent
    _top
    规定在何处打开 action URL

    accept

    已弃用

    accept-charset

    定义和用法: accept-charset 属性规定服务器用哪种字符集处理表单数据。
    语法:

    <form accept-charset="value" >
    

    常用值:

    • UTF-8 - Unicode 字符编码
    • ISO-8859-1 - 拉丁字母表的字符编码
    • gb2312 - 简体中文字符集
      服务器可处理的一个或多个字符集。如需规定一个以上的字符集,请使用逗号来分隔各字符集。
      理论上讲,可使用任何字符编码,但没有浏览器可以理解所有的编码。字符编码使用得越广泛,浏览器对其支持越好。

    action

    定义和用法: 必需的 action 属性规定当提交表单时,向何处发送表单数据。
    语法:

    <form action="value">
    

    常用值:

    • 绝对 URL - 指向其他站点(比如 src=“www.example.com/example.htm”)
    • 相对 URL - 指向站点内的文件(比如 src=“example.htm”

    autocomplete

    定义和用法: autocomplete 属性规定表单是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。autocomplete 属性适用于 < form>,以及下面的 < input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。
    语法:

    <form autocomplete="on|off">
    

    常用值:

    • on 默认。规定启用自动完成功能。
    • off 规定禁用自动完成功能。

    enctype

    定义和用法: enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。( 只有 method=“post” 时才使用 enctype 属性。 )
    语法:

    <form enctype="value"> 
    

    常用值:

    • application/x-www-form-urlencoded 默认。在发送前对所有字符进行编码(将空格转换为 “+” 符号,特殊字符转换为 ASCII HEX 值,窗体数据被编码为名称/值对。这是标准的编码格式。 。
    • multipart/form-data 不对字符编码。当使用有文件上传控件的表单时,该值是必需的,窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分。
    • text/plain 将空格转换为 “+” 符号,但不编码特殊字符,窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符。

    method

    定义和用法: method 方法规定如何发送表单数据(form-data)(表单数据会被发送到在 action 属性中规定的页面中)。

    表单数据可被作为 URL 变量的形式来发送(method=“get”)或者作为 HTTP post 事务的形式来发送(method=“post”)。

    • 关于 GET 的注释:

      将表单数据以名称/值对的形式附加到 URL 中
      URL 的长度是有限的(大约 3000 字符)
      绝不要使用 GET 来发送敏感数据!(在 URL 中是可见的)
      对于用户希望加入书签的表单提交很有用
      GET 更适用于非安全数据,比如在 Google 中查询字符串

    • 关于 POST 的注释:

      将表单数据附加到 HTTP 请求的 body 内(数据不显示在 URL 中)
      没有长度限制
      通过 POST 提交的表单不能加入书签
      语法:

    <form method="get|post"> 
    

    常用值:

    • get 默认。将表单数据(form-data)以名称/值对的形式附加到 URL 中:URL?name=value&name=value。
    • post 以 HTTP post 事务的形式发送表单数据(form-data)。

    name

    定义和用法: name 属性规定表单的名称。name 属性用于在 JavaScript 中引用元素,或者在表单提交之后引用表单数据。
    语法:

    <form name="text">
    

    常用值:
    text 规定表单的名称。

    novalidate

    定义和用法: novalidate 属性是一个布尔属性。
    novalidate 属性规定当提交表单时不对表单数据(输入)进行验证。
    语法: < form novalidate ="novalidate ">
    常用值:

    • novalidate 如果使用该属性,则提交表单时不进行验证。

    target

    定义和用法: target 属性规定一个名称或一个关键词,指示在何处打开 action URL,即在何处显示提交表单后接收到的响应。target 属性定义浏览器上下文(比如选项卡、窗口或内联框架)的名称或关键词。
    语法:

    <form target="_blank|_self|_parent|_top|framename">
    

    常用值:

    • _blank 在新窗口/选项卡中打开。

    • _self 同一框架中打开。(默认)

    • _parent 父框架中打开。

    • _top 整个窗口中打开。

    • framename 在指定的 iframe 中打开。

    HTML 表单输入元素

    多数情况下被用到的表单标签是输入标签()。输入类型是由类型属性(type)定义的。
    大多数经常被用到的输入类型如下:

    文本域(Text Fields)

    文本域通过< input type=“text”> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

    <form>
        <span>First name:<span>
        <input type="text" name="firstname"><br>
        <span>Last name:<span/>
        <input type="text" name="lastname">
    </form>
    

    显示效果如下:
    在这里插入图片描述
    表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。

    密码字段

    密码字段通过标签< input type=“password”> 来定义:

    <form>
    
    <span>Password:<span/>
    <input type="password" name="pwd">
    
    </form>
    
    

    显示效果如下:
    在这里插入图片描述
    注意:密码字段字符不会明文显示,而是以星号或圆点替代。

    单选按钮(Radio Buttons)

    < input type=“radio”> 标签定义了表单单选框选项

    <form>
    <input type="radio" name="sex" value="male"><span>Male<span/><br>
    <input type="radio" name="sex" value="female"><span>Female<span/>
    </form>
    

    显示效果如下:
    在这里插入图片描述

    复选框(Checkboxes)

    < input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

    <form>
    <input type="checkbox" name="vehicle" value="Bike"><span>I have a bike<span/><br>
    <input type="checkbox" name="vehicle" value="Car"><span>I have a car<span/>
    </form>
    

    显示效果如下:

    在这里插入图片描述

    提交按钮(Submit Button)

    < input type=“submit”> 定义了提交按钮.
    当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

    <form name="input" action="html_form_action.php" method="get">
    <span>Username:<span/>
    <input type="text" name="user">
    <input type="submit" value="Submit">
    </form>
    

    fieldset标签

    < fieldset> 标签可以将表单内的相关元素分组。
    < fieldset> 标签会在相关表单元素周围绘制边框。

    属性 描述
    disabled disabled 规定该组中的相关表单元素应该被禁用。
    rmNew form_id 规定 fieldset 所属的一个或多个表单。
    name text 规定 fieldset 的名称。

    实例如下

    <form>
      <fieldset>
        <legend>Personalia:</legend>
        Name: <input type="text"><br>
        Email: <input type="text"><br>
        Date of birth: <input type="text">
      </fieldset>
    </form>
    

    效果如下
    在这里插入图片描述

    标签

    标签作为计算结果输出显示(比如执行脚本的输出)。

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
    </form>
    

    效果如下
    在这里插入图片描述

    展开全文
  • 获取form表单数据

    万次阅读 2019-06-09 16:14:39
    当我们提交form表单数据时,我们可以在form表单内使用action 属性来提交表单,也可以使用jQuery插件中的 ajax方式提交,或者使用post提交等等。现在我要实现的功能是首先要判断form表单里面的多个数据,如果数据符合...
    开发工具与关键技术:VS、MVC
    作者:何德润
    撰写时间:2019.6.8
    

    当我们提交form表单数据时,我们可以在form表单内使用action 属性来提交表单,也可以使用jQuery插件中的 ajax方式提交,或者使用post提交等等。现在我要实现的功能是首先要判断form表单里面的多个数据,如果数据符合要求,则可以提交,否则不可以提交。
    大部分人可能会直接获取form表单中input标签内的数据。即是这样:

    var StudentNumber = $("#formExaminee [name=’ StudentNumber ']").val();
    var studentName = $("#formExaminee [name=‘StudentName’]").val()
    val()方法为jQuery插件封装的一个方法,用于返回或设置被选元素的值。
    "#formExaminee“为form表单的id
    [name='StudentName’为每个输入框的名称

    但是当我们要判断多个条件时,这样的方法会让我们写很多代码。有没有一种方法可以一句代码获取整个form表单数据呢。
    下面,我们尝试下利用jQuery插件中的serialize()方法和serializeArray()方法获取整个form表单的数据。
    使用serialize()方法获取整个表单的数据,浏览器控制台输出的效果为:
    在这里插入图片描述
    但这个是方法通过序列化表单值,输出的是 URL 编码的文本字符串,不符我们的要求。所以不用这个方法。
    使用serializeArray ()方法获取整个表单的数据,浏览器控制台输出的效果为:
    在这里插入图片描述
    这个方法是通过序列化表单值来创建JSON对象数组,输出的是JSON对象数组
    但这个方法输出的数据让我们获取其中的某个值时变得很麻烦。所以,我们不妨将它变成对象的形式输出。具体的方法如下:

    $.fn.serializeObject = function () {
    var ct = this.serializeArray();
    var obj = {};
        $.each(ct, function () {
            if (obj[this.name] !== undefined) {
                if (!obj[this.name].push) {
                    obj[this.name] = [obj[this.name]];
                }
                obj[this.name].push(this.value || "");
            } else {
                obj[this.name] = this.value || "";
            }
        });
        return obj;
    };
    

    在上面的代码中,我封装了一个名为serializeObject的函数,当我们调用它时,直接$(“”). serializeObject()就可以了。
    在封装的函数里面,我声明了两个变量,变量obj用于接收循环判断后的值,ct用于获取当前form表单的数据。
    each()方法遍历ct里面的数据;if()判断符合条件的数据;push() 方法向数组的末尾添加一个或多个元素,最后返回一个对象形式的数据。
    现在我们调用这个方法,在浏览器控制台输出form表单数据。
    代码为:

     var us = $("#formUserType").serializeObject();
       console.log(us)
    

    效果图:
    在这里插入图片描述
    当我们要获取里面的值进行某些判断时,我们可以这样写:

    if (us.password[0] == us.password[1]) {}
    获取里面的某个值:
    var UserCoding =us.UserCoding;
      console.log(UserCoding);
    

    效果图:
    在这里插入图片描述
    通过上面这个例子,我们获取form表单里面的数据时只需调用封装好的serializeObject()方法就可以了,不用每次书写同样的代码。

    展开全文
  • form表单提交点击按钮提交form表单

    千次阅读 2017-06-14 00:03:04
    使用jquery提交form表单 2017-06-14 刘道鑫seq... 转自 I_T_馆 修改 微信分享: 需求是:新增页面,有一个表单要提交,正常直接在action中写url,点击submit按钮就可以提交...

    使用jquery提交form表单

    2017-06-14  刘道鑫seq...  转自 I_T_馆
    修改
    微信分享:

    需求是:新增页面,有一个表单要提交,正常直接在action中写url,点击submit按钮就可以提交了,但我希望能够在表单提交之前验证一下文本框内容。于是,使用jquery来验证表单,验证通过后提交form表单。


    几天前使用jquery提交form表单.jquery的各种方法都尝试过了,但就是不可以,今天正好又遇到了这个问题,于是有探讨了一下,莫名其妙,有成功了.下面看一下是怎么做的.

     下面两张图片,一张是做ajax请求的,另一张是form的写法.



     
      
     
    展开全文
  • HTML中Form表单的使用

    万次阅读 多人点赞 2019-06-20 15:16:26
    1、form表单标记 表单标记以<form>标记开头,以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。 <form>标记的基本语法如下: <form action="url" method="get | ...
  • vue 为form 表单赋值 获取form表单的值

    千次阅读 2019-10-06 16:34:49
    form表单赋值 this.form.setFieldsValue({ hosName: this.hostData.hosName, //前面的值为表单中的值 hosCode: this.hostData.hosCode, hosTypeName: this.hostData.hosType, hosCate...
  • form表单提交,前端验证

    万次阅读 多人点赞 2017-04-30 18:09:42
    Form表单提交,js验证 1, Onclick() 2, Onsubmit() Button标签 input (属性 submit button )标签 Input type=button 定义按钮,没有任何行为。多数情况下,用于通过javascript启动脚本 Input type=submit 定义...
  • form表单文件上传

    万次阅读 2019-04-25 10:33:00
    form表单文件上传 form表单文件上传的ajax方法与文本上传有一些不一样 首先form表单的enctype属性写为**“multipart/form-data”** 默认是application/x-www-form-urlencoded <form class="layui-form" id=...
  • form表单提交方式

    万次阅读 多人点赞 2018-01-05 19:51:12
    form表单提交方式总结一下: 一、直接上代码&lt;script type=&quot;text/javascript&quot;&gt; function check(form) { if(form.userId.value=='') { alert(&quot;请输入用户帐号!&quot...
  • Form表单防止自动提交:form 属性添加 onsubmit="return false;"Form表单重置填充内容在重置button调如下方法reset();
  • // 自动,动态创建 form表单 function getUrl(URL, PARAMS) { var temp = document.createElement(&quot;form&quot;); temp.action = URL; temp.method = &quot;post&quot;; temp.style....
  • form表单ID:postform 设置表单请求url document.postform.action = "SaveReturnInfo"; 提交form表单 document.getElementById("postform").submit();
  • flask form表单

    千次阅读 2019-07-04 19:40:14
    flask没有集成的ORM模型,所以要安装第三方form表单的扩展包,当然不使用第三方的也可以。第三方包的功能更多。 一、安装扩展 pip install flask-wtf 二、创建一个form表单类 from flask_wtf import FlaskForm from...
  • vue获取form表单的值示例这里使用的是Element-ui组件html:JS:var phone = this.phone;var password = this.password;var that = this;var phone = that .phone;var password = that .password;this.$axios({method:'...
  • html Form表单嵌套

    千次阅读 2020-01-09 00:07:58
    html Form表单嵌套 html编写form表单的时候,某些特殊情况会需要form表单嵌套或者在form表单...Form表单嵌套: <form id="f1" action="a1"> <input id="i1" form="f1"> <form id="f2" action="a2"...
  • Element form表单 表单域对齐

    万次阅读 2018-09-02 08:49:02
    form表单组件中,我们可以通过 label-position 属性来改变表单域或标签的位置,可选的值有 top/left/right ,默认的是 right ,lable-position 必须要和 label-width(表单域标签的宽度,作为 Form 直接子元素的 ...
  • Form表单请求

    千次阅读 2016-09-08 16:16:56
    Form表单请求
  • form表单,表单提交,formid

    千次阅读 2018-12-29 17:23:13
    1.在使用提交表单时,尽量使用form表单,提交时有event参数,好多参数都可通过event.detail.value(此时,表单的各个元素需要添加name属性,否则这里会打印不到)来获取,比较方便,而且可以减少页面变量的使用,...
  • 切记:用table标签来布局form表单元素,table标签必须放在form表单内部,否则可能会出现各种bug <form action=""> <table > <tr> <td>姓名</td> <td><label for="">...
  • form表单验证是几乎所有web项目或者APP都会遇到的,那么通常遇到的表单验证情况主要分为以下三种: 1.form表单中的表单项项都是写死的 意思是说,表单项不是根据动态数据加载出来的。那么只需要写好对应的验证规则...
  • form表单内的数据,在点击submit按钮时,即便没有写action的请求地址,也会默认提交到一个请求地址,这个请求地址是当前访问的网址。(form表单的数据不submit,可能是通过ajax的方式提交) 怎么解决这个默认提交呢...
  • @submit获取不到form表单内容问题 需要给每个form表单里边的元素加上一个name <form @submit="formSubmit"> <input type="text" name="我是input" value="" /> <input type="text" placeholder...
  • form表单上传文件

    千次阅读 2018-11-07 23:07:12
    form表单上传文件
  • form表单使用小结

    千次阅读 2020-11-27 16:44:36
    前后端交互的时候对于数据传输是必须的,form表单传输数据是经常使用的一种方式 下面总结一些最近遇到的问题 form表单外的按钮怎么提交form表单 在前端布局的时候,我们有时候需要将提交按钮放置在form表单外,这个...
  • form表单的提交

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

    千次阅读 2020-05-14 10:10:21
    场景:index.js上有三个form表单组件分别是,A.js B.js C.js 点击index.js上的提交/保存按钮,提交子组件form表单的值 1.在index父组件上使用create创建form const { form } = this.props; const { ...
  • form表单、修改

    千次阅读 2019-05-07 18:17:11
    一、form表单 form表单有两个属性:action这是提交的地址,有绝对的和相对两种url,method提交表单的方式,提交的方式有两种get和post,form表单提交默认方式是get与 post相比,get更简单也更快,get提交时参数直接...
  • VUE--Form表单

    万次阅读 2019-04-18 16:49:50
    表单内容 1、写在data内验证: ... model:表单数据对象 是绑定我们form表单中需要提交给后台的一个对象 -> label-width:表单域标签的宽度,作为 Form 直接子元素的 form-item 会继承该值 -...
  • js提交form表单

    万次阅读 热门讨论 2016-08-27 10:38:10
    前段时间将边用边学javascript.pdf书看完了,其中之前最不熟悉的也是这次印象最深刻的就是提交form表单,所以在这里总结一下js提交form表单,以及表单中对应的一些扩展知识O(∩_∩)O~

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 85,949
精华内容 34,379
关键字:

form表单