登录注册页面

最新推荐文章于 2024-07-17 17:08:15 发布

呵末颜

最新推荐文章于 2024-07-17 17:08:15 发布

阅读量148

点赞数

文章标签： servlet 前端

本文链接：https://blog.csdn.net/m0_65450756/article/details/127310339

版权

<html>
<head>
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        table{
            border-radius: 20px;
            margin: 140px auto;
            width: 400px;
            alignment: center;
            box-shadow: 7px 7px 17px rgb(52 56 66 / 50%);
            background-color: rgba(75, 81, 95, 0.3);
            align-items: center;
        }
        html{
            background-image: url("file/Desert.jpg");
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            color: white;
        }
        input{
            border-radius: 5px;
            border-style: hidden;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
        }
        .tijiao{
            width: 50px;
            height: 30px;
        }
        select{
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            color: white;
        }
        textarea{
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
        }
    </style>
</head>
<body>
<form action="ServletDemo1" method="get">
    <table>
        <tr align="center"><td style="font-size: 40px" colspan="2">注册</tdsty></tr>
        <tr><td>用户名:</td><td><input type="text" name="username"></td></tr>
        <tr><td>密码:</td><td><input type="password" name="password"></td></tr>
        <tr><td>年龄:</td><td><input type="text" name="age"></td></tr>
        <tr><td>出生日期:</td><td><input type="text" name="birthday">例如:2022-09-07</td></tr>
        <tr><td>性别:</td>
            <td>
                <input type="radio" name="gender" value="男" checked="checked">男
                <input type="radio" name="gender" value="女">女
            </td></tr>
        <tr><td>身份:</td>
            <td>
                <select name="address">
                    <option value="游客">游客</option>
                    <option value="记者">记者</option>
                    <option value="主编">主编</option>
                </select>
            </td>
        </tr>
        <tr><td>备注:</td><td><textarea name="remark" cols="40" rows="10"></textarea></td></tr>
        <tr align="center"><td colspan="2"><input class="tijiao" type="submit" value="提交">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input class="tijiao" type="reset" value="重置"></td></tr>
    </table>
</form>
</body>
</html>

效果图

<html>
<head>
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(file/Desert.jpg) no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
         #loginDiv{
             width: 37%;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 300px;
             background-color: rgba(75, 81, 95, 0.3);
             box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
             border-radius: 5px;
         }
        p {
            margin-top: 30px;
            margin-left: 20px;
            color: azure;
        }

        input {
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }

        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, 0.7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
        #password{
            margin-left: 31px;
        }
        #username{
            margin-left: 15px;
        }
    </style>
</head>
<body>
<%
    Map<String,String> errors = (Map<String, String>) request.getAttribute("errors");
    String infor = (String)request.getAttribute("infor");
%>
<div id="loginDiv">
    <form action="ServletDemo7" method="post" id="form">
        <h1 style="text-align: center;color: aliceblue;">登录</h1>
        <p>用户名:<input name="username" id="username" type="text"><%=errors==null?"":errors.get("username")%><%=infor==null?"":infor%></p>

        <p>密码:<input name="password" id="password" type="password"><%=errors==null?"":errors.get("password")%></p>

        <div style="text-align: center;margin-top: 30px;">
            <input type="submit" class="button" value="登录">
            <input formaction="register.jsp" type="submit" class="button" value="注册">
        </div>
    </form>
</div>
</body>
</html>

效果图