服务时间:8:30-18:00

首页 >web前端网

html怎么做登录界面

发布时间:2023-11-09 10:36 字数:1088字 阅读:106

html怎么做登录界面?创建一个登录界面需要一些基本的HTML、CSS和JavaScript知识。以下是一个简单的登录界面的示例:

html怎么做登录界面

```html
<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
        .container {
            width: 300px;
            padding: 16px;
            background-color: white;
            margin: 0 auto;
            margin-top: 100px;
            border: 1px solid black;
            border-radius: 4px;
        }
        input[type=text], input[type=password] {
            width: 100%;
            padding: 15px;
            margin: 5px 0 22px 0;
            display: inline-block;
            border: none;
            background: #f1f1f1;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
            opacity: 0.9;
        }
        button:hover {
            opacity:1;
        }
    </style>
</head>
<body>
    <div class="container">
        <label for="uname"><b>Username</b></label>
        <input type="text" placeholder="Enter Username" name="uname" required>

        <label for="psw"><b>Password</b></label>
        <input type="password" placeholder="Enter Password" name="psw" required>

        <button type="submit">Login</button>
    </div>
</body>
</html>
```

这个例子中,我们创建了一个简单的登录表单,包括用户名和密码输入框以及一个登录按钮。CSS用于美化页面,使其看起来更专业。这只是一个非常基础的登录界面,实际的登录界面可能需要更复杂的功能,如表单验证、错误处理等,这通常需要使用JavaScript或者后端语言来实现。