HTML实现简单的登录界面

作者：System 时间：2024年08月19日分类：所有,html 字数：1413

以下是一个简单的HTML登录界面示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        form {
            display: flex;
            flex-direction: column;
            width: fit-content;
        }
        form label {
            padding: 10px 0;
        }
        form input {
            padding: 10px;
            margin-bottom: 15px;
            width: 200px;
        }
        form button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
 
    <form action="/submit-your-login-form" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        
        <button type="submit">Login</button>
    </form>
 
</body>
</html>

这个示例使用了HTML的<form>元素来创建登录表单，包含用户名和密码输入框以及提交按钮。CSS则用于增强用户体验，比如边距、填充、颜色和按钮的悬停效果。记得将action属性的值替换为处理登录请求的服务器路径。

HTML实现简单的登录界面

评论已关闭

推荐阅读