zoukankan      html  css  js  c++  java
  • html+js实现简单的登陆页面

    初学web自动化,学习简单的前端知识还是很有必要的;

    今天我们利用html实现一个简单的登陆页面,并利用js提取用户名和密码,在alert弹窗中显示出来

    实现的功能:

    1.实现重置按钮的功能,点击重置按钮,能清除你填写的数据 

    2.填写用户名,密码,点击登录,获取到用户名和密码通过alert提示框展示出来。

    页面如图:

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <title>登陆.html</title>
    </head>
    <body>
    <form name="user" action="#" method="get">
    <table align="center">
    <tr>
    <td>用户名</td>
    <td>
    <input type="text" name="username" id="username"/>
    </td>
    </tr>
    <tr>
    <td>密码</td>
    <td>
    <input type="password" name='pwd' id="pwd"/>
    </td>
    </tr>
    <tr>
    <td>性别</td>
    <td>
    <input type="radio" name="name" checked="checked"/>男
    <input type="radio" name="name"/>女
    </td>
    </tr>
    <tr>
    <td>头像</td>
    <td>
    <input class="btn-file" type="file" name="file" />
    </td>
    </tr>
    <tr>
    <td>住址</td>
    <td>
    <select>
    <option value='广东省' selected="selected">广东</option>
    <option >北京市</option>
    <option>山东</option>
    </select>省&nbsp;&nbsp;
    <select>
    <option>深圳</option> <option>北京</option> <option>青岛</option>
    </select>市br
    </td>
    </tr>
    <tr>
    <td>爱好</td>
    <td>
    <input type="checkbox" name="sport" checked="checked"/>篮球
    <input type="checkbox" name="basketball"/>足球
    <input type="checkbox" name="volleyball"/>看书
    </td>
    </tr>
    <tr>
    <td>备注信息</td>
    <td>
    <textarea rows="15" cols="50"></textarea>
    </td>
    </tr>
    <tr>
    <td></td>
    <td>
    <input type="submit" id="id" value="登陆" onclick="return sub()"/>
    <script><!--检查用户名 密码-->
    function sub(){
    var username=document.getElementById("username").value
    var pwd=document.getElementById("username").value
    alert("用户名: "+username+" "+"密码: "+pwd);
    }
    </script>
    <input type="reset" name="reset" value="重置"/>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>

    最终实现的效果如下:

     

  • 相关阅读:
    高精度
    SPOJ 3267(DQUERY) D-query 【主席树】【离线树状数组】
    POJ 3225 Help with Intervals 【线段树】
    HDU 4288 Coder 【线段树】
    HDU 1542 Atlantis 【线段树+扫描线】
    Codeforces 732D Exams【二分+贪心】
    HDU 2795 Billboard 【线段树】
    2015-2016 ACM-ICPC, NEERC, Northern Subregional Contest Problem J 【二分+DP+单调队列】
    HDU 5521 Meeting 【拆点+最短路】
    POJ 3255 Roadblocks 【次短路】
  • 原文地址:https://www.cnblogs.com/Elaine1/p/10035846.html
Copyright © 2011-2022 走看看