web期末作业设计网页留言页面
时间: 2024-01-21 14:03:01 浏览: 95
期末作业网页制作
网页留言页面是一个常见的功能,可以让用户在网页上留下评论或反馈。以下是一个简单的示例,展示了如何设计一个网页留言页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>留言页面</title>
<style>
.container {
width: 500px;
margin: 0 auto;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: bold;
}
.form-group input[type="text"],
.form-group textarea {
width: 100%;
padding: 5px;
}
.form-group textarea {
height: 100px;
}
.form-group button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>留言页面</h1>
<form action="submit.php" method="POST">
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">留言:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div class="form-group">
<button type="submit">提交留言</button>
</div>
</form>
</div>
</body>
</html>
```
这个示例中,我们使用HTML和CSS来设计一个简单的留言页面。页面包含一个表单,用户可以在表单中输入姓名、邮箱和留言内容,并点击提交按钮提交留言。用户提交的留言将通过表单的`action`属性指定的URL进行处理。
请注意,这只是一个基本的示例,实际的留言页面可能需要更多的功能和验证。你可以根据自己的需求进行修改和扩展。
阅读全文