表单的基础知识与理解

表单form
    主要用于用户于web服务器进行交互

  action: URL 用来处理表单信息的服务器地址
    method: 浏览器用来提交表单的http方式，常用的get/post
      get ： 通过这种方式提交的表单数据会被附加在链接上，通过"?"分割 发送敏感内容不建议使用这种方式
      post： 表单数据会存放在请求体，传递给服务器，
    name:   设置表单的名称
    target: _blank _self
    当method为post时，表单内容提交给服务器时的内容类型 enctype
    默认：application/x-www-form-urlencoded
    当表单中有文件内容时
    multipart/form-data

表单元素
    input 用于接受来自用户的数据
      name：    用于设定控件名和提交数据的属性名  ，  结果表现为name 的值=vaule的值，

如tc=sleep.
      value：   用于控件初始化 默认值等功能 （可选）  
      checked： 单选框&复选框 默认选中属性
      disabled：禁用组件 禁用后组件的值也不可提交
      hidden：  隐藏组件 隐藏后的组件值会被提交
      size：    控件的初始宽度，单位是px，但是text和password除外，他俩是指字符的数目
      maxlength：可以输入字符数量的最大值
      min：      number
      max：      number
    select 用于表示列表 或者下拉列表
      multiple 指定控件类型（列表或者下拉列表）

      size      如果multiple生效，size表示同时展示的行数
      name

    optgroup 包含option后形成选项组
      label 指选项组的名称    

    option 用于表示选项 包含在select或optgroup中
      disabled  表示禁用组件，禁用组件的值不能被提交
      value     定义控件的初始值，提交表单时，初始值会被提交
      selected  默认被选中的项
      eg:<option disabled selected value="">请选择</option>

<input type="radio" name="like" id="banana" value="banana"><label for="banana">香蕉🍌</label>

1.laber for的作用 ：for属性规定label与那个表单元素绑定。作用是点击label时，会自动将焦点移动到绑定的元素上。

2.type表示类型

name表示名字，规定了input元素的名称，可以重复。

id表示标识，唯一，

3.对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
注释：value 属性无法与 <input type="file"> 一同使用。

input标签有很多类型，也就是type，以下是一些常用type的说明
text：文本框，input默认的type，不写就是这个，value表示文本框里的值。
password：密码框，value表示密码框里的值。
submit：提交按钮，value表示按钮上的文字
button：普通按钮，value表示按钮上的文字
reset：重置按钮，value表示按钮上的文字
radio：单选框，value表示该单选框的真实值（一般真实值和数据库对应，显示的值给用户参考的）
checkbox：复选框，value表示该复选框的真实值
hindden：隐藏表单域，value表示该表单域的值。

4. multiple 使用时即为列表，没有使用则为下拉列表

<form action="" method="get">

      列表：

      <select name="select" id="select" multiple size="2">

        <option value="value1">value1</option>

        <option value="value2">value2</option>

        <option value="value3">value3</option>

      </select>

      <br>

      下拉列表：

      <select name="select" id="select">

        <option disabled selected value="">请选择</option>

        <option value="value1">value1</option>

        <option value="value2">value2</option>

        <option value="value3">value3</option>

      </select>

      <br />

      下拉列表组：

      <select name="select" id="select">

        <optgroup label="热带水果">

          <option value="banana">香蕉</option>

          <option value="banana">香蕉</option>

          <option value="banana">香蕉</option>

        </optgroup>

        <optgroup label="普通水果">

          <option value="apple">苹果</option>

          <option value="apple">苹果</option>

          <option value="apple">苹果</option>

        </optgroup>

      </select>

      <br>

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

    </form>