HTML登录注册界面
时间: 2024-06-19 17:04:23 浏览: 15
HTML是一种标记语言,可以用来构建网页的内容和结构。登录注册界面通常由表单组成,其中包括输入用户名、密码等信息的文本框、选择框和按钮等元素。下面是一个简单的登录注册界面的示例代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login/Register</title>
<style>
form {
margin: 50px auto;
width: 300px;
border: 1px solid #ccc;
padding: 20px;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form>
<h2>Login</h2>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username">
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
<button type="submit">Login</button>
</form>
<form>
<h2>Register</h2>
<label for="new-username">Username:</label>
<input type="text" id="new-username" name="new-username" placeholder="Enter a new username">
<label for="new-password">Password:</label>
<input type="password" id="new-password" name="new-password" placeholder="Enter a new password">
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-password" placeholder="Confirm your password">
<button type="submit">Register</button>
</form>
</body>
</html>
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)