Login
网站首页 > 文章中心 > 其它

html留言板代码

作者:小编 更新时间:2023-07-31 10:24:53 浏览量:54人看过

1.jpg

下面土嘎嘎小编分享一个简单的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>

这个留言板示例包含一个表单,用户可以在表单中输入姓名和留言内容,并提交留言。提交后,留言会被添加到表格中、


版权声明:倡导尊重与保护知识产权,本站有部分资源、图片来源于网络,如有侵权,请联系我们修改或者删除处理。
转载请说明来源于"土嘎嘎" 本文地址:http://www.tugaga.com/jishu/other/1363.html
<<上一篇 2023-07-31
下一篇 >> 2023-07-31

编辑推荐

热门文章