携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

form表单的基本使用

1. 什么是表单

表单在网页中主要负责进行数据采集功能.HTML中的<form>标签，就是用于采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务端进行处理。

        <form>
            <input type="text" name="email_or_modile" />
            <input type="password" name="password" />
            <input type="checkbox" name="rember_me" checked />
            <button type="submit">提交</button>
        </form>

实现效果如下：

1.2 form表单的组成部分

表单是由三个部分组成的他们分别是：

表单标签<form>标签
表单域
- 采集表单中文本的输入框我们就可以看成是表单域表单域：包含了文本框、密码框、隐藏域、多行文本、复选框、单选框、下拉选择框、文本上传框等。
表单按钮<button>标签

1.3 `<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 _farmename	规定在何处打开actionURL

1. action

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

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

当<form>表单在未指定 action属性值的情况下，action的默认值为当前页面的URL地址。注意：当表单提交后页面会立即跳转到action属性指定的URL地址

2. target

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

它的可选值有5个，默认情况下，target的值是_self，表示在相同的框架中打开action URL。

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

3. method

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

它的可选值有两个，分别是get和post。

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

注意：

get方式适合用来提交少量的、简单的数据。

post方式适合用来提交大量的、复杂的、或包含文件上传的数据。

在实际开发中，

表单的post提交方式用的最多，很少用get。例登录、注册、,添加数据等表单操作，都需要使用post方式来提交表单。

4.enctype

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

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

值	描述
application/x-www-form-urlencoded	默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。
multipart/form-data	不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain	将空格转换为 "+" 符号，但不编码特殊字符。

Form表单