HTML基础form表单元素

表单元素

• 它是一系列元素
• 表单对于用户而言是数据的录入和提交的界面；
• 表单对于网站而言是获取用户信息的途径。

表单基本结构

    <form action="">
        <input type="text">
        <input type="radio">
        <input type="checkbox">
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <select name="" id="">
            <option value="">

            </option>
        </select>
        <button></button>
    </form>

- input元素

    > 普通文本输入框

    1. name： 规定 input 元素的名称，用于对提交到服务器后的表单数据进行标识。（也就是通知服务器是哪个表单项传递来的数据）要保证数据的准确性，必须定义一个独一无二的名称。
    2. placeholder: 提供可描述输入字段预期值的提示信息,该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
    3. type: 定义input元素的内容

        > type="text" 主要用于输入单行文本内容
        
        > type="password" 主要用于输入一些保密信息

        > type="image" 创建一个图像控件

        > type="radio" 主要是让网页浏览者在一组选项里选择一个。name属性定义单选框的名称，单选框都是以组为单位使用的，在同一组中的选项必须使用同一名称。配合checked属性 表示被选中状态，checked为布尔属性

       - label元素

           > 主要是配合单选和多选框使用

           ```
               <input type="radio" name="sex" id="man" checked>
               <label for="man">男</label>
               
               <input type="radio" name="sex" id="woman">        
               <label for="woman">女</label>

        > type="checkbox" 复选框主要是让网页浏览者在一组选项里同时选择多个选项。配合checked属性 表示被选中状态，checked为布尔属性

        > type="file" 文件域主要是让网页浏览者上传文件。

        > type="button" 创建一个普通按钮。value属性定义按钮的显示文字。

        > type="submit" 提交按钮用来将输入的信息提交到服务器。value属性定义按钮的显示文字。

        > type="reset" 重置按钮用来重置表单中输入的信息。value属性定义按钮的显示文字。

        > H5新增input类型
    
        - search 搜索框
        - color 颜色选择器
        - number （disabled，max，min，maxlength，required必填，size，step步长，value，readonly）数字输入框
        - date（max，min） 日期选择框 (年月日)
        - range（max，min，step） 滑块
        - month  月份选择框
        - week 星期选择框
        - time 时间选择框
        - datetime-local 日期时间选择框 (年月日时分)
        - email 邮箱地址
        - tel 手机号
        - url 网络地址

    4. value：对于不同的输入类型，value 属性的用法也不同
   
          - type="button", "reset", "submit" - 定义按钮上的显示的文本
          - type="text", "password"- 定义输入字段的初始值
          - type="checkbox", "radio", "image" - 定义与输入相关联的值

    > 行级元素

- select元素

    > 下拉列表选择框

    > 通常和option配合使用

    ```
        <select multiple>
            <option selected>选项1</option>
            <option>选项2</option>
            ...
        </select>
    ```
    - option属性
        > selected: 表示默认被选中，布尔属性
        > multiple: 表示默认多选，布尔属性

    > optgroup 实现分组

    ```
        <select>
            <optgroup label="游戏">
                <option>英雄联盟</option>
                <option>穿越火线</option>
            </optgroup>
        </select
    ```

    > 行级元素

- textarea元素

    > 文本域、多行文本框

    ```
        <textarea  rows="行数"  cols="列数">初始值（可有可无）</textarea>
    ```

    > cols（columns）属性：定义文本域的宽度

    > rows属性：定义文本域的高度

    > 行级元素

    > 不存在空白折叠

- button元素

    > 按钮

    ```
        <button type="">按钮文字</button>
    ```

    > type属性：reset、submit（默认）、button

    > 可以嵌套其他元素，制作图片按钮

## 表单结构类标签 fieldset,legend,form

- form

    > 用来包含整个表单元素
    > 当提交表单时，能够把form元素内部的表单元素以合适的方式提交到服务器。

    1. action

        - 数据传送的地址,一般是后端的接口路径
        - `<form action="1.asp">...</form>`
        - 当用户单击确认按钮时，表单的内容会被传送到1.asp

    2. method

        - 数据的传送方式
        - get（默认，少量数据）、post（大量数据）
        - 浏览器对url长度限制，每种浏览器对长度限制不同

    3. name

        - 表单名称
  
    4. target

        - 规定在何处打开 action设置的URL
        - target="_self"表示打开窗口位置为当前窗口,默认值
        - target="_blank"在新窗口中打开

- fieldset、legend

    > 可将表单元素分组
    > legend元素为fieldset元素定义的分组设置标题

    ```
        <form>
          <fieldset>
            <legend>health information</legend>
            height: <input type="text" />
            weight: <input type="text" />
          </fieldset>
        </form>
    ```

## 表单状态

- readonly：是否只读，布尔属性，不会改变表单显示样式，readonly设置的表单元素的value值可以随表单提交到服务器
- disabled：是否禁用，布尔属性，会改变表单样式，disabled设置的表单元素的value值不可以随表单提交到服务器



       </fieldset>
        </form>
    ```

## 表单状态

- readonly：是否只读，布尔属性，不会改变表单显示样式，readonly设置的表单元素的value值可以随表单提交到服务器
- disabled：是否禁用，布尔属性，会改变表单样式，disabled设置的表单元素的value值不可以随表单提交到服务器