帮我写一个html代码,内容为一个留言板
时间: 2023-03-13 08:47:30 浏览: 184
<html>
<head>
<title>留言板</title>
</head>
<body>
<h1>留言板</h1>
<form action="" method="POST">
<textarea name="message" cols="30" rows="10"></textarea>
<input type="submit" value="提交">
</form>
</body>
</html>
相关问题
请帮我写出一个html精美的留言板
以下是一个简单的 HTML 留言板,使用了 Bootstrap 框架和 CSS 样式来美化界面:
```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<style>
body {
background-color: #f8f9fa;
}
.card {
margin: 20px auto;
max-width: 800px;
border: none;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.card-header {
background-color: #fff;
border-bottom: none;
font-size: 24px;
font-weight: bold;
color: #007bff;
}
.card-body {
background-color: #fff;
border-top: none;
font-size: 16px;
}
.form-control:focus {
border-color: #007bff;
box-shadow: none;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
padding: 8px 20px;
font-size: 16px;
font-weight: bold;
margin-top: 10px;
}
.btn-primary:hover {
background-color: #0069d9;
border-color: #0062cc;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">留言板</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="email">邮箱:</label>
<input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="message">留言:</label>
<textarea class="form-control" id="message" name="message" rows="5" placeholder="请输入留言内容"></textarea>
</div>
<button type="submit" class="btn btn-primary">提交留言</button>
</form>
</div>
</div>
</div>
</body>
</html>
```
你可以将这段代码保存为一个 HTML 文件,用浏览器打开即可看到留言板的界面。这个留言板使用了 Bootstrap 的网格系统和表单组件,可以适应不同的屏幕尺寸。你也可以根据自己的需求,对样式进行修改和调整,使之更符合你的品味和要求。
用html写出一个前端留言板的模板代码
<html>
<head>
<title>前端留言板</title>
</head>
<body>
<h1>欢迎来到前端留言板</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">留言内容:</label>
<textarea id="message" name="message" rows="5" cols="30"></textarea><br><br>
<input type="submit" value="提交留言">
</form>
<h2>历史留言</h2>
<ul id="messages"></ul>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$('form').submit(function(e){
e.preventDefault();
var name = $('#name').val();
var email = $('#email').val();
var message = $('#message').val();
var msg = "<li><strong>" + name + "</strong><br><a href='mailto:" + email + "'>" + email + "</a><br>" + message + "</li>";
$('#messages').append(msg);
$('#name').val('');
$('#email').val('');
$('#message').val('');
});
});
</script>
</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)