html留言板怎么做?要创建一个简单的HTML留言板,你可以使用HTML和JavaScript。下面是一个基本的示例:
<!DOCTYPE
html>
<html>
<head>
<title>留言板</title>
<style>
.container
{
width: 400px;
}
.message {
margin-bottom:
10px;
}
</style>
<script
type="text/javascript">
function addMessage() {
var name =
document.getElementById("name").value;
var message =
document.getElementById("message").value;
if (name && message) {
var container =
document.getElementById("container");
var newMessage =
document.createElement("div");
newMessage.className =
"message";
newMessage.innerHTML = "<strong>" + name +
":</strong> " + message;
container.appendChild(newMessage);
document.getElementById("name").value
= "";
document.getElementById("message").value = "";
} else
{
alert("请输入姓名和留言内容!");
}
}
</script>
</head>
<body>
<h2>留言板</h2>
<div
class="container" id="container"></div>
<br>
<label
for="name">姓名:</label>
<input type="text" name="name"
id="name">
<br><br>
<label
for="message">留言:</label>
<textarea name="message" id="message"
rows="4"></textarea>
<br><br>
<button
onclick="addMessage()">提交留言</button>
</body>
</html>
在这个例子中,我们首先定义了一个具有类名为`container`的`div`元素作为留言的容器。然后,我们添加了一个姓名输入框和留言文本区域。当用户点击提交留言按钮时,`addMessage()`函数会被调用。
`addMessage()`函数首先获取姓名和留言内容的值。如果姓名和留言都不为空,则创建一个新的`div`元素,设置其类名为`message`,并将姓名和留言内容添加为其内部HTML。然后,将新的留言`div`元素追加到容器中,并清空姓名输入框和留言文本区域的值。如果姓名或留言为空,将会弹出一个警告框。
通过以上代码,在HTML中你可以创建一个简单的留言板,用户可以输入姓名和留言内容,并将其显示在页面上。你可以根据需要进行修改和美化以满足你的具体要求。