HTML如何输出被submit按钮提交的内容?

我在使用HTML5和JavaScript做一个论坛，现在其他功能全都完成了，现在就是在文本域里面输入帖子的标题和内容之后我想在页面里面显示刚刚这个帖子的内容（如果发了好几个那就这几个都显示，按照时间排序），请问应该怎么做?（只用HTML和JavaScript不用数据库和php的话）

本地存储呗加上 dom 操作

<html>

<head>
    <title>论坛</title>
    <script src="forum.js"></script>
</head>

<body>
    <h1>论坛</h1>
    <h2>发帖</h2>
    <form>
        <label for="title">标题：</label>
        <input type="text" id="title" name="title"><br>
        <label for="content">内容：</label>
        <textarea id="content" name="content"></textarea><br>
        <button type="button" id="submit">发布</button>
    </form>
    <h2>帖子列表</h2>
    <ul id="post-list"></ul>
</body>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/moment.js/2.29.1/moment.min.js"></script>
<script>
    // 获取页面元素
    var titleInput = document.getElementById("title");
    var contentInput = document.getElementById("content");
    var submitButton = document.getElementById("submit");
    var postList = document.getElementById("post-list");

    // 提交帖子内容
    submitButton.addEventListener("click", function (event) {
        event.preventDefault(); // 防止表单提交
        var title = titleInput.value;
        var content = contentInput.value;

        // 创建一个帖子对象
        var post = {
            "title": title,
            "content": content,
            "timestamp": Date.now(), // 记录帖子发布的时间戳
            "time":null
        };
        post.time=moment(post.timestamp).format('YYYY-MM-DD hh:mm:ss'); // 五月 4日 2023, 10:02:58 上午
        // 保存帖子到localStorage中
        if (localStorage.getItem("posts")) { // 如果已经有帖子存在，追加到帖子列表中
            var posts = JSON.parse(localStorage.getItem("posts"));
            posts.push(post);
            localStorage.setItem("posts", JSON.stringify(posts));
        } else { // 如果没有帖子存在，创建一个新数组并保存到localStorage中
            var posts = [post];
            localStorage.setItem("posts", JSON.stringify(posts));
        }

        // 清空输入框
        titleInput.value = "";
        contentInput.value = "";

        // 显示帖子列表
        showPosts();
    });

    // 显示帖子列表
    function showPosts() {
        // 从localStorage中读取帖子，并按照时间戳排序
        var posts = JSON.parse(localStorage.getItem("posts"));
        if (!posts || posts.length == 0) {
            return
        }
        posts.sort(function (a, b) {
            return b.timestamp - a.timestamp;
        });

        // 清空帖子列表
        postList.innerHTML = "";

        // 遍历帖子数组，创建并添加到帖子列表中
        for (var i = 0; i < posts.length; i++) {
            var post = posts[i];
            var listItem = document.createElement("li");
            var titleEl = document.createElement("h3");
            var contentEl = document.createElement("p");
            var timeEl = document.createElement("span");
            titleEl.innerText = post.title;
            contentEl.innerText = post.content;
            timeEl.innerText=post.time;
            listItem.appendChild(titleEl);
            listItem.appendChild(contentEl);
            listItem.appendChild(timeEl);
            postList.appendChild(listItem);
        }
    }



  



    // 页面加载时初始化帖子列表
    showPosts();


// 1.上面示例中使用localStorage保存帖子信息，localStorage是浏览器提供的一种本地存储机制，可以将数据在浏览器关闭后仍然保留在本地；
// 2.给提交按钮添加事件监听函数时需要阻止submit事件的默认行为，防止表单提交；
// 3.为了保证帖子的顺序，我们在提交帖子时对时间戳进行了记录，并在展示帖子列表时按照时间戳排序；
// 4.为了让示例尽可能简单，我们没有进行输入验证和防止XSS攻击等安全措施，请在实际项目中谨慎处理。
</script>

</html>

这个是字符串拼接

<html>

<head>
    <title>论坛</title>
    <style>
        .time{
            color: red;
        }
    </style>
</head>

<body>
    <h1>论坛</h1>
    <h2>发帖</h2>
    <form>
        <label for="title">标题：</label>
        <input type="text" id="title" name="title"><br>
        <label for="content">内容：</label>
        <textarea id="content" name="content"></textarea><br>
        <button type="button" id="submit">发布</button>
    </form>
    <h2>帖子列表</h2>
    <ul id="post-list">


    </ul>
</body>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/moment.js/2.29.1/moment.min.js"></script>
<script>
    // 获取页面元素
    var titleInput = document.getElementById("title");
    var contentInput = document.getElementById("content");
    var submitButton = document.getElementById("submit");
    var postList = document.getElementById("post-list");

    // 提交帖子内容
    submitButton.addEventListener("click", function (event) {
        event.preventDefault(); // 防止表单提交
        var title = titleInput.value;
        var content = contentInput.value;

        // 创建一个帖子对象
        var post = {
            "title": title,
            "content": content,
            "timestamp": Date.now(), // 记录帖子发布的时间戳
            "time": null
        };
        post.time = moment(post.timestamp).format('YYYY-MM-DD hh:mm:ss'); // 五月 4日 2023, 10:02:58 上午
        // 保存帖子到localStorage中
        if (localStorage.getItem("posts")) { // 如果已经有帖子存在，追加到帖子列表中
            var posts = JSON.parse(localStorage.getItem("posts"));
            posts.push(post);
            localStorage.setItem("posts", JSON.stringify(posts));
        } else { // 如果没有帖子存在，创建一个新数组并保存到localStorage中
            var posts = [post];
            localStorage.setItem("posts", JSON.stringify(posts));
        }

        // 清空输入框
        titleInput.value = "";
        contentInput.value = "";

        // 显示帖子列表
        showPosts();
    });

    // 显示帖子列表
    function showPosts() {
        // 从localStorage中读取帖子，并按照时间戳排序
        var posts = JSON.parse(localStorage.getItem("posts"));
        if (!posts || posts.length == 0) {
            return
        }
        posts.sort(function (a, b) {
            return b.timestamp - a.timestamp;
        });

        // 清空帖子列表
        postList.innerHTML = "";
        let strhtml = "";
        // 遍历帖子数组，创建并添加到帖子列表中
        for (var i = 0; i < posts.length; i++) {
            var post = posts[i];
            //这里可以 用字符串拼接 更简单 建议用这种，而且 加样式和 dom元素更简单
            strhtml += `
            <li>
                <h3>${post.title}</h3>
                <p>
                    <span>${post.content}</span>
                    <span class="time">${post.time}</span>
                </p>
            </li>

            `
           
        }
        postList.innerHTML=strhtml;
    }







    // 页面加载时初始化帖子列表
    showPosts();


// 1.上面示例中使用localStorage保存帖子信息，localStorage是浏览器提供的一种本地存储机制，可以将数据在浏览器关闭后仍然保留在本地；
// 2.给提交按钮添加事件监听函数时需要阻止submit事件的默认行为，防止表单提交；
// 3.为了保证帖子的顺序，我们在提交帖子时对时间戳进行了记录，并在展示帖子列表时按照时间戳排序；
// 4.为了让示例尽可能简单，我们没有进行输入验证和防止XSS攻击等安全措施，请在实际项目中谨慎处理。
</script>

</html>

完全使用html和javascript来实现，代码量有点多，大致思路是采用js获取dom的输入内容，然后使用js实例化一个数组，把输入内容添加到数组中，当点击提交时，将数组的内容按照倒序在网页中渲染出来。

  • 这篇博客: JS--JavaScript提交表单（submit事件）、重置表单、取消默认提交表单（单击按钮、回车）中的 提交表单 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 使用< input > 或 < button >标签都可以定义提交按钮，只要将type属性值设置为“submit”即可，而图像按钮则是通过将 < input >的type属性值设为“image”。当单击按钮或图像按钮时，就会提交表单。

    submit事件类型仅在表单内提交按钮，或者在文本框中输入文本时按回车键触发。

    示例1：单击【提交】按钮后，触发submit事件，该函数禁止表单提交，而是弹出提示框

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<form id="form1" name="form1" method="post" action="" onsubmit="return fun()">
			<input type="text" name="t" id="t" />
			<input type="submit"/>
		</form>
		<script>
			function fun(){
				var t = document.getElementById("t");
				alert(t.value);
				return false;
			}
		</script>
	</body>
</html>

    在这里插入图片描述
    注意：当表单没有包含提交按钮时，在文本框中输入文本之后，只要按回车键一样能够触发submit事件。
    **特殊情况：**在< textarea >文本区中回车只会换行，不会提交表单。

    示例2：调用prevetnDefault()方法阻止事件的默认行为取消表单提交

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<form id="form1" name="form1" method="post" action="" onsubmit="return fun()">
			<input type="text" name="t" id="t" />
		</form>
		<script>
			var t = document.getElementById("t");
			var f = document.getElementById("form1");
			f.onsubmit = function(e){
				if(t.value.length < 1){
					var event = e || window.event;
					if(event.preventDefault){
						event.preventDefault();
					}else{
						event.returnValue = false;
					}
				}
			}
		</script>
	</body>
</html>

    如果文本框为空，单击回车表单并不提交。

    示例3：禁用回车提交表单

    <script>
	var t = document.getElementById("form1");
	t.onkeypress = function(e){
		var e = e || window.event;
		return e.keyCode != 13;//按下回车时，返回false
	}
</script>

    示例4：调用submit()方法提交表单,不需要提交按钮

    var t = document.getElementById("t");
var f = doument.getElementById("form1");
t.onchange = function(){
	f.submit();
}

    注意：在调用submit()方法时，不会触发submit事件，因此在调用此方法之前先要验证表单数据。

  • 以下回答由chatgpt基于相关博客总结生成:

    使用HTML和JavaScript可以通过以下步骤实现在页面上显示用户提交的论坛帖子内容： 1. 创建一个包含文本域和提交按钮的HTML表单，如下所示：

    <form id="postForm">
  <textarea id="postContent" name="post"></textarea>
  <button type="submit">发表</button>
</form>
    1. 使用JavaScript监听表单的submit事件，并在事件处理程序中阻止表单的默认提交行为，如下所示：
    var postForm = document.getElementById("postForm");
// 监听submit事件
postForm.addEventListener("submit", function(event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  // 处理表单数据
  submitPost();
});
    1. 在事件处理程序中调用提交函数submitPost()，通过JavaScript获取文本域中的内容，并将其显示在页面上指定的位置，如下所示：
    function submitPost() {
  // 获取文本域中的内容
  var postContent = document.getElementById("postContent").value;
  // 创建一个新的帖子节点
  var postNode = document.createElement("div");
  // 将帖子内容添加到帖子节点中
  var postText = document.createTextNode(postContent);
  postNode.appendChild(postText);
  // 将帖子节点插入到列表中，按时间排序
  insertPostNode(postNode);
}
    1. 编写一个函数insertPostNode()，用于将新的帖子节点插入到页面上指定位置，按照时间排序，如下所示：
    function insertPostNode(postNode) {
  // 获取帖子列表节点
  var postList = document.getElementById("postList");
  // 获取当前时间，作为帖子的时间戳
  var timestamp = new Date().getTime();
  // 将帖子节点的时间戳属性设置为当前时间
  postNode.setAttribute("data-timestamp", timestamp);
  // 获取当前已有帖子节点，并按时间戳排序
  var postNodes = postList.querySelectorAll("div[data-timestamp]");
  var sortedPostNodes = Array.prototype.slice.call(postNodes).sort(function(a, b) {
    return b.getAttribute("data-timestamp") - a.getAttribute("data-timestamp");
  });
  // 找到新帖子位置，将其插入到已有帖子后面
  var nextSibling = null;
  for (var i = 0; i < sortedPostNodes.length; i++) {
    if (postNode.getAttribute("data-timestamp") > sortedPostNodes[i].getAttribute("data-timestamp")) {
      nextSibling = sortedPostNodes[i];
      break;
    }
  }
  // 如果找不到插入位置，则将其插入到末尾
  if (!nextSibling) {
    postList.appendChild(postNode);
  } else {
    postList.insertBefore(postNode, nextSibling);
  }
}
    1. 最后，在HTML中指定一个用于显示帖子的容器节点，如下所示：
    <div id="postList"></div>

    完整代码如下：

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>论坛</title>
</head>
<body>
  <h1>发表新帖子</h1>
  <form id="postForm">
    <textarea id="postContent" name="post"></textarea>
    <button type="submit">发表</button>
  </form>
  <h1>帖子列表</h1>
  <div id="postList"></div>
  <script>
    var postForm = document.getElementById("postForm");
    // 监听submit事件
    postForm.addEventListener("submit", function(event) {
      // 阻止表单默认提交行为
      event.preventDefault();
      // 处理表单数据
      submitPost();
    });
    function submitPost() {
      // 获取文本域中的内容
      var postContent = document.getElementById("postContent").value;
      // 创建一个新的帖子节点
      var postNode = document.createElement("div");
      // 将帖子内容添加到帖子节点中
      var postText = document.createTextNode(postContent);
      postNode.appendChild(postText);
      // 将帖子节点插入到列表中，按时间排序
      insertPostNode(postNode);
    }
    function insertPostNode(postNode) {
      // 获取帖子列表节点
      var postList = document.getElementById("postList");
      // 获取当前时间，作为帖子的时间戳
      var timestamp = new Date().getTime();
      // 将帖子节点的时间戳属性设置为当前时间
      postNode.setAttribute("data-timestamp", timestamp);
      // 获取当前已有帖子节点，并按时间戳排序
      var postNodes = postList.querySelectorAll("div[data-timestamp]");
      var sortedPostNodes = Array.prototype.slice.call(postNodes).sort(function(a, b) {
        return b.getAttribute("data-timestamp") - a.getAttribute("data-timestamp");
      });
      // 找到新帖子位置，将其插入到已有帖子后面
      var nextSibling = null;
      for (var i = 0; i < sortedPostNodes.length; i++) {
        if (postNode.getAttribute("data-timestamp") > sortedPostNodes[i].getAttribute("data-timestamp")) {
          nextSibling = sortedPostNodes[i];
          break;
        }
      }
      // 如果找不到插入位置，则将其插入到末尾
      if (!nextSibling) {
        postList.appendChild(postNode);
      } else {
        postList.insertBefore(postNode, nextSibling);
      }
    }
  </script>
</body>
</html>
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632