HTML表单页面开发需求：实现提交后展示用户输入内容

嘿，很高兴能帮你搞定这个需求！你的表单外观已经没问题了，只需要加一点JavaScript逻辑就能实现提交后展示输入内容的功能。下面是完整的实现方案，你可以直接整合到你的现有代码里：

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>Form Page</title>
    <style type="text/css">
        /* 补全你原有按钮的样式 */
        .button1 {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }

        /* 表单基础样式（可根据你的现有样式调整） */
        .form-container {
            max-width: 400px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-group input, .form-group textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        /* 结果展示区域样式 */
        #formResult {
            max-width: 400px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #4CAF50;
            border-radius: 8px;
            background-color: #f9fff9;
            display: none; /* 默认隐藏，提交后显示 */
        }

        #formResult h3 {
            margin-top: 0;
            color: #4CAF50;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <form id="userForm">
            <!-- 这里可以替换成你自己的表单字段 -->
            <div class="form-group">
                <label for="name">姓名:</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="message">留言:</label>
                <textarea id="message" name="message" rows="4" required></textarea>
            </div>
            <button type="submit" class="button1">提交</button>
        </form>
    </div>

    <!-- 用来展示提交结果的容器 -->
    <div id="formResult">
        <h3>你提交的内容如下:</h3>
        <div id="resultContent"></div>
    </div>

    <script>
        // 获取表单和结果容器元素
        const form = document.getElementById('userForm');
        const resultContainer = document.getElementById('formResult');
        const resultContent = document.getElementById('resultContent');

        // 监听表单提交事件
        form.addEventListener('submit', function(e) {
            // 阻止表单默认的刷新提交行为，这一步很关键！
            e.preventDefault();

            // 获取所有表单输入的值（替换成你自己的字段ID）
            const name = document.getElementById('name').value.trim();
            const email = document.getElementById('email').value.trim();
            const message = document.getElementById('message').value.trim();

            // 拼接展示内容，处理留言的换行问题
            let displayContent = `
                <p><strong>姓名:</strong> ${name}</p>
                <p><strong>邮箱:</strong> ${email}</p>
                <p><strong>留言:</strong><br>${message.replace(/\n/g, '<br>')}</p>
            `;

            // 将内容插入到结果区域
            resultContent.innerHTML = displayContent;
            // 显示结果容器
            resultContainer.style.display = 'block';
        });
    </script>
</body>
</html>

关键步骤拆解 #

• 阻止默认提交行为：用e.preventDefault()避免页面刷新，这样就能在当前页面展示内容而不跳转。
• 安全获取输入值：通过元素ID获取每个输入框的内容，并用trim()去掉多余的首尾空格。
• 渲染展示内容：这里我处理了留言的换行问题，把换行符替换成<br>让内容更易读；如果担心XSS风险，纯文本内容可以用textContent替代innerHTML。
• 控制结果区域显示：默认隐藏结果容器，提交后通过修改CSS的display属性让它显示出来。

适配你的现有代码 #

如果你已经有自己的表单结构，只需要做这几步：

1. 给你的表单添加一个唯一ID（比如userForm）。
2. 在表单下方添加一个结果容器（比如<div id="formResult"></div>）。
3. 把上述JavaScript代码复制到你的页面中，调整获取输入元素的ID对应你自己的表单字段即可。

这样就能完美实现你想要的功能啦！

内容的提问来源于stack exchange，提问作者Mohamed Ali