用html写一个登录界面,用户名和密码的输入框内是黑色的,背景是紫色
时间: 2024-05-25 10:19:14 浏览: 13
<!DOCTYPE html>
<html>
<head>
<title>登录界面</title>
<style>
body {
background-color: purple;
}
input[type="text"],
input[type="password"] {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>欢迎登录</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
</body>
</html>
相关问题
用html5生成一个登录界面,要求输入用户名和密码然后点击登录按钮
好的,下面是一个简单的 HTML5 登录界面示例:
```
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h2>Login</h2>
<form action="#" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
```
在这个示例中,我们使用了 form 元素来创建一个登录表单。表单中有两个 input 元素,一个用于输入用户名,另一个用于输入密码。在提交表单时,我们可以使用 PHP 或其他服务器端语言来验证用户输入的用户名和密码是否正确。
注意:这只是一个简单的示例,实际应用中需要考虑更多的安全性和用户体验问题。
帮我写一段简单的前端登录界面,需要输入用户名和密码
好的,以下是一个简单的前端登录界面:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
</head>
<body>
<h1>欢迎登录</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
</body>
</html>
```
这个界面有一个标题“欢迎登录”,包括两个输入框:一个用于输入用户名,一个用于输入密码。还有一个“登录”按钮,用户点击后可以提交登录信息。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)