色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何在驗(yàn)證html表單后打開(kāi)新頁(yè)面？

CSS

我有一個(gè)大學(xué)項(xiàng)目，創(chuàng)建一個(gè)在線車隊(duì)管理系統(tǒng)。我只是創(chuàng)建了一個(gè)登錄表單，并硬編碼了正確的憑證(按照要求這么做)。現(xiàn)在，我希望登錄頁(yè)面在驗(yàn)證了正確的憑證后打開(kāi)我的下一個(gè)頁(yè)面，但我不知道如何做到這一點(diǎn)...代碼附后。

html登錄頁(yè)面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fleet Management</title>
    <link rel="stylesheet" href="style.css">
    <script>
        function authenticate()
        {
            var authorised;
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;

            if(username == "Myuser" && password == "SA1@123")
            {
                authorised = true;
                window.location("main.html")
            }
            else
            {
                authorised = false;
                alert("Incorrect credentials, Please try again");
            }
            return authorised;
        }
    </script>
</head>
<body>
    <div class="box">
        <div class="container">
            <h2>Log In</h2>
            <form name="logInForm" onsubmit="return authenticate()">            
                <div class="inputBox">
                    <input id="username" type="text" name="uName" required="required">
                    <span>Username</span>
                    <i></i>
                </div>
                <div class="inputBox">
                    <input id="password" type="password" name="pWord" required="required">
                    <span>Password</span>
                    <i></i>
                </div>
                <input type="submit" value="Log In">
            </form>
        </div>
    </div>
</body>
</html>

成功登錄后我想打開(kāi)的html頁(yè)面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fleet Management</title>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <p>test</p>
</body>
</html>

css:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #23242a;
}
.box
{
    position: relative;
    width: 380px;
    height: 420px;
    background: #1c1c1c;
    border-radius: 8px;
    overflow: hidden;
}
.box::before
{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 420px;
    background: linear-gradient(0deg,transparent,#45f3ff,#45f3ff);
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
}
.box::after
{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
    height: 420px;
    background: linear-gradient(0deg,transparent,#45f3ff,#45f3ff);
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
    animation-delay: -3s;
}
@keyframes animate
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}
.container
{
    position: absolute;
    inset: 2px;
    border-radius: 8px;
    background: #28292d;
    z-index: 10;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
}
.container h2
{
    color: #45f3ff;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.1em;
}
.inputBox
{
    position: relative;
    width: 300px;
    margin-top: 35px;
}
.inputBox input
{
    position: relative;
    width: 100%;
    padding: 20px 10px 10px;
    background: transparent;
    border: none;
    outline: none;
    color: #23242a;
    font-size: 1em;
    letter-spacing: 0.05em;
    z-index: 10;
}
.inputBox span
{
    position: absolute;
    left: 0;
    padding: 20px 0px 10px;
    font-size: 1em;
    color: #8f8f8f;
    pointer-events: none;
    letter-spacing: 0.05em;
    transition: 0.5s;
}
.inputBox input:valid ~ span,
.inputBox input:focus ~ span
{
    color: #45f3ff;
    transform: translateX(0px) translateY(-34px);
    font-size: 0.75em;
}
.inputBox i
{
 position: absolute;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 2px;
 background: #45f3ff;  
 border-radius: 4px;
 transition: 0.5s;
 pointer-events: none; 
 z-index: 9;
}
.inputBox input:valid ~ i,
.inputBox input:focus ~ i
{
   height: 44px; 
}
input[type="submit"]
{
    border: none;
    outline: none;
    background: #45f3ff;
    padding: 11px 25px;
    width: 100px;
    margin-top: 10px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
}
input[type="submit"]:active
{
    opacity: 0.8;
}

我嘗試了很多我在網(wǎng)上看到的東西(多到無(wú)法打字)。我就是找不到一個(gè)適合我的代碼的。我還是個(gè)初學(xué)者，請(qǐng)多包涵！

使用以下命令阻止默認(rèn)功能:& lt表單名稱= & quotlogInForm & quotonsubmit = & quotevent . prevent default()；返回authenticate()& quot；& gt

其次，使用window . location . replace(& quot；")反而。

最終代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fleet Management</title>
    <link rel="stylesheet" href="style.css">
    <script>
        function authenticate()
        {
            var authorised;
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;

            if(username == "Myuser" && password == "SA1@123")
            {
                authorised = true;
                window.location.replace("https://www.google.com");
            }
            else
            {
                authorised = false;
                alert("Incorrect credentials, Please try again");
            }
            return authorised;
        }
    </script>
</head>
<body>
    <div class="box">
        <div class="container">
            <h2>Log In</h2>
            <form name="logInForm" onsubmit="event.preventDefault(); return authenticate()">            
                <div class="inputBox">
                    <input id="username" type="text" name="uName" required="required">
                    <span>Username</span>
                    <i></i>
                </div>
                <div class="inputBox">
                    <input id="password" type="password" name="pWord" required="required">
                    <span>Password</span>
                    <i></i>
                </div>
                <input type="submit" value="Log In">
            </form>
        </div>
    </div>
</body>
</html>