form的基本使用

form的基本使用

1.什么是表单

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

 

 

 

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

 

 

2.表单的组成部分

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

 

表单由三个基本部分组成：

表单标签

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮

 

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 framename	规定在何处打开 action URL

 

（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地址的形式，把表单数据提交到 ation URL。

注意：

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

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

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