<form>标签的属性

<form>标签用来采集数据,<form>标签的属性则是用来规定如何把数据发送到服务器

属性	值	描述
action	URL地址	规定提交表单时,向何处发送表单数据
method	get或post	规定以何种方式把表单的数据提交到action URL
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	回顶在发送表单数据之前如何对其进行编码
target	_blank _self _parent _top framename	规定在何处打开action URL

1.action

action属性用来规定当提交表单时,向何处发送表单数据

action属性的值应该是后端提供的一个URL地址,这个URL地址专门负责劫收表单提交过来的数据

当<form>表单在未指定action属性值的情况下,action的默认值为当前页面的URL地址

注意:当提交表单后,页面会立即跳转到action属性指定的URL地址

2.target

target属性用来规定在何处打开action URL

值	描述
_blank	在新窗口中打开
_self	默认,在相同的框架中打开
_parent	在父框架集中打开(少用)
_top	在整个窗口中打开(少用)
framename	在指定的框架中打开(少用)

3.method

method属性可以用来规定以何种方式把表单数据提交到action URL

他的可选值有两个,get和post

默认情况下,method的值为get,表示通过URL地址的形式,把表单数据提交到action URL

注意:get方式适合用来提交少量的,简单的数据;post方式适合用来提交大量的,复杂的,或包含文件上传的数据(安全性比get方式强)

在实际开发中,<form>表单的post提交方式用的最多,很少用get,例如登录,注册,添加数据等表单操作,都需要使用post方式来提交表单

4.enctype

enctype属性用来规定在发送表单数据之前如何对数据进行编码

他的可选值有三个,默认情况下,enctype的值为application/x-www-form-urlencoded,表示在发送前编码所有的字符

值	描述
application/x-www-form-urlencoded	在发送昂前编码所有字符(默认)
multipart/form-data	不对字符编码,在使用包含文件上传控件的表单时,必须使用该值
text/plain	空格转换为"+"加号,但不对特殊字符编码(少用)

注意:在涉及到文件上传的操作时,必须将enctype的值设置为multipart/form-data

如果表单的提交不涉及到文件上传操作,则直接将enctype的值设置为applicaiton/x-www-form-urlencoded即可

表单的同步提交及缺点

什么是表单的同步提交

通过点击submit按钮,触发表单提交的操作,从而使页面跳转到action URL的行为,叫做表单的同步提交

表单同步提交的缺点

<form>表单同步提交后,整个页面会发生跳转,跳转到action URL所指向的地址,用户体验很差
<form>表单同步提交后,页面之前的状态和数据会丢失

如何解决表单同步提交的缺点

解决方案: 表单只负责采集数据,Ajax负责将数据提交到服务器

只要页面不进行跳转,页面的数据就不会丢失(在后续有示例)

Ajax中的＜form＞标签相关推荐

php中的method是什么意思,HTML中的form标签的method属性怎么用？这里有method属性的用法介绍...
本篇文章主要的介绍了关于HTML中的form标签的method属性的定义及其用法解释,做了详细的解释,后面还有两个常见的问答和method属性的实例,现在就让我们一起看下去吧首先我们来看看HTML中 ...
润乾报表JSF FORM 标签中使用填报表解决方案
需求润乾报表的标签需要在jsf页面中和其他填报控件一起使用,润乾报表负责展现录入部分数据,并且这部分数据和页面的其它控件的数据存在前台和后台的交互. 问题润乾报表在前台会生成自己的form, ...
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案参考文章: (1)antd-vue中的form表单label标签for导致点击文字触发输入框解决方案 (2)http ...
33.form标签中的GET和POST提交方式
form标签中的GET和POST 在HTML中,form表单的作用是收集标签中的内容,<form>...</form> 中间可以由访问者添加类似于文本,选择,或者一些控制模块等 ...
thinkphp ajax volist,thinkphp中的volist标签在ajax中操作详解
在一个ThinkPHP的复杂页面(包含volist)中实现volist标签显示Jquery查询结果的返回.本文主要和大家介绍thinkphp 中的volist标签在ajax操作中的特殊性(推荐),需要 ...
php 页面显示volist,thinkphp 中的volist标签在ajax操作中的特殊性
背景在一个Thinkphp的复杂页面(包含volist)中实现volist标签显示jquery查询结果的返回知识点使用ajax的目的是不刷新整个页面的前提下实现部分表格数据的刷新,但是注意Thi ...
form标签中的target属性学习
最近工作中涉及到一些前台jsp页面的操作,在窗口显示过程中有一些调整,再次回想起form标签中target属性,记录一下. target 属性规定在何处打开 action URL. form.targ ...
Html中form标签的使用
当需要向服务器提交数据时,我们一般会选择使用form表单来实现数据的提交. <form>标签用来表示一个需要向服务器提交的数据表单,在这个form表单的子标签里,需要实现让用户输入.单选 ...
html自动跳转到action,html中form标签的action属性
html中form标签的action属性发布时间:2020-05-12 11:48:46 来源:亿速云阅读:636 作者:Leah 今天小编就为大家带来一篇html中form标签的action属性 ...

Ajax中的＜form＞标签