用 html, css, js 实现登陆提交界面

最新推荐文章于 2024-09-29 11:40:01 发布

Web企鹅

最新推荐文章于 2024-09-29 11:40:01 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js CSS html5 文章标签： html css javascript

本文链接：https://blog.youkuaiyun.com/Web_blingbling/article/details/107601065

js 同时被 3 个专栏收录

31 篇文章

订阅专栏

html5

24 篇文章

订阅专栏

CSS

21 篇文章

订阅专栏

本文详细介绍了一个简易登录界面的设计与实现过程，包括HTML结构布局、CSS样式美化及JavaScript交互功能，如输入验证和弹窗提示，适用于初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现下面这个登录界面：
图片是百度的 >_<

在这里插入图片描述
提交之后简单实现这样的弹出效果：

html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆界面</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="photo">
        <img src="./res/dong_66cae51456b9983a890610875e89183c.gif">
        <div id="inP">
            <div id="name">
                姓名：<input type="text" id="userName">
            </div>
            <div id="age">
                年龄：<input type="text" id="userAge">
            </div>
            <div id="university">
                大学：<input type="text" id="userUniversity">
            </div>
            <div id="sex">
                性别：<input id='man' type="radio" name="sex">男
                     <input id='woman' type="radio" name="sex">女   
            </div>
        </div>
        <p>
            <input type="submit" value="提交" id="submit">       
            <input type="reset" value="重置">
        </p>
    </div>

    <script src="src/question.js"></script>
</body>
</html>

css 文件

* {
    margin: 0;
}

#photo {
    width: 600px;
    height: 600px;
    text-align: center;
    margin: auto;
    background-color: rgb(165, 220, 241);
}

#inP {
    width: 240px;
    margin: auto;
    text-align: left;
}

#name,#age,#university,#sex {
    margin: 10px; 
}

js 文件

const name = document.querySelector('#userName');
const age = document.querySelector('#userAge');
const university = document.querySelector('#userUniversity');
const man = document.querySelector('#man');
const woman = document.querySelector('#woman');
const clickButton = document.querySelector('#submit');

man.checked = true;

clickButton.onclick = function(){
    alert(`姓名${name.value},年龄${age.value},大学${university.value},${man.checked? '男':'女'} `);
}