尋夢留言板語法
在尋夢留言板或其他類似的網站上,通常會使用HTML和CSS來設計留言板的界面,並使用JavaScript來處理用戶的互動和數據的提交。以下是一些基本的語法和步驟,用於創建一個簡單的留言板:
-
HTML結構: 首先,你需要一個基本的HTML結構來放置留言板的元素,例如輸入框和提交按鈕。
<!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <title>留言板</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="message-board"> <h1>尋夢留言板</h1> <form id="message-form"> <textarea id="message-input" placeholder="請輸入您的留言..."></textarea> <button type="submit">提交留言</button> </form> <div id="messages"></div> </div> <script src="script.js"></script> </body> </html>
-
CSS樣式: 使用CSS來美化你的留言板,使其更具吸引力。
body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; } #message-board { max-width: 600px; margin: auto; background: white; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #message-form textarea { width: 100%; height: 100px; margin-bottom: 10px; } #messages { margin-top: 20px; }
-
JavaScript功能: 使用JavaScript來處理表單提交,並在頁面上顯示留言。
document.getElementById('message-form').onsubmit = function(event) { event.preventDefault(); // 阻止表單的默認提交行為 var messageInput = document.getElementById('message-input'); var message = messageInput.value.trim(); if (message) { var messagesDiv = document.getElementById('messages'); var newMessage = document.createElement('div'); newMessage.textContent = message; messagesDiv.appendChild(newMessage); messageInput.value = ''; // 清空輸入框 } };
這些代碼提供了一個基本的留言板功能。用戶可以輸入留言並提交,留言會顯示在頁面上。這個例子非常基礎,實際的尋夢留言板可能會包含更多的功能,例如用戶認證、數據庫存儲、留言管理等。