# 表单（form）

### form 简介

form元素表示文档中的一个区域，此区域包含交互控件，用于向web 服务器提交信息

### form 常用属性

- action 处理表单提交的url

  > action 这个属性可以被<button>,<input type="submit">,或者<input type="image">元素上的formaction 属性覆盖

- method

  - 属性值：
    - get
    - post

- target 

  - 属性值：
    - _blank  在新页面中打开
    - _self 在同一页面中打开



### form 常用控件

- ​	input 

  - 属性 

    - type

      - text  单行的文本区域，输入中的换行会被自动清除  （默认值）

      - password 密码框

      - tel 用于输入电话号码的控件，拥有动态键盘的设备（如手机）上会显示电话数字键盘

      - button  没有默认行为的按钮 

        > type =button 时，按钮中的文字是 value 属性的值，默认为空

      - radio 单选框

        > type=radio 时，显示的效果为单选框 属性有： name，value
        >
        > 属于一组的选项的name的值必须要统一 才能实现单选的效果
        >
        > 为了保证给后台的值是不同的，要定义不同的value  value 属性的值指代的是选择后取出的值

      - checkbox  复选框 

        > type=checkbox 时，显示的效果为多选框，属性为name, value
        >
        > 相同name的选项为同一组复选,checked="checked" 表示选中某复选项
        >
        > value也需要定义不同的值

      - hidden 隐藏

      - file  文件上传

        > 包含文件上传功能的表单 需要在form 表单的form 标签中添加 enctype="multipart/form-data" 

- select 下拉框

  - 具体用法：

    ```
    <select name="pets" id="pet-select">
        <option value="">选项的值</option> <!-- value 的值是选中后传到服务器的值 -->
    </select>
    ```

    

    效果如下：

    ![image-20201217171232851](表单.assets/image-20201217171232851.png)

  - 常用属性 （针对select 标签)

    - multiple   能不能同时选中多个
    - size          一次显示多少个选项
    - selected="selected"  默认选中 针对  option

- label   

  - 表示用户界面中某个元素的说明
  - 可以放在任何input 控件元素附近
  - label 是行内样式

- textarea  多行文本框

  - 属性：
    - rows 定义文本框输入行数  即显示的高度
    - cols 定义文本框输入列数  即显示宽度



### form控件的公用属性：

- ​	placeholder 提供可描述输入字段预期值的提示信息
- ​    disabled 禁用
- ​    autofocus 自动聚焦