HTML 表单（）

一、表单标签（form）

        作用：

               用来收集用户输入的内容，将其打包，一并提交给指定的位置（指定的页面地址/后台服务器地址），就可以实现前端页面与服务器之间的交互。

        组成部分：

                        form 元素，表单控件，按钮控件

二、表单控件

        label ：元素用于为单元素添加标签，提高可访问性。

        input ： 元素是最常用的表单元素之一，它可以创建文本输入框（纯文本）、密码框（隐                      藏）、单选框、复选框等。

                属性 ：

                        type 属性定义了输入框的类型

                                取值 ：

                                        text ：纯文本

                                        password ：密码

                                        radio ：单选框

                                        checkbox ：复选框

                                        email ：邮箱

                                         file ：文件

                                        submit ：提交按钮

                                        button ：普通按钮 （点击没有效果，结合JavaScriqt一起使用）

                          id  ： 属性 用于关联 <label> 元素，

                                    name 属性用于标识表单字段

                                        placeholder ：定义描述信息

                                        checked ：单选框或复选框默认被选中

                                        value ：值 （内容）

                                         select ：下拉框

                                                        子标签 ： option 下拉列表中的选项。

三、表单控件

                submit ： 提交按钮

                button ： 普通按钮

四、表单效果图及代码

效果图

表单编码

   <form action="./demo/hua.png" method="">
         <p>
             <label>用 户 名 ：</label>
             <input type="text" placeholder="用户名设置成功后不可修改">
        </p>
         <p>
            <label>确认密码 ：</label>
            <input type="password" placeholder="再次输入登录密码">
        </p>
        <p>
            <label> 性 别 ：</label>
            <!--name 代表这两个 inqut 是同一组的，同名相斥-->
            <input type="radio" name="sex" checked><label>男</label>
            <input type="radio" name="sex"><label>女</label>
        <p>
        <p>
            <label>爱 好 ：</label>
            <input type="checkbox" checked><label>美妆</label>
            <input type="checkbox"><label>运动</label>
            <input type="checkbox"><label>摄影</label>
        </p>
        <p>
            <label>证件类型：</label>
        <select>
            <option value="">中国居民身份证</option>
            <option value="">港澳台居民居住证</option>
            <option value="">港澳台居民居住证</option>
            <option value="">台湾居民来往大陆通行证</option>
            <option value="">护照</option>
            <option value="">外国人永久居留身份证</option>
        </select>
        </p>
         <p>
            <label>邮 箱 ：</label>
            <input type="email" placeholder="请输入邮箱地址">
         </p>
         <p>
            <label>上传图片 ：</label>
            <input type="file">
        </p>  
        <p>
            <label>上传图片 ：</label>
            <input type="file">
        </p> 
        <p>
            <input type="submit" value="登录">
            <input type="button" value="普通按钮">
        </p> 
   </form>