使用HTML制作一个登录表单,要求有用户名和密码的登录和重置,且有基本的密码判断,并且有忘记密码的提示功能,忘记密码转接到百度,要求此表单有底纹,按钮有颜色,字体为宋体且字体大小为30,并且登录表单要居中于浏览器。(请把每一行代码用来干什么都注释上)
时间: 2023-08-15 17:03:43 浏览: 91
以下是一个简单的示例,实现了上述要求:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<style>
body {
background-image: url("background.jpg"); /* 设置背景图片 */
background-size: cover; /* 背景图片覆盖整个页面 */
font-family: "宋体"; /* 设置字体为宋体 */
font-size: 30px; /* 设置字体大小为30 */
}
form {
display: flex; /* 设置表单为弹性容器 */
flex-direction: column; /* 设置子元素垂直排列 */
align-items: center; /* 设置子元素在主轴方向上居中对齐 */
margin-top: 100px; /* 设置表单距离页面顶部的距离 */
padding: 20px;
background-color: #fff; /* 设置表单背景颜色为白色 */
border-radius: 10px; /* 设置表单圆角 */
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* 设置表单阴影 */
}
input[type="text"],
input[type="password"] {
width: 100%; /* 设置输入框宽度为100% */
height: 40px; /* 设置输入框高度为40px */
margin-bottom: 20px; /* 设置输入框与下一个元素之间的距离为20px */
padding: 10px; /* 设置输入框内边距为10px */
border-radius: 5px; /* 设置输入框圆角 */
border: none; /* 取消输入框边框 */
}
input[type="submit"],
input[type="reset"] {
background-color: #4CAF50; /* 设置按钮背景颜色 */
color: #fff; /* 设置按钮文本颜色 */
border: none; /* 取消按钮边框 */
border-radius: 5px; /* 设置按钮圆角 */
padding: 10px 20px; /* 设置按钮内边距 */
margin-top: 20px; /* 设置按钮与上一个元素之间的距离为20px */
cursor: pointer; /* 鼠标移动到按钮上时显示手型 */
}
input[type="submit"]:hover,
input[type="reset"]:hover {
background-color: #3e8e41; /* 鼠标悬停时设置按钮背景颜色 */
}
</style>
</head>
<body>
<form>
<label>Username:</label>
<input type="text" name="username" required> <!-- 设置用户名输入框 -->
<label>Password:</label>
<input type="password" name="password" required minlength="6" maxlength="20"> <!-- 设置密码输入框,并设置最小长度为6,最大长度为20 -->
<input type="submit" value="Login"> <!-- 设置登录按钮 -->
<input type="reset" value="Reset"> <!-- 设置重置按钮 -->
<a href="https://www.baidu.com" target="_blank">Forgot password?</a> <!-- 设置忘记密码链接,并在新标签页中打开 -->
</form>
</body>
</html>
```
注释中说明了每一行代码的作用,包括设置背景图片、字体、字体大小、表单样式、输入框样式、按钮样式等。其中,忘记密码链接使用了 `<a>` 标签,并设置了 `target="_blank"` 属性让链接在新标签页中打开。
阅读全文