html学习笔记整理----HTML表单及表单控件

表单
    1.用于接收用户数据并且提交给服务器
        表单二要素
            1.from 表单元素
                作用：收集用户信息并发送给服务器
            2.表单控件
                作用：提供了能够跟用户交互的可视化组件
    2.from 元素
        1.注意 ：from元素是不可见的，见到的都是表单，却不能省略，因为数据提交功能要由from元素完成
        2.语法：
            <from>
                表单控件
            </from>
        3.from 标签属性
            1.action ：指定数据提交的目的地址
            2.method ：数据请求方式 get / post
                        默认为get方式提交
                        1.get请求（默认值）：通常用于向服务器端获取数据
                            特点：1.提交的数据会以参数的形式拼接在URL的后面
                                  2.安全性较低
                                  3.提交数据最大为2KB
                        2.post请求 ：将数据提交给服务器处理
                            特点：1.隐式提交，看不到提交数据
                                  2.安全性较高
                                  3.post请求没有数据限制
        4.表单控件
            1.作用：提供与用户交互td的可视化组件
              注意：只有放在表单元素中的表单控件才允许被提交
            2.分类
                1.文本框和密码框
                    语法：
                        文本框 <input type="text">
                        密码框 <input type="password">
                    属性：
                        1.name属性 ： 定义当前控件的名称，缺少的话无法提交
                        2.value属性 ：要提交给服务器的值，同时也是默认显示在控件上的值
                        3.maxlength属性 ：用来限制用户输入的最大字符数
                        4.placeholder属性 ：用户输入前显示在框中的提示文本
                2.单选框和复选框
                    单选按钮  <input type="radio">
                    复选框    <input type="checbox">
                    属性 ：
                        1.name 属性 ：定义控件名称，还起到分组的作用，一组中的按钮名称必须保持一致
                        2.value属性 ：设置当前控件的值，最终提交给服务器
                        3.checked 属性 ：设置预选中状态可以省略属性值也可以使用"checked"作为值
                3.隐藏域和文件选择框
                    1.隐藏域
                        作用：需要提交给服务器但是却不需要呈现给用户的数据，都可以放在隐藏域中
                        语法 ：<input type="hidden">
                        属性 ：
                            1.name 控件名称
                            2.value 控件的值
                    2.文件选择框
                        作用 ：选择文件上传，发送给服务端
                        语法 ：<input type="file">
                        属性 ：name 定义控件名称
                4.下拉选择框
                    语法示例：
                    <select name="province">
                        <option value="hebei">河北省</option>
                        <option value="shanxi">陕西省</option>
                    </select>
                    假设用户选择河北省，在使用get方式提交数据时，URL后拼接的数据应为
                5.文本域
                    支持用户输入多行文本
                    语法：
                        <textarea></textarea>
                    属性 ：
                        1.name 控件名称
                        2.cols 指定文本域默认显示的列数一行中能显示的英文字符量，中文减半
                        3.rows 指定文本域能够显示的行数
                    注意：文本域可以由用户调整大小
                6.按钮
                    1.提交按钮
                        <input type="submit">
                        作用：将表单数据发送给服务器
                        value属性重新设置按钮名字
                    2.重置按钮
                        <input type="reset">
                        作用：重置表单，将表单内容回复到初始化状态
                        value属性重新设置按钮名字
                    3.普通按钮
                        <input type="button" value="点击">
                        作用：可以绑定自定义事件
                        按钮中的value属性值实际上是定义按钮的显示文本
                    4.<button>按钮显示文本</button>
                        注意：
                            1.按钮标签可以在任何地方使用，不局限在form表单中使用
                            2.按钮标签使用在form中，默认具有提交功能，等同于input submit
                            3.可以添加属性type取值subnit / reset / button进行分区（非必填）
                            4.在表单外作为普通按钮使用时，需要通过JS，动态绑定
                7.特殊用法
                    lable for ID
                    使点文本和点按钮达到相同效果
                    语法示例：（id必须相同）
                        <label for="male">男</label>
                        <input type="radio" name="gender" value="male" id="male">
                    使用lable标签包裹表单控件要显示的文本信息，为lable标签添加for属性，属性值与所要绑定的表单控件的ID属性值保持一致，实现文本与控件的绑定