html留言板
时间: 2023-07-01 11:06:10 浏览: 55
HTML 留言板可以通过 HTML、CSS 和 JavaScript 实现。以下是一个简单的示例:
HTML:
```html
<div>
<h2>留言板</h2>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<br>
<label for="message">留言:</label>
<textarea id="message" name="message"></textarea>
<br>
<button type="submit" onclick="submitForm()">提交</button>
</form>
<ul id="messages"></ul>
</div>
```
CSS:
```css
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
width: 80px;
display: inline-block;
}
textarea {
height: 100px;
width: 300px;
}
button {
margin-top: 10px;
}
#messages {
list-style: none;
padding: 0;
margin-top: 20px;
width: 100%;
}
.message {
background-color: #eee;
padding: 10px;
margin-bottom: 10px;
}
```
JavaScript:
```javascript
function submitForm() {
event.preventDefault();
var name = document.getElementById("name").value;
var message = document.getElementById("message").value;
var messagesList = document.getElementById("messages");
var newMessage = document.createElement("li");
newMessage.innerHTML = "<strong>" + name + ":</strong> " + message;
newMessage.classList.add("message");
messagesList.appendChild(newMessage);
document.getElementById("name").value = "";
document.getElementById("message").value = "";
}
```
这个留言板会在用户提交表单时创建一个新的列表项,并显示用户输入的姓名和留言。