登录表单跳转

最新推荐文章于 2023-09-12 14:04:40 发布
最新推荐文章于 2023-09-12 14:04:40 发布
阅读量374 收藏 9
点赞数 2
分类专栏： 微信小程序 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51213025/article/details/118406143
版权
这篇博客主要探讨了如何创建一个登录表单，包括HTML结构的设定和CSS样式的应用，以实现美观且功能完整的登录界面。
摘要由CSDN通过智能技术生成

登录：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="login.css">
</head>

<body>
    <div class="login">
        <h1>登录</h1>
        <ul>
            <li class="user-text">账号：<input type="username" class="input-text" ></li>
            <li class="user-text">密码：<input type="password" class="input-text"></li>
            <li class="unpassword">忘记密码</li>
            <li><button class="btn" onclick="submit()">登录</button></li>
        </ul>
    </div>

    <script>
        var arr = document.getElementsByClassName('input-text');
        function submit(){
            var username = arr[0].value;
            var password = arr[1].value;
            console.log(username,password)
            if(username == ''&& password == ''){
                alert('账号密码不能为空！')
            }else if(username =='chenyirong'&&password=='123456'){
                window.location='./Forms.html'
            }else{
                alert('账号密码错误！')
            }
        }
    </script>
</body>

</html>

登录css：

*{
    padding: 0;
    margin: 0;
}
body{
    background-image: url(./1.jpg);
    background-size: cover;
}
.login {
    width: 400px;
    height: 450px;
    /* border: 1px solid rgb(0, 0, 0); */
    margin: auto auto;
    border-radius: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -225px;
    margin-left: -200px;
    background-color: rgb(255, 255, 255);
    box-shadow: 2px 2px 3px #fcf2e1;
}
.login li {
    list-style-type:none;
}
.login h1 {
    text-align: center;
    /* border: 1px solid red; */
    line-height: 100px;
    font-size: 35px;
    position: relative;
    top: 10px;
}
.user-text {
    position: relative;
    top: 10px;
    width: 300px;
    height: 80px;
    margin: 0px auto;
    border-radius: 10px;
    /* border: 1px solid red; */
    font-size: 20px;            
}
.login .user-text .input-text:hover {
    border-radius: 12px;
    cursor:pointer;

}
.input-text {
    /* border: 2px solid red; */
    width: 190px;
    height: 20px;
    border-radius: 10px;
    font-size: 20px;            
    border: 2px solid rgb(163, 163, 163);
    padding: 20px  20px;
    margin: 7px auto;
}
.unpassword {
    /* border: 1px solid red; */
    position: relative;
    left:285px;
    top: 27px;
    display: initial;
}
.unpassword:hover {
    cursor:pointer;
    color: #484847;
    font-weight: 600;
}
.btn {
    height: 55px;
    border-radius: 15px;
    border: none;
    display: block;
    width: 300px;
    margin: 50px auto;
    padding: 10px 20px;
    color: white;
    font-size: 20px;

    text-align: center;
    background-image: linear-gradient(to bottom right, rgb(0, 225, 255) ,rgb(89, 0, 255), rgb(195, 0, 255));
}
.btn:hover {
    cursor:pointer;
    background-image: linear-gradient(to bottom right,rgb(195, 0, 255),rgb(89, 0, 255), rgb(0, 225, 255)  );
}

在这里插入图片描述

表单：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Forms.css">
</head>

<body>
    <div class="box">
        <h1>人员登记系统</h1>
        <div class="people-list">
            <ul>
                <li>姓名：<input type="text" class="input-text"></li>
                <li>性别：
                    <input type="radio" value="男" name="sex" class="radio">
                    <label for="sex1">男</label>
                    <input type="radio" value="女" name="sex" class="radio">
                    <label for="sex2">女</label>
                </li>
                <li>地址：
                    <select name="city" id="city">
                        <option>北京</option>
                        <option>上海</option>
                        <option>天津</option>
                        <option>深圳</option>
                    </select>
                </li>
                <li>爱好：
                    <input type="checkbox" class="checkbox" value="听音乐"><label>听音乐</label>
                    <input type="checkbox" class="checkbox" value="看小说"><label>看小说</label>
                    <input type="checkbox" class="checkbox" value="追剧"><label>追剧</label>
                </li>
                <li class="remarks">
                    <span> 备注：</span>
                    <textarea name="" id="" cols="30" rows="10" class="textarea"></textarea>
                </li>
                <li >
                    <button class="btn" onclick="submit()">提交</button>
                </li>
            </ul>

        </div>
        <script>
            var username = document.getElementsByClassName('input-text');
            var sex = document.getElementsByClassName('radio');
            var select = document.getElementsByTagName('select')[0];
            var check = document.getElementsByClassName('checkbox');
            var textarea = document.getElementsByClassName('textarea')[0];
            function submit() {
                var sexcheck = '男';
                for (let i = 0; i < sex.length; i++) {
                    if (sex[i].checked) {
                        sexcheck = sex[i].value
                    }
                }
                let checkarr = []
                for (let i = 0; i < check.length; i++) {
                    if (check[i].checked) {
                        checkarr.push(check[i].value)
                    }
                }
                var obj = {
                    username: username[0].value,
                    sex: sexcheck,
                    address: select.value,
                    bobby: checkarr,
                    textarea: textarea.value
                }
                console.log(obj)
                var result = false;
                for (let key in obj) {
                    if (!obj[key]) {
                        alert('信息未填写完整，不能提交')
                        return
                    } else {
                        result = true
                    }
                }
                if (result) {
                    alert('提交成功')
                }
            }
        </script>
    </div>
</body>

</html>

表单css：

*{
    padding: 0;
    margin: 0;
}
body{
    background-image: url(./1.jpg);
    background-size: cover;
}
.box {
    width: 400px;
    height: 600px;
    /* border: 1px solid rgb(0, 0, 0); */
    margin: auto auto;
    border-radius: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -290px;
    margin-left: -200px;
    background-color: rgb(255, 255, 255);
    box-shadow: 2px 2px 3px #fcf2e1;
}
li {
    list-style-type:none;
}
.box h1 {
    text-align: center;
    margin: 30px auto;
    
}
.people-list {
    width: 81%;
    /* border: 1px solid red; */
    margin: 0px auto;
}
.people-list li {
    margin: 20px auto;
    font-size: 20px;
}
select {
    font-size: 20px;
    color: rgb(87, 87, 87);
    border: 2px solid rgb(95, 95, 95);
}
select:hover {
    cursor: pointer;
    color: rgb(0, 0, 0);
}
.input-text {
    font-size: 20px;
    border: 2px solid rgb(95, 95, 95);

}
.input-text:hover {
    cursor: pointer;
}
.radio {
    font-size: 20px;
}
.radio:hover {
    cursor:pointer;
}
.remarks {
    display: flex;
}
textarea {
    width: 250px;
    letter-spacing:2px;
}
.remarks textarea {
    font-size: 18px;
    line-height: 30px;
    border-radius: 3px;
    height: 200px;
    border: 2px solid rgb(95, 95, 95);
}
.remarks textarea:hover {
    cursor:pointer;
}
.checkbox:hover {
    cursor:pointer;
}
input[type="checkbox"] {
    width: 15px;
    height: 15px;
    display: inline-block;
    text-align: center;

}

label {
    position: relative;
    left: 3px;
}
.btn {
    position: relative;
    top: 8px;
    border-radius: 15px;
    border: none;
    display: block;
    width: 250px;
    margin: 20px auto;
    padding: 10px 20px;
    color: white;
    font-size: 20px;
    text-align: center;
    background-image: linear-gradient(to bottom right, rgb(0, 225, 255) ,rgb(89, 0, 255), rgb(195, 0, 255));
}

.btn:hover {
    cursor:pointer;
    background-image: linear-gradient(to bottom right,rgb(195, 0, 255),rgb(89, 0, 255), rgb(0, 225, 255)  );
}

在这里插入图片描述

有在学习了
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web自动化测试（表单跳转）
KImdaML的博客
06-15 782
在网页中表单嵌套很常见，尤其是在登录的场景 什么是多表单 实际上就是使用iframe/frame，引用了其他页面的链接，真正的页面数据并没有出现在当前源码中，但是在浏览器中我们看到，简单理解可以使页面中开了一个窗口显示另一个页面 直接使用id值切换进表单 driver.switch_to.frame(value)/driver.switch_to_frame(value) 我们进入pycharm 先导入selenium包然后进行操作 我们这里使用qq空间的进行操作 我们要先找到这个表单的id实现表单跳转
表单登录~跳转
快乐学代码
06-29 788
实现登录 实现登录前表单数据的预验证 1.给表单登录事件 <el-button type="primary" size="medium" @click="login">登录</el-button> 2.点击事件方法 login() { // 登录的预先验证 this.$refs.ruleForm.validate(isOK => { console.log(isOK) }) } 配置axios发起登录请求 1
表单内容跳转
滴答滴答
12-06 699
当表单的提交方式为get时，会自动截断问号后面的内容，这时要用post方法提交表单
JS实现form表单的跳转
热门推荐
weixin_37189727的博客
12-28 1万+
form表单提交时需要从一个页面跳转至不同的页面，使用js动态提交       例如：1.jsp跳转至2.jsp和3.jsp &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;跳转&lt;/tit
form表单无刷新跳转
受惊的牛冲向村里的牛棚
03-24 3466
不会ajax 所以用的有点笨的方法，不管怎么着反正功能大致能用了。 开始在form里加了一个onsubmit="return false;" 可以实现页面的不跳转，但是过了两天onsubmit="return false;"突然不管用了，很奇怪啊 于是搜了一下原来form的target也可以实现页面的不刷新不跳转； form表单的target，当将iframe设置为隐藏时，可以实现当前页表单
js表单注册实现页面登录信息提示（附:阻止页面跳转）
01-08
在JavaScript中，表单注册和登录验证是网页交互中常见的功能。这个场景中，我们主要关注如何使用JavaScript来实现表单验证以及如何阻止页面默认的提交行为，即阻止页面跳转。下面将详细讲解这两个知识点。 首先，让...
vue 解决form表单提交但不跳转页面的问题
10-16
本文将详细介绍如何在Vue中解决表单提交但不跳转页面的问题。 首先，我们需要理解Vue中事件绑定的概念。Vue提供了`v-on`指令用于监听和处理DOM事件，例如表单的提交事件。`v-on`可以简写为`@`，所以`v-on:submit`...
JSP 登录跳转页面
10-23
JSP 登录跳转页面 在本节中，我们将详细介绍 JSP 登录跳转页面的实现细节，包括首页登录页面、判断 check 页面和最后的成功登录显示页面。 首页登录页面 首页登录页面是用户登录系统的入口点。该页面是使用 JSP ...
潮品登录表单网页模板
01-23
9. **登录后页面跳转**：成功登录后，用户应被重定向到他们期望看到的页面，如个人中心、购物车或者首页，而不是停留在登录表单页面。 10. **移动优先**：考虑到越来越多的用户使用手机浏览网页，设计师通常会遵循...
初学Java Web页面间的登录跳转
05-21
在初学Java Web开发时，理解页面间的登录跳转机制是非常关键的一部分，它涉及到用户交互、请求处理和响应管理。本文将深入探讨这个主题，帮助新手开发者更好地掌握这一核心技术。 一、HTTP请求与响应基础 Java Web...
页面传值，登录成功后跳转到用户详情表单
qq_46146030的博客
09-28 500
1.创建新的文件和.jsp文件，代码如下 2.运行结果，如下图
登录跳转实现
Shane_FZ_C的博客
09-09 600
登录跳转实现form表单请求AJAX跳转 form表单请求 前台使用form表单，提交用户登录信息，及验证信息。 后台接收后，成功则重新定向页面。 AJAX跳转 var queryParam = { 'eiu':encryptUserName, 'eip':encryptPassword, 'eiv':encryptVerifyCode }; $.ajax({ type: "POST",
PHP设置表单跳转,form表单页面跳转方式提交练习
weixin_36064512的博客
04-01 320
该楼层疑似违规已被系统折叠隐藏此楼查看此楼//form表单提交练习/*新建一个form.html网页用来书写前端HTML表单*/表单提交练习姓名:年龄:电话:地址:QQ:自我评价://以上功能可自己添加或修改/*在form.html网页的基础上新建一个foms.php网页关联之前的form.html网页并书写php测试代码*///forms.php运行代码$uname = empty($_POS...
HTML页面跳转及表单详解
m0_67444136的博客
07-18 9882
HTML页面跳转及表单详解
HTML--跳转链接、锚点、表单、表格标签、属性
m0_64106684的博客
06-21 2694
a→双标签href属性：链接的地址 target属性：可以改变链接打开的方式，默认情况下：在当前页面打开_self 、新窗口_blankbase→单标签：作用就是改变链接的默认行为的。实现一：#号+id属性实现二：#号+name属性（加给a标签）在编辑文本时，经常会遇到输入法无法输入的字符，如®（注册商标）、版权符等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。 例如： 注：ul和li必须...
表单提交事件跳转问题解析
SuperFivern的博客
01-02 2280
所以，在表单的提交事件如果想要通过location.href去跳转的话，需要阻止表单的默认行为！其实对比第一和第三段代码不难发现，后者能够跳转的原因就是因为在事件处理函数里面阻止了表单的默认行为，这样原本指定的location.href就能够正常运行。问题描述：在表单的提交事件里面，使用location.href属性无法去跳转到指定页面的问题？而我们这样的代码（如下）就可以跳转到指定的页面上去。这样的代码相信大家应该是能知道可以跳转的。这样的代码页面也是可以跳转去指定页面的。
页内跳转及表单的应用
id2359955624的博客
07-18 942
页内跳转及表单的应用
用form表单以post的方式提交数据跳转地址
最新发布
dulei_start的博客
09-12 1829
enctype: 表单数据提交时使用的编码类型，默认使用"pplication/x-www-form-urlencoded"，如果是使用POST请求，则请求头中的content-type指定值就是该值。如果表单中有上传文件，编码类型需要使用"multipart/form-data"，类型，才能完成传递文件数据。2、post：enctype 默认"application/x-www-form-urlencoded"对表单数据进行编码，数据以键值对在http请求体重发送给服务器；
php表单登录成功跳转index页面
06-06
在 PHP 中，要实现表单登录成功后跳转到 index 页面，可以使用以下代码： ```php // 处理表单提交 if ($_SERVER["REQUEST_METHOD"] == "POST") { // 获取表单提交的用户名和密码 $username = $_POST["username"]...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值