【面向HTML--表单】

1、表单作用

用于显示、收集信息，并提交信息到服务器
完整的表单是由两部分组成：
    1、可以和用户交互的表单控件
    2、表单元素

2、表单元素

1、作用
    收集信息，并且提交给服务器
2、语法
    <form></form>
3、属性
    1、action
        定义表单被提交时发生的动作，即提交给服务器处理程序的地址(url)
        默认提交给本页
    2、method
        定义表单数据的提交方式
        取值
        1、get
            1、明文提交，即所提交的数据是可以显示在地址栏上的
            2、安全性较低
            3、有长度限制,最大为2KB
            4、场合：向服务器要数据时使用get
        2、post
            1、隐式提交，所提交的数据是不显示在网页的任何位置处
            2、安全性较高
            3、没有长度限制
            4、场合：
                1、数据提交给服务器进行处理时使用post
                2、安全性较高的地方，必须用post
        3、put
        4、delete
        5、... ...
    3、enctype
        作用：指定表单数据的编码方式(指定将什么样的数据提交给服务器)
        取值：
            1、application/x-www-form-urlencoded
                默认值，允许将普通字符以及特殊字符 提交给服务器
            2、multipart/form-data
                允许将 上传的文件 提交给服务器
                场合：上传文件时使用
            3、text/plain
                只允许将普通数据提交给服务器，特殊字符不行
    4、name
        定义表单的名称

get和post的区别：
1.get请求地址栏会携带提交的数据（包括密码），post不会携带
2.get请求安全级别较低，post较高
3.get请求有数据大小长度的限制，post没有限制
4.向服务器索要信息时，需要用get,上传文件用post

3、表单控件

作用：接收用户输入的数据，并且通过表单将其提交给服务器
表单控件：
    1、input元素
    2、textarea - 多行文本域
    3、select 和 option -选择框(下拉，滚动)
    4、其它元素

表单控件详解

1、input元素

1、语法
    1、标记
        <input>
    2、主要属性
        1、type
            页面会根据不同的type值，来创建各种不同的输入控件
        2、name
            标识控件的名称，提交给服务器使用。
        3、value
            当前控件的值，提交给服务器的数据
        4、disabled
            禁用控件,用户不能操作，并且也不能提交给服务器
            注意：该属性无值，只作为标识
            <input disabled>
        5.placeholder
            提供字段为空时显示的内容，字段获得焦点时消失。

2、文本框 与 密码框
    文本框:<input type="text">
    密码框:<input type="password">

    属性：
        1、maxlength
            最大长度
        2、readonly
            只读，不允许修改,允许被提交
            无值属性，只做标识
            <input type="text" readonly>
        3、name
            表示控件名称，采用的是"匈牙利命名法",由控件缩写+控件作用 组成
            文本框与密码框缩写：txt
            ex:
                1、表示用户姓名的文本框
                    name="txtName"
                2、表示用户年龄的文本框
                    name="txtAge"
                3、表示用户密码的密码框
                    name="txtPassword"
                    name="txtPwd"

3、单选按钮 与 复选框                    
    单选按钮：<input type="radio">
    复选框：<input type="checkbox">
    属性：
        1、name
            一组的单选按钮 或 一组的复选框 name 属性值要一致
        2、value
            必给
        3、checked
            设置默认被选中

4、按钮
    作用：代替用户执行一组动作
    1、提交按钮
        type="submit"
        作用：将表单的控件数据提交给服务器
    2、重置按钮
        type="reset"
        作用：将表单控件的值恢复到初始化状态
    3、普通按钮
        type="button"
        作用：可自定义功能(Javascript)
    属性：
        1、name ：名称,缩写：btn
        2、value ：按钮上的文本

5、隐藏域 与 文件选择框
    1、隐藏域：type="hidden"
        作用：要提交给服务器但是不想给用户去看的数据，可以放在隐藏域中
        缩写：txt
    2、文件选择框
        作用：上传文件时使用
        type="file"
        属性：
            name ：控件的名称
        注意：
            1、表单的 method 属性必须为 post
            2、表单的 enctype 属性必须为 multipart/form-data

2、textarea

1、作用
    允许用户输入多行数据
2、语法
    <textarea></textarea>
3、属性
    1、name
        控件的名称，缩写为 txt
    2、readonly
        只读
    3、cols
        指定文本域的列数
        变相设置元素的宽度
    4、rows
        指定文本域的行数
        变相设置元素的高度

3、select 和 option

1、选择框
    <select></select>
    属性：
        1、name
            名称，缩写 sel
        2、size
            默认显示的选项数量
            如果大于1的话，则为 滚动列表
        3、multiple
            设置多选
2、选项
    <option>显示的数据</option>
    属性：
        1、value
            当前选项的值
        2、selected
            预选中，无值

4、其它元素

1、为控件分组
    1、作用
        将一些控件放在一起，并提供一个组名
    2、语法
        <fieldset></fieldset>-为控件分组
        <legend></legend>-为分组指定标题
2、关联文本与表单控件元素
    语法：
        <label>关联的文本</label>
    属性：
        for:与该文本关联的控件的ID值