【无标题】

最新推荐文章于 2024-09-17 13:42:29 发布

m0_62155359

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量176

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_62155359/article/details/124539315

版权

这是一个简单的HTML登录页面示例，包含用户名和密码输入框，提交和重置按钮。页面使用了内联样式进行布局和美化，背景为淡金色，登录表单为蓝色，并带有阴影效果。此外，页面还包含了防止跨站请求伪造（CSRF）的保护。如果存在用户消息，将通过JavaScript弹窗显示。

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

在这里插入图片描述
<!doctype html>

用户登录

        <div>
            <label for="username">用户名：</label>
            <input id="username" type="text" name="username" placeholder="请输入用户名" required>
        </div>
        <div>
            <label for="password">密码：</label>
            <input id="password" type="password" name="password" placeholder="请输入密码" required>

        </div>
        <div>
            <input type="submit">
            <input type="reset">
        </div>

        @csrf
        </form>
</div>

<style>
body{
    background-color: lightgoldenrodyellow;
}
body *{
    box-sizing: border-box;

}
.login form{
    display: flex;
    flex-direction: column;

    width: 300px;
    background-color: lightblue;
    margin: 50px auto;
    padding:10px 40px;
    box-shadow: 0px 3px 6px #888;
}
.login h2{
    text-align: center;
    color: red;
}
.login *{
    margin-bottom: 10px;
}
form div:last-of-type{
    /*margin-left: 80px;*/
}
form div:last-of-type input{
    margin-left: 40px;
}
.login label{
    display: inline-block;
    width: 50px;
    text-align: right;
}
</style>

@if(!empty($data['message']))
<script>alert("{{$data['message']}}")</script>
@endif
</body>
</html>