第十节 表单

<!-- 表单用于搜集不同类型的用户输入，表单由不同类型的标组成，相关标签及属性用法如下：
        1、<form>标签：定义整体的表单区域
            action属性：定义表单数据提交地址，为空默认提交在本地即get接受方式，不安全，即当前网址会生成提交信息的后缀
            method属性：定义表单提交的方式，一般有get(少量不敏感)和post（大量或者少量敏感）方式
        2、<lable> 标签：为表单元素定义文字标注
        3、<input> 标签：定义通用的表单元素
            type属性：
                text：文本
                password：密码
                radio：单选框
                CheckBox：多选框
                file：上传文件
                submit：表单提交按钮
                reset：重置按钮
                image：定义图片作为提交按钮，用src属性定义图片地址
                hidden：定义一个隐藏的表单域，用来存储值

        4、textarea：多行文本输入框
        5、select：下拉表单控件，里面嵌套option标签配合使用-->
    <form action="" method="post"> 
        <!-- action=""默认提交到本地  method=""默认get  -->
        <div>
            <label for="username">用户名：</label>
            <!-- 原先输入需要点输入框，现在点击用户名三个字就可以激活输入框，通过for属性和ID属性，即通过点击标签激活输入框 -->
            <input type="text" name="username" id="username"/>
            <!-- name属性里提交的相当于字典中的键，用于存储数据，有这个提交按钮才能生效  -->
        </div>
        <br />

        <div>
            <label>密&nbsp;&nbsp;&nbsp;码：</label>
            <input type="password" name="password" />
        </div>
        <br />

        <div>
            <label>性&nbsp;&nbsp;&nbsp;别：</label>
            <input type="radio" name="gender" value="0" id="male"> <label for="male">男</label>
            <input type="radio" name="gender" value="1"> 女
        </div>
        <br />

        <div>
            <label>爱&nbsp;&nbsp;&nbsp;好：</label>
            <input type="checkbox" name="" value="study"> 学习
            <input type="checkbox" name="" value="python"> python
            <input type="checkbox" name="" value="frontend"> 前端
            <input type="checkbox" name="" value="beauty"> 美女
        </div>
        <br />

        <div>
            <label>文&nbsp;&nbsp;&nbsp;件：</label>
            <input type="file" name="">
        </div>
        <br />

        <div>
            <label>个人介绍：</label>
            <textarea name="introduce" ></textarea>
        </div>
        <br />

        <div>
            <label>籍&nbsp;&nbsp;&nbsp;贯：</label>
            <select name="site">
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">浙江</option>
                <option value="3">福建</option>
                <option value="4">西藏</option>
                <option value="5">江西</option>
                <option value="6">广东</option>
            </select>
        </div>
        <br /> 

        <div>
            <input type="submit" name="" value="提交" />
            <!-- <input type="image" src= "图片1.png" name=""> -->
            <!-- 图片提交会导致提交两次，不建议使用 -->
            <input type="reset" name="" value="重置" />

            <input type="hidden" name="hid01" value="3">
            <!-- 在页面上不显示，但是点提交的时候会同页面上的数据一起提交到数据库 -->
        </div>
    </form>