dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1113|回复: 0

[前端] 使用HTML和CSS创建一个登录表单

[复制链接]

358

主题

374

帖子

1641

积分

荣誉会员

积分
1641

发表于 2023-9-3 12:00:01 | 显示全部楼层 |阅读模式

本站资源全部免费,回复即可查看下载地址!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
image.png

创建登录表单需要使用HTML和CSS。下面是一个简单的示例,展示了如何创建一个基本的登录表单:

首先,我们来看看HTML代码:
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
  <title>登录表单</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <h2>登录</h2>
    <form>
      <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
      </div>
      <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</body>
</html>

接下来,我们需要为表单添加一些样式,这可以在一个CSS文件中完成。创建一个名为`style.css`的新文件,并将以下代码粘贴到其中:
[CSS] 纯文本查看 复制代码
.container {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  text-align: center;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 5px;
}

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px;
  width: 100%;
}

以上代码将创建一个简单的登录表单,并对其进行了基本的样式设置。你可以根据自己的需求进一步修改和扩展这个表单。

希望对你有所帮助!

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|小黑屋|dmz社区

GMT+8, 2026-7-29 10:08 , Processed in 0.041844 second(s), 10 queries , Redis On.

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表