表单外界面属性

### 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（当然还有一个原因，将在后面的提到）。

### 5、表单元素标注

- 作用：

  为 input 元素定义标注（标记）
  通过<label> 标签的 for 属性值与相关元素的 id 值相同，绑定表单元素

- 语法：

  ```css
  <label for="id名"></label>
  ```

- 效果描述：

  当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

  ```css
  <label for="usname">用户名</label><input type="text" id="usname">
  ```

### 6、CSS 用户界面属性

#### 6.1 轮廓线

概述：轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

outline简写

- 在一个声明中设置所有的轮廓属性

- 可以设置的属性分别是（按顺序）：
  outline-color， outline-style， outline-width

- 说明：

  - 轮廓样式 outline-style
  - 轮廓颜色 outline-color
  - 轮廓宽度 outline-width
  - 语法：空格隔开

- 取值：参考边框

- 注意：如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

- 实例演示:

  清除与设置 input的轮廓线：

  ```css
  input {
  /* 清除轮廓线 */
  outline: none;  /* 相当于 outline-style:none */
  }
  
  ```

  设置鼠标滑过添加外轮廓：

    ```css
  div{
    float:left;
    width: 200px;
    height: 200px;
    background:#ccc;
    margin:20px;
  }