简介
表单在网页中主要负责 数据采集功能 。HTML中的<form>
标签,就是用于采集用户输入的信息,并通过<form>
标签的提交操作,把采集到的信息提交到服务器端进行处理。
表单基本组成结构
- 表单标签
- 表单域
- 表单按钮
<!-- 1 -->
<form>
<!-- 2 -->
<input type="text" name="email_or_mobile" />
<input type="password" name="password" />
<input type="checkbox" name="remember_me" checked />
<!-- 3 -->
<button type="submit">提交</button>
</form>
表单标签属性介绍
<form>
标签的属性则是用来规定 如何把采集到的数据发送到服务器。
-
action
action 属性用来规定当提交表单时,向何处发送表单数据。
action 属性的值应该是后端提供的一个 URL 地址,这个 URL 地址专门负责接收表单提交过来的数据。
当<form>
表单在未指定 action 属性值的情况下,action 的默认值为当前页面的 URL 地址。
❕注意:当提交表单后,页面会立即跳转到 action 属性指定的 URL 地址 -
target
target 属性用来规定 在何处打开 action URL。
它的可选值有5个,默认情况下,target 的值是_self
,表示在相同的框架中打开 action URL。 -
method
method 属性用来规定 以何种方式 把表单数据提交到 action URL。
它的可选值有两个,分别是 get 和 post。
默认情况下,method 的值为 get,表示通过URL地址的形式,把表单数据提交到 action URL。在实际开发中,
<form>
表单的 post 提交方式用的最多,很少用 get。例如登录、注册、添加数据等表单 >操作,都需要使用post
方式来提交表单。 -
enctype
enctype 属性用来规定在 发送表单数据之前如何对数据进行编码。
它的可选值有三个,默认情况下,enctype 的值为application/x-www-form-urlencoded
,表示在发送前编码所有的字符。❕注意:
在涉及到文件上传的操作时,必须将 enctype 的值设置为multipart/form-data
表单的同步提交及缺点
1. 表单的同步提交
通过点击 submit 按钮,触发表单提交的操作,从而使页面跳转到 action URL 的行为,叫做表单的同步提交。
2. 表单同步提交的缺点
-
<form>
表单同步提交后,整个页面会发生跳转,跳转到 action URL 所指向的地址,用户体验很差。 -
<form>
表单同步提交后,页面之前的状态和数据会丢失。
解决方案:表单只负责采集数据,Ajax 负责将数据提交到服务器