第八天笔记

 html表单

### 1、概述

表单的作用：用于搜集不同类型的用户输入。

表单的组成：表单元素（控件）、表单区域。

生活中的表单：


网页中的表单：


### 2、表单区域

#### 2.1 form标签

- 语法：

  ```css

  <form></form>

  ```

- 作用：

  定义 HTML 表单域，是一个包含表单元素的区域。实现用户信息的收集和传递。举例说明：比如最为常见的交互操作，注册会员、跟帖留言或者文章发布等

- 注意：

  form表单实现上述操作是最为常见方式之一，也可以使用其他方式，比如ajax等

### 3、表单元素

表单元素是允许用户在表单中输入内容的标签，比如：文本域、下拉列表、单选框、复选框等。

#### 3.1 input标签

- 概述：`<input> `标签是最重要的表单元素。type属性取值不同，可以展示出不同的表单形式。

- 作用：用来定义不同种类的输入控件

- 语法：

  ```css

  <input type="类型">

  ```

- 常用类型

  - type="text"

    - 作用：用于文本输入的单行输入字段

    ```css

      <input type="text" >

    ```

    - 显示效果如下：

      

  - type="password"

    - 作用：定义密码字段

    ```css

    <input type="password" value="密码">

    ```

    - 注意：密码字段字符不会明文显示会显示为星号或实心圆

    - 显示效果如下：

      

  - type="radio"

    - 作用：定义单选按钮，允许用户在有限数量的选项中选择其中之一（需要指定单选按钮组）

    ```css

      <input type="radio">

    ```

    - 显示效果如下：

      ​                                    

  - type="checkbox"

    - 作用：定义复选框，允许用户在有限数量的选项中选择零个或多个选项

      ```css

      <input type="checkbox">

      ```

     

    - 显示效果：

  

  - type="button"

    - 作用：定义普通按钮

      ```css

         <input type="button" value="按钮">

      ```

    - 提示：value属性定义按钮显示的文本

    - 显示效果

  

  - type="submit"

    - 作用：定义用于向表单处理程序提交表单的按钮

    - 注意：省略了提交按钮的 value 属性，该按钮将显示默认文本”提交”（不同浏览器表现不同）

      ```css

       <input type="submit" value="提交按钮">

      ```

     

    - 显示效果

   

    - 

  - type="reset"

    - 作用：定义重置按钮，将表单元素的value属性值重置为它最初的默认状态

    - 注意：省略了提交按钮的 value 属性，该按钮将显示默认文本”重置”（不同浏览器表现不同）

      ```css

       <input type="reset" value="重置">

      ```

    - 显示效果

      

  - type="image"

    - 作用：定义图像形式的提交按钮

    - 属性

      - src=""：指定图片地址

      - alt=""：指定替换文本

      - 提示：src 属性和alt 属性必须与 <input type="image"> 结合使用

        ```css

          <input type="image" src="button.png" alt="开始游戏">

        ```

      - 显示效果：

        

  - type="file"

    - 作用：用于文件上传

    ```css

    <input type="file">

    ```

    - 显示效果

      

#### 3.2 textarea标签

- 作用：

  定义多行输入字段（文本域）

- 语法：

  ```css

  <textarea>初始值</texarea>

  ```

- 注意：不能够使用value属性规定它的初始值，初始值在开始和结束标签之间设置

  ```css

   <textarea name="" id="" cols="30" rows="10">我是一个文本框</textarea>

  ```

- 显示效果：

  

 

#### 3.3 select标签

- 概述：

  select标签用于定义下拉列表，下拉列表种通过option标签定义选项

- 语法：

  ```css

  <select name="" id="">

      <option value="">北京</option>

      <option value="">上海</option>

      <option value="">天津</option>

  </select>

  ```

- 显示效果：

  

### 4、form的属性

#### 4.1 action属性

```css

action="数据提交地址.php,.net"

```

- 作用：

  表单的动作属性，定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

  可以是绝对路径或相对路径也可以是接收数数据的email邮箱地址。

- 注意：

  如果省略 action 属性，则 action 会被设置为当前页面。

#### 4.2 target属性

- 作用：

  设置目标地址的打开方式

- 取值：

  - `_self`当前窗口(默认值)

  - `_blank`新窗口

#### 4.3 method属性

- 作用：

  规定发送表单数据的 HTTP 方法

- 取值：

  - GET/POST

    >  get 方法：将表单中数据的按照 variable=value 的形式，添加到 action 所指向的【 URL 后面，并且两者使用“?”连接】，而各个变量之间使用“&”连接。

    >

    >  

    >

    >  post方法：将表单中的【数据放在 form 的数据体】中，按照变量和值相对应的方式，传递到 action 所指向 URL。

   

  **get 和 post 区别（了解）：**

  简单阐述，当前阶段不作为重点

- 用途：

  get 从指定的资源请求数据，是用来从服务器上【获得数据】，而 POST向指定的资源提交要被处理的数据，是用来向服务器【上传递数据】

- 安全性：

  get 是【不安全的】，因为规定发送表单数据的HTTP方法一些系统内部消息将会一同显示在用户面前。post 的所有操作对用户来说都是【不可见的】

- 数据量：

  【get传输的数据量小】，这主要是因为受 URL 长度限制；而 post 可以传输大量的数据，所以上传文件只能使用 post（当然还有一个原因，将在后面的提到）。