溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript怎么實(shí)現(xiàn)注冊(cè)登錄頁面

發(fā)布時(shí)間：2022-03-23 14:19:07 來源：億速云 閱讀：631 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“JavaScript怎么實(shí)現(xiàn)注冊(cè)登錄頁面”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

注冊(cè)登錄頁面模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Practice</title>
</head>
<style>
    #register,#login{
        width: 300px;
        height: 400px;
        border: 1px solid grey;
        background-color: dimgrey;
        /*margin: auto;*/
        float: left;
    }
    .long{
        width: 280px;
        height: 30px;
        /*邊框圓角*/
        border-radius: 5px;
        /*隱藏邊框線*/
        border: none;
        margin: 10px;
    }
    .short{
        width: 180px;
        height: 30px;
        border-radius: 5px;
        border: none;
        margin: 10px;
    }
    .bton{
        width: 90px;
        height: 30px;
        border-radius: 5px;
        border: none;
        color: darkmagenta;
        background-color: white;
    }
    .sub{
        width: 280px;
        height: 30px;
        margin: 10px;
        background-color: deepskyblue;
        border-radius: 5px;
        border: none;
        color: white;
    }
    .left_top_font{
        border-bottom: 2px fuchsia solid;
        padding-bottom: 7px;
        font-size: 18px;
    }
    .right_top_font{
        float: right;
        font-size: 18px;
        color: deepskyblue;
    }
    a{
        text-decoration: none;
    }
</style>
<body>

    <!--注冊(cè)-->
    <form action="#" method="post">
        <div id="register">
            <span class="left_top_font">請(qǐng)注冊(cè)</span>
            <a href="#" class="right_top_font">立即登錄&gt;</a>
            <hr>
            <input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" class="long">
            <input type="text" placeholder="請(qǐng)輸入短信驗(yàn)證碼" class="short">
            <input type="button" value="發(fā)送驗(yàn)證碼" class="bton">
            <input type="text" placeholder="請(qǐng)輸入用戶名" class="long">
            <input type="password" placeholder="請(qǐng)輸入密碼" class="long">
            <input type="password" placeholder="請(qǐng)?jiān)俅屋斎朊艽a" class="long">
            <input type="text" placeholder="請(qǐng)輸入圖形驗(yàn)證碼" class="short">
            <input type="button" value="圖形驗(yàn)證碼" class="bton">
            <input type="submit" value="立即注冊(cè)" class="sub">
        </div>
    </form>

    <!--登錄-->
    <form action="#" method="post">
        <div id="login" style="height: 220px;">
            <span class="left_top_font">請(qǐng)登錄</span>
            <a href="#" class="right_top_font">立即注冊(cè)&gt;</a>
            <hr>
            <input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" class="long">
            <input type="password" placeholder="請(qǐng)輸入密碼" class="long">
            <label style="color: aqua;"><input type="checkbox" >七天內(nèi)自動(dòng)登錄</label>
            <a href="#" style="color: ivory;float: right">忘記密碼?</a>
            <input type="submit" value="登錄" class="sub">
        </div>
    </form>

</body>
</html>

“JavaScript怎么實(shí)現(xiàn)注冊(cè)登錄頁面”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手