【HTML5】登录页面制作简易版一步步教你制作一个炫酷的透明登录表单（附完整代码） 新手友好：用HTML、CSS和JS打造漂亮的渐变背景登录页面 零基础教程：制作具有透明效果的登录界面 超实用！从头开

于 2024-10-01 21:39:18 发布
阅读量439 收藏 15
点赞数 9
文章标签： html html5 css 前端 app登录页面 app注册页面 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22182989/article/details/142675069
版权

效果图（后面有完整代码）：

在这里插入图片描述

目录

  1. 前言
  2. form 表单的定义和用法
    • 2.1 <input> 标签的定义和用法
    • 2.2 <label> 标签的 for 属性
    • 2.3 实例
  3. 使用 CSS 美化表单
    • 3.1 创建 HTML 结构
    • 3.2 编写 CSS 样式
    • 3.3 效果展示
  4. 结语

前言

大家好，我是[你的名字]。今天给大家带来一篇使用外部样式表制作一个漂亮的登录页面的教程。主要讲解 form 表单的用法，以及 class 属性在 CSS 中的应用。我们将实现一个好看的透明表单框，最外层的背景设置成渐变色。

1. form 表单的定义和用法

<form> 标签用于创建供用户输入的表单。表单能够包含 <input> 标签，以及其他元素如 <textarea>、<button>、<select>、<label> 等。

1.1 <input> 标签的定义和用法

<input> 标签用于创建交互式控件，以便向 Web 服务器发送数据。常用的 type 属性值有：

  • text：文本输入框
  • password：密码输入框
  • email：邮箱输入框
  • submit：提交按钮
  • reset：重置按钮

示例：

<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">

1.2 <label> 标签的 for 属性

<label> 标签定义了输入控件的标签。当用户点击标签文本时，浏览器会自动将焦点转到对应的控件上。for 属性的值应与相关控件的 id 属性值相同。

示例：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

1.3 实例

创建一个包含用户名和密码的简单表单：

<form>
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
  </div>
</form>

2. 使用 CSS 美化表单

为了使登录页面更加美观，我们将使用 CSS 对表单进行样式设计，包括创建一个透明的表单框和设置渐变背景。

2.1 创建 HTML 结构

首先，编写基本的 HTML 代码，建立页面结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
  <!-- 引入 CSS 文件 -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="login-container">
    <form class="login-form">
      <h2>登录</h2>
      <div class="form-control">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>
      </div>
      <div class="form-control">
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</body>
</html>

2.2 编写 CSS 样式

在 style.css 文件中添加以下样式：

/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置背景为渐变色 */
body {
  height: 100vh;
  background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
  font-family: "微软雅黑", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 登录容器样式 */
.login-container {
  background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
}

/* 表单标题 */
.login-form h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #fff;
}

/* 表单控件样式 */
.form-control {
  margin-bottom: 20px;
}

/* 标签样式 */
.form-control label {
  display: block;
  margin-bottom: 5px;
  color: #fff;
}

/* 输入框样式 */
.form-control input {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}

/* 按钮样式 */
.login-form button {
  width: 100%;
  padding: 12px;
  background-color: #fff;
  border: none;
  border-radius: 5px;
  color: #66a6ff;
  font-size: 18px;
  cursor: pointer;
}

.login-form button:hover {
  background-color: #f0f0f0;
}

2.3 效果展示

保存以上代码，打开浏览器查看效果。
在这里插入图片描述

3. 添加交互功能（可选）

如果希望增加交互性，例如验证输入内容或提交表单，可以使用 JavaScript 或引入前端框架，如 Vue.js。以下是使用 JavaScript 简单验证输入的示例。

<!-- 修改 form 标签，添加 id 和 onsubmit 事件 -->
<form class="login-form" id="loginForm" onsubmit="return validateForm()">
  <!-- 表单内容不变 -->
</form>

<!-- 在 body 底部添加脚本 -->
<script>
  function validateForm() {
    var username = document.getElementById('username').value.trim();
    var password = document.getElementById('password').value.trim();
    if (username === '' || password === '') {
      alert('请输入用户名和密码！');
      return false; // 阻止表单提交
    }
    // 可以在这里添加更多验证逻辑
    return true; // 允许表单提交
  }
</script>

4. 完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!-- 样式部分 -->
    <style>
        /* 重置默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 设置背景为渐变色 */
        body {
            height: 100vh;
            background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
            font-family: "微软雅黑", sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 登录容器样式 */
        .login-container {
            background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px); /* 毛玻璃效果，注意兼容性 */
            width: 100%;
            max-width: 400px;
        }

        /* 表单标题 */
        .login-form h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #fff;
        }

        /* 表单控件样式 */
        .form-control {
            margin-bottom: 20px;
        }

        /* 标签样式 */
        .form-control label {
            display: block;
            margin-bottom: 5px;
            color: #fff;
            font-size: 16px;
        }

        /* 输入框样式 */
        .form-control input {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
        }

        /* 按钮样式 */
        .login-form button {
            width: 100%;
            padding: 12px;
            background-color: #fff;
            border: none;
            border-radius: 5px;
            color: #66a6ff;
            font-size: 18px;
            cursor: pointer;
            margin-top: 10px;
        }

        .login-form button:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <form class="login-form" id="loginForm">
            <h2>登录</h2>
            <div class="form-control">
                <label for="username">用户名：</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-control">
                <label for="password">密码：</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">登录</button>
        </form>
    </div>

    <!-- JavaScript 部分 -->
    <script>
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            var username = document.getElementById('username').value.trim();
            var password = document.getElementById('password').value.trim();
            if (username === '' || password === '') {
                alert('请输入用户名和密码！');
                event.preventDefault(); // 阻止表单提交
            } else {
                // 在这里添加实际的登录逻辑，例如发送数据到服务器
                alert('登录成功！');
            }
        });
    </script>
</body>
</html>

5. 结语

通过本次教程，我们学习了如何使用 HTML 的 form、input、label 等标签创建表单，以及如何使用 CSS 对表单进行美化，制作一个好看的透明登录框，并设置渐变色背景。希望对大家有所帮助！

版权声明：本文为原创文章，转载请注明出处。

南北极之间
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南北极之间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值