一个简单的网页登陆(html)

今天和大家分享如何用html做一个简易版的登陆网页。一般简单的登陆页面有用户名、密码框以及提交与清空两个按钮，效果图如下所示：1.首先网页制作中应当包含两个部分head以及body;<html><head></head><body></body></html>2.在head中设置标题为“登陆页面”，把左间距与上间距分别设为53

%编程小白%

19246人浏览 · 2021-03-20 22:28:49

%编程小白% · 2021-03-20 22:28:49 发布

今天和大家分享如何用html做一个简易版的登陆网页。
一般简单的登陆页面有用户名、密码框以及提交与清空两个按钮，效果图如下所示：
在这里插入图片描述
1.首先网页制作中应当包含两个部分head以及body;

<html>
	<head>
	</head>
	<body>
	</body>
</html>

2.在head中设置标题为“登陆页面”，把左间距与上间距分别设为535px和20px（也可以点开所制作网页的链接ctr+shift+i键查看源代码，通过尝试设置一个合适的间距），为了让代码简单一点导入了jquery包，设置登陆函数，通过jquery来获取按键信息，逻辑是这样的：首先对用户名和密码进行非空校验，除去空格，判断是否已经输入了用户名，如果没有鼠标自动放在用户名框内，密码同样如此；如果两框内都有相应的“值”，点击提交之后，会弹出登陆成功页面。
在这里插入图片描述

选择清空的话会有提示框出现，防止误点现象发生。
在这里插入图片描述
head内代码如下图所示

<head>
        <meta charset="utf-8">
        <title>登录页面</title>
        <style>
            .innerDiv{
                margin-left: 535px;
                margin-top: 20px;
            }
        </style>
        <script src ="jquery-1.9.1.min.js"></script>
        <script>
            function myck(type){
                var input_username = jQuery("#username");
                var input_pwd = jQuery("#pwd"); 
                if(type == 1){
                    //提交非空校验
                    if(input_username.val().trim() == ""){
                        alert("请先输入用户名");
                        input_username.focus();
                        return false;
                    }
                    if(input_pwd.val().trim()==""){
                        alert("请先输入密码");
                        input_pwd.focus();
                        return false;
                    }
                    alert("登录成功");
                    
                }else if(type == 2){
                  if(confirm("是否清空数据？")){
                      input_username.val("");
                      input_pwd.val("");
                  }
                }
            }

        </script>
    </head>

3.body内分为四大块，登陆文字、用户名输入、密码输入、提交清除，都通过div进行包裹，通过style设置其文字大小与间距。
body代码如下：

<body>
        <div style="margin-top: 100px;margin-left: 600px;"> 
        <span style="font-size: 60px;">
            <div>
                登录
            </div>
        </div>   
            <div class="innerDiv">
             用户名:<input id = "username" type="text" placeholder="请输入用户名">
            </div>
        </div>

        </div>   
            <div class="innerDiv">
             密&nbsp&nbsp&nbsp码:<input id = "pwd" type="password" placeholder="请输入密码">
            </div>
        </div>
        <div class="innerDiv">
            <span style="margin-left: 90px;">
                <input type="button" onclick="myck(1)" value="提交">
                <input type="button" onclick="myck(2)" value="清空">
        </span>
        </div>

    </body>