WEB05Web开发HTML&CSS
在HTML和CSS中，我们可以创建一个简单的登录表单。以下是一个例子：
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f7f7f7;
}
.login-container {
width: 300px;
margin: 100px auto;
padding: 20px;
background: #fff;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background: #333;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background: #555;
}
</style>
</head>
<body>
<div class="login-container">
<form action="/submit-your-login-form" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<input type="submit" value="Login">
</div>
</form>
</div>
</body>
</html>这个例子中，我们创建了一个登录表单，并通过内联CSS为它提供了一个简单的美观的外观。表单包含用户名和密码字段，以及一个提交按钮。在实际应用中，你需要使用服务器端的脚本来处理表单提交，并确保表单数据的安全性。
评论已关闭