下面土嘎嘎小编分享一个简单的HTML留言板示例代码:
〓〓html代码如下:〓〓
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
</head>
<body>
<h1>留言板</h1>
<form id="message-form">
<label for="name">姓名:</label>
<input type="text" id="name" required><br>
<label for="message">留言内容:</label><br>
<textarea id="message" rows="4" cols="50" required></textarea><br>
<button type="submit">提交留言</button>
</form>
<div id="messages">
<!-- 这里将显示留言 -->
</div>
<script>
// 添加留言到留言板
function addMessage() {
var name = document.getElementById("name").value;
var message = document.getElementById("message").value;
var newMessage = document.createElement("div");
newMessage.innerHTML = "<strong>" + name + ":</strong> " + message;
document.getElementById("messages").appendChild(newMessage);
}
// 监听表单提交事件
document.getElementById("message-form").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
addMessage();
document.getElementById("message-form").reset(); // 清空表单
});
</script>
</body>
</html>
这个留言板示例包含一个表单,用户可以在表单中输入姓名和留言内容,并提交留言。提交后,留言会被添加到表格中、