服务时间:8:30-18:00

首页 >web前端网

html留言板怎么做

发布时间:2023-11-02 15:41 字数:1339字 阅读:72

html留言板怎么做?要创建一个简单的HTML留言板,你可以使用HTML和JavaScript。下面是一个基本的示例:

html留言板怎么做


<!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中你可以创建一个简单的留言板,用户可以输入姓名和留言内容,并将其显示在页面上。你可以根据需要进行修改和美化以满足你的具体要求。