前端小白都能看懂的注册页面代码

最新推荐文章于 2024-06-16 23:02:16 发布

一笑而过☜

最新推荐文章于 2024-06-16 23:02:16 发布

阅读量333

点赞数

分类专栏： H5 Js Css 文章标签： css js html

本文链接：https://blog.csdn.net/qq_41039734/article/details/92392550

版权

Js 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

Css

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        table {
            margin: 20px auto;
            border: 2px solid orange;
            border-collapse: collapse;
        }
        
        table td {
            height: 40px;
            line-height: 40px;
            padding: 5px;
            width: 200px;
            background: rgba(100, 50, 10, 0.3);
            text-align: right;
            font-size: 24px;
            border: 1px solid #fbf5f5;
        }
        
        select,
        input {
            width: 200px;
            height: 40px;
            font-size: 18px;
        }
        
        input[type="radio"] {
            width: 30px;
            height: 30px;
        }
        
        #sex {
            text-align: center;
        }
        
        input[type=submit],
        [type="reset"] {
            width: 150px;
            border-radius: 8px;
            font-size: 20px;
            outline: none;
        }
        
        tr td:first-child {
            width: 150px;
        }
        
        table tr:last-child td {
            text-align: center !important;
        }
    </style>

</head>

<body>
    <table>
        <tr>
            <td>
                用户名:
            </td>
            <td>
                <input type="text" id="st1" />
            </td>
        </tr>
        <tr>
            <td>
                联系电话:
            </td>
            <td>
                <input type="text" id="st2" />
            </td>
        </tr>
        <tr>
            <td>
                密码:
            </td>
            <td>
                <input type="password" id="st3" />
            </td>
        </tr>
        <tr>
            <td>
                确认密码:
            </td>
            <td>
                <input type="password" id="st4" />
            </td>
        </tr>
        <tr>
            <td>
                性别:
            </td>
            <td id="sex">
                <input type="radio" name="sex" value="男" />男
                <input type="radio" name="sex" value="女" />女
            </td>
        </tr>
        <tr>
            <td>
                学历:
            </td>
            <td>
                <select id="select">
                    <option value="小学">小学</option>
                    <option selected value="初中">初中</option>
                    <option value="高中">高中</option>
                    <option value="大学">大学</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" id="bt1" onclick="cs()" />
                <input type="reset" id="bt2" value="重置" />
            </td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    function $(id) {
        return document.getElementById(id);
    }
    //检测密码
    function check() {
        if ($("st3").value == $("st4").value) {
            alert("密码正确");
        } else {
            alert("密码错误");
        }
    }
    $("st4").onblur = function() {
        check();

    }

    function cs() {
        var str = "用户信息";
        alert(str);
    }
</script>

</html>

一笑而过☜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端小白都能看懂的注册页面代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
复制链接

扫一扫

专栏目录