HTML进阶 - 4.4 表单练习

最新推荐文章于 2024-09-12 18:22:06 发布

夏赞恩

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量397

点赞数

分类专栏：前端学习文章标签： html css css3

本文链接：https://blog.csdn.net/qq_44714543/article/details/122959305

版权

前端学习专栏收录该内容

49 篇文章 1 订阅

订阅专栏

本文档展示了如何使用HTML和CSS创建一个注册页面。HTML部分包括表单元素如输入框、密码框、选择框和按钮等，CSS部分则定义了页面布局、样式和交互效果，如错误提示、下拉菜单的展开与隐藏、输入验证状态等。

摘要由CSDN通过智能技术生成

使用表单元素制作注册页面

效果图

在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> No longer emotionally affected</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/reg.css">
</head>
<body>
    <div class="form">
        <h2>
            <span>注册</span>
        </h2>   
    </div>

    <div class="form-area">
        <!-- 加上haserror显示禁用样式 -->
        <!-- <div class="form-item haserror"> -->
        <div class="form-item">
            <input type="text" placeholder="搞笑女昵称">
            <div class="error">
                该昵称已被他人使用
            </div>
        </div>

        <div class="form-item">
            <input type="password" placeholder="你的拯救世界的密码(6-16个字符组成，区分大小写)">
            <div class="error">
                密码输入错误
            </div>
        </div>

        <div class="form-item">
            <div class="select clearfix">
                <div class="select-item">
                    <div class="title">
                        中国大陆
                    </div>
                 <ul>
                     <li class="active">love u</li>
                     <li>love u</li>
                     <li>love u</li>
                     <li>love u</li>
                     <li>love u</li>
                     <li>love u</li>
                     <li>love u</li>
                     <li>love u</li>
                     <li>love u</li>
                     <li>love u</li>
                     <li>love u</li>
                     <li>love u</li>
                     <li>love u</li>
                     <li>love u</li>
                 </ul>
                </div>
                <div class="input">
                    <input type="text" placeholder="请输入你要注册的手机号码">
                </div>
            </div>
        </div>

        <div class="form-item">
            <input type="text" placeholder="请输入短信验证码">
            <button type='button' class="btn-sncode">点击获取</button>   
        </div>

        <div class="readme">
            <label for="">
                <input type="checkbox">
                <span class="checkbox"></span>
                <span>我已同意
                    <a href="">《与自己和解》</a>
                    和遵守
                    <a href="">《搞笑女准则》</a>
                </span>
            </label>
        </div>

        <div class="form-item">
            <!-- 加上disabled显示禁用样式 -->
            <!-- <button disabled class='fill' type='button'>注册</button>    -->
            <button class='fill' type='button'>注册</button> 
        </div> 

        <div class="readme txtright">
            <a href="">已有账号，直接登录></a>
        </div>

    </div>

</body>
</html>

CSS代码

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.form{
    width: 1000px;
    margin: 1em auto;
}
.form h2{
    text-align: center;
    font-size: 30px;
    /* 文字溢出高度，还是会显示 */
    height: 16px;
    border-bottom: 1px solid #ddd;
    /* 高度设置为16px,下面的div会挪上来，用margin-bottom控制间距 */
    margin-bottom: 30px;
}
.form h2 span{
    background-color: white;
    padding:0 20px;
}
/* 表单区域 */
.form-area{
    width: 450px;
    /* 居中 */
    margin: 0 auto;
}
.form-area .form-item{
    margin: 30px 0;
    position: relative;
}
.form-area .form-item .select .select-item, .form-area .form-item .select .input{
    float: left;
    height: 50px;
}
.form-area .form-item .select .select-item{
    width: 120px;
    height: 50px;
    line-height: 50px;
    position: relative;
 
}
.form-area .form-item .select .select-item ul{
    max-height: 256px;
    background-color: #fff;
    position: absolute;
    z-index: 1;
    left: 0;
    top:50px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #606266;
    padding: 10px 0;
    font-size: 16px;
    overflow:auto;
    display: none;
}
.form-area .form-item .select .select-item ul li{
    height: 34px;
    padding: 0 20px;
    cursor: pointer;
    line-height: 34px;
}
.form-area .form-item .select .select-item ul li:hover{
    background-color: #f5f5fa;
}
.form-area .form-item .select .select-item ul li.active{
    color: #00a1d6;
    font-weight: bold;
}
.form-area .form-item .select .input{
    width: 330px;
}

.form-area .form-item .select .select-item .title{
    height: 50px;
    line-height: 50px;
    box-sizing: border-box;
    padding: 0 20px;
    color: #ddd;
    border: 1px solid #ddd;
    border-radius: 8px 0px 0px 8px;  
}
.form-area .form-item .select .input input{
    border-radius: 0px 8px 8px 0px;
    /* background-color: red; */
}
.form-area .form-item .btn-sncode{
    width: 130px;
    height: 46px;
    position: absolute;
    top:2px;
    right: 2px;
}
.form-area .form-item .error{
    position: absolute;
    width: 240px;
    right: -268px;
    top: 18px;
    color: red;
    display: none;

}
.form-area .form-item.haserror .error{
    display: block;
}
.form-area .readme{
    margin-top: -25px;
    font-size: 14px;
}
.form-area .readme a{
    color: #00a1d6;
}

.form-area .readme .checkbox{
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-sizing: border-box;
}
.form-area .readme input{
    display: none;
}
.form-area .readme input:checked+.checkbox{
    border-color: #00a1d6;
}
.form-area .readme input:checked+.checkbox::after{
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    background-color: #00a1d6;
    border-radius: 3px;
    margin-top: 2.5px;
    margin-left: 2.8px;
}

/* 统一的文本框样式 */
input[type='text'],input[type='password']{
    border: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    height: 50px;
    text-indent: 1em;
    font-size: 14px;
    color: #606266;
    font-family: "PingFangSC-Medium";
}
input[type='text']:hover, input[type='password']:hover{
    color: #000;
}
input[type='text']::placeholder,input[type='password']::placeholder{
    color: #ccc;
}
input[type='text']:focus, input[type='password']:focus{
    border-color: #00a1d6;
}
/* 统一设置按钮样式 */
button{
    height: 50px;
    width: 450px;
    background-color: #00a1d6;
    color: #fff;
    cursor: pointer;
    border-radius: 8px;
}
button .fill{
    width: 100%;
}
.txtright{
    text-align: right;
}
button:disabled{
    background-color: #f5f5f5;
    color: rgba(0, 0, 0, .25);
    box-sizing: border-box;
    border: 1px solid #d9d9d9;
    cursor: not-allowed;
}