写一个留言板html的
时间: 2023-08-05 13:10:04 浏览: 73
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
form {
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 100px;
resize: none;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.message {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<h1>留言板</h1>
<form id="messageForm">
<textarea id="messageInput" placeholder="请输入留言内容"></textarea>
<br>
<input type="submit" value="提交留言">
</form>
<div id="messageList"></div>
</div>
<script>
document.getElementById("messageForm").addEventListener("submit", function(event) {
event.preventDefault();
var message = document.getElementById("messageInput").value;
if (message) {
var messageElement = document.createElement("div");
messageElement.className = "message";
messageElement.innerText = message;
document.getElementById("messageList").appendChild(messageElement);
document.getElementById("messageInput").value = "";
}
});
</script>
</body>
</html>
阅读全文