帮我用html写一个留言板功能留言显示在页面下方
以下是一个简单的留言板功能的 HTML 代码，留言会显示在页面下方：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
</head>
<body>
<h1>留言板</h1>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="message">留言：</label>
<textarea id="message" name="message"></textarea><br><br>
<input type="button" value="提交" onclick="addMessage()">
</form>
<div id="messageList"></div>
<script>
function addMessage() {
// 获取姓名和留言内容
var name = document.getElementById("name").value;
var message = document.getElementById("message").value;
// 创建新的留言元素
var newMessage = document.createElement("p");
newMessage.innerHTML = "<strong>" + name + "：</strong>" + message;
// 将留言元素添加到留言列表中
var messageList = document.getElementById("messageList");
messageList.appendChild(newMessage);
// 清空表单
document.getElementById("name").value = "";
document.getElementById("message").value = "";
}
</script>
</body>
</html>
这个留言板功能包含一个表单，用户可以输入姓名和留言内容，并点击“提交”按钮将留言添加到留言列表中。留言列表由一个 div 元素表示，新的留言会以 p 元素的形式添加到这个 div 元素中。JavaScript 代码实现了添加留言的逻辑，它会获取表单中的姓名和留言内容，创建一个新的 p 元素，并将其添加到留言列表中。最后，它会清空表单以便用户可以输入新的留言。
原文地址: https://www.cveoy.top/t/topic/CE2 著作权归作者所有。请勿转载和采集!