使用HTML制作一个登录表单,要求有用户名和密码的登录和重置,且有基本的密码判断,并且有忘记密码的提示功能,忘记密码转接到百度,要求此表单有底纹,按钮有颜色,字体为宋体,且字体大小为30,并且登录表单要居中于浏览器。(请把每一行代码用来干什么都注释上)
时间: 2024-02-17 21:04:41 浏览: 157
以下是使用HTML制作一个登录表单的代码,已经加上注释:
```html
<!DOCTYPE html> <!-- 定义文档类型为HTML5 -->
<html>
<head>
<meta charset="utf-8"> <!-- 设置字符编码为UTF-8 -->
<title>登录表单</title> <!-- 设置网页标题 -->
<style>
body {
background-image: url("bg.png"); /* 设置背景底纹 */
font-family: 宋体; /* 设置字体为宋体 */
font-size: 30px; /* 设置字体大小为30 */
}
form {
margin: auto; /* 让表单居中于浏览器 */
width: 50%; /* 设置表单宽度为50% */
padding: 20px; /* 设置表单内边距为20px */
border: 1px solid #ccc; /* 设置表单边框为1px、灰色 */
background-color: #f2f2f2; /* 设置表单背景颜色为淡灰色 */
}
input[type=text], input[type=password] {
padding: 10px; /* 设置文本框内边距为10px */
margin: 10px 0; /* 设置文本框外边距为10px、上下为0 */
border: none; /* 取消文本框边框 */
background-color: #fff; /* 设置文本框背景颜色为白色 */
width: 100%; /* 设置文本框宽度为100% */
}
input[type=submit], input[type=reset] {
background-color: #4CAF50; /* 设置按钮背景颜色为深绿色 */
color: #fff; /* 设置按钮文本颜色为白色 */
padding: 10px; /* 设置按钮内边距为10px */
margin: 10px 0; /* 设置按钮外边距为10px、上下为0 */
border: none; /* 取消按钮边框 */
cursor: pointer; /* 鼠标移动到按钮上时变成手形 */
width: 100%; /* 设置按钮宽度为100% */
}
</style>
</head>
<body>
<form>
<h2>登录</h2>
<label for="username">用户名:</label> <!-- 设置用户名标签 -->
<input type="text" id="username" name="username" required> <!-- 设置用户名文本框,required属性为必填项 -->
<label for="password">密码:</label> <!-- 设置密码标签 -->
<input type="password" id="password" name="password" required> <!-- 设置密码文本框,required属性为必填项 -->
<input type="submit" value="登录"> <!-- 设置登录按钮 -->
<input type="reset" value="重置"> <!-- 设置重置按钮 -->
<p><a href="https://www.baidu.com">忘记密码?</a></p> <!-- 设置忘记密码提示,点击后跳转到百度 -->
</form>
</body>
</html>
```
注:以上代码只是一个简单的登录表单,密码判断等安全功能需要在后端实现。另外,底纹图片需自行准备。
阅读全文