HTML&CSS form表单注册页面

约定不等于承诺〃 2022-05-13 08:52 247阅读 0赞

# 1、HTML的表单标签 form表单 CSS样式 #

## HTML标签：表单标签 ##

1、form表单的基础介绍
        A.格式
            <form action="http://www.baidu.com" method="get"> ... </form>
        B.属性
            a. action存放的是URL 网址.（把表单项"输入框"当中的数据,提交到网址对应的服务器上）
            b. method 设置请求的方式 get请求和post请求
                get特点:  在地址栏有参数信息,数据量小,不安全
                post特点: 在地址栏没有参数信息,数据量大,安全
        C.注意
            如果要提交数据到地址栏,必须设置 【name】属性
    2、input标签
        A.type属性   根据type属性的取值不同,表单项当中的类型就不一样
            a. text 用户名的输入框
            b. password 密码的输入框
            c. radio 性别的单选按钮
            d. checkbox 爱好的多选按钮
            e. submit 提交按钮
            f. button 普通按钮 和后期JavaScript 组合使用
            g. image 图片按钮
            h. file 上传的文件选择框
            i. hidden 隐藏域.看不到UI界面,但是存在.
            j. date 选择日历的
            k.datetime 
            l.datetime-local 
            m.email 
        B.name属性
            a. 提交地址栏上面的name.给服务器进行识别的标志
            b. 对于单选按钮radio而言,设置相同的name属性,表示在同一组当中
            c. 对于多选按钮checkbox而言,设置相同的name属性,表示在同一组当中
        C.value属性
            给我们那些不能让用户输入的 表单项,设置的值
        D.id属性
            a.可以给后面的CSS设置样式的识别器
            b.可以给后面的JS设置识别具体是哪一个标签需要加特效.
        E.placeholder属性
            增强用户体验,给出默认提示信息的.
    3、select 下拉列表
        A.格式
            <select>
                <option value="China"> 中国 </option>
                <option value="USA"> 美国 </option>
                <option value="England"> 英国 </option>
            </select>
    4、textare 文本域
        A.格式 (例如:自我介绍)
            <textarea cols="20" rows="5"></textarea>

## CSS：页面美化和布局控制 ##

1、CSS引入的三种方式
        A.内联样式
            a.作用域:在当前的标签上面
            b.格式:
                <font style="font-size: 88px;color: #FF9900"> 你是真的不错！心有多大,字有多大 </font>
        B.内部样式
            a.作用域:在当前的HTML页面上面
            b.格式:
                <head>
                    <meta charset="UTF-8">
                    <title>CSS入门</title>
    
                    <style type="text/css">
                        font{
                            font-size: 66px;
                            color: #0000FF
                        }
                    </style>
                </head>
                <body>
                    <font style="font-size: 88px;color: #FF9900"> 你是真的不错！心有多大,字有多大 </font>
                    <br><br>
                    <font> 牛逼啊 </font>
                    <br><br>
                    <font> 我的哥就是你哥 倪歌(你哥) </font>
                </body>
        C.外部样式
            a.作用域: 只要你引入了外部样式,整个页面都可以使用.(需要在外部新建CSS文件)
            b.格式:
                
                <head>
                    <meta charset="UTF-8">
                    <title>CSS入门</title>
    
                    <link rel="stylesheet" href="css/a.css">
                </head>
                <body>
                    <font> 牛逼啊 </font>
                    <br><br>
                    <font> 我的哥就是你哥 倪歌(你哥) </font>
                </body>
                 
                font{
                    font-size: 44px;
                    color: #FF0000
                }   
    
            1. 基础选择器
                1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
                    * 语法：#id属性值{}
                2. 元素选择器：选择具有相同标签名称的元素
                    * 语法： 标签名称{}
                    * 注意：id选择器优先级高于元素选择器
                3. 类选择器：选择具有相同的class属性值的元素。
                    * 语法：.class属性值{}
                    * 注意：类选择器选择器优先级高于元素选择器
            2. 扩展选择器：
                1. 选择所有元素：
                    * 语法： *{}
                2. 并集选择器：
                    * 选择器1,选择器2{}
    
                3. 子选择器：筛选选择器1元素下的选择器2元素
                    * 语法：  选择器1 选择器2{}
                4. 父选择器：筛选选择器2的父元素选择器1
                    * 语法：  选择器1 > 选择器2{}
    
                5. 属性选择器：选择元素名称，属性名=属性值的元素
                    * 语法：  元素名称[属性名="属性值"]{}
    
                6. 伪类选择器：选择一些元素具有的状态
                    * 语法： 元素:状态{}
                    * 如： <a>
                        * 状态：
                            * link：初始化的状态
                            * visited：被访问过的状态
                            * active：正在访问状态
                            * hover：鼠标悬浮状态
     属性
        1. 字体、文本
            * font-size：字体大小
            * color：文本颜色
            * text-align：对其方式
            * line-height：行高 
        2. 背景
            * background：
        3. 边框
            * border：设置边框，符合属性
        4. 尺寸
            * width：宽度
            * height：高度
        5. 盒子模型：控制布局
            * margin：外边距
            * padding：内边距
                * 默认情况下内边距会影响整个盒子的大小
                * box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小
    
            * float：浮动
                * left
                * right

## 案例： ##

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>注册页面</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                box-sizing: border-box;
            }
            body{
                background: url("img/register_bg.png") no-repeat center;
                padding-top: 25px;
            }
    
            .rg_layout{
                width: 900px;
                height: 500px;
                border: 8px solid #EEEEEE;
                background-color: white;
                /*让div水平居中*/
                margin: auto;
            }
    
            .rg_left{
                /*border: 1px solid red;*/
                float: left;
                margin: 15px;
            }
            .rg_left > p:first-child{
                color:#FFD026;
                font-size: 20px;
            }
    
            .rg_left > p:last-child{
                color:#A6A6A6;
                font-size: 20px;
    
            }
    
    
            .rg_center{
                float: left;
               /* border: 1px solid red;*/
    
            }
    
            .rg_right{
                /*border: 1px solid red;*/
                float: right;
                margin: 15px;
            }
    
            .rg_right > p:first-child{
                font-size: 15px;
    
            }
            .rg_right p a {
                color:pink;
            }
    
            .td_left{
                width: 100px;
                text-align: right;
                height: 45px;
            }
            .td_right{
                padding-left: 50px ;
            }
    
            #username,#password,#email,#name,#tel,#birthday,#checkcode{
                width: 251px;
                height: 32px;
                border: 1px solid #A6A6A6 ;
                /*设置边框圆角*/
                border-radius: 5px;
                padding-left: 10px;
            }
            #checkcode{
                width: 110px;
            }
    
            #img_check{
                height: 32px;
                vertical-align: middle;
            }
    
            #btn_sub{
                width: 150px;
                height: 40px;
                background-color: #FFD026;
                border: 1px solid #FFD026 ;
            }
    
        </style>
    
        </head>
        <body>
    
        <div class="rg_layout">
            <div class="rg_left">
                <p>新用户注册</p>
                <p>USER REGISTER</p>
    
            </div>
    
            <div class="rg_center">
                <div class="rg_form">
                    
                    <form action="#" method="post">
                        <table>
                            <tr>
                                <td class="td_left"><label for="username">用户名</label></td>
                                <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="password">密码</label></td>
                                <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="email">Email</label></td>
                                <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="name">姓名</label></td>
                                <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="tel">手机号</label></td>
                                <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label>性别</label></td>
                                <td class="td_right">
                                    <input type="radio" name="gender" value="male"> 男
                                    <input type="radio" name="gender" value="female"> 女
                                </td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="birthday">出生日期</label></td>
                                <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                            </tr>
    
                            <tr>
                                <td class="td_left"><label for="checkcode" >验证码</label></td>
                                <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                                    <img id="img_check" src="img/verify_code.jpg">
                                </td>
                            </tr>
    
    
                            <tr>
                                <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                            </tr>
                        </table>
    
                    </form>
    
    
                </div>
    
            </div>
    
            <div class="rg_right">
                <p>已有账号?<a href="#">立即登录</a></p>
            </div>
    
    
        </div>
    
    
        </body>
        </html>