通过JavaScript监听表单submit事件，使用preventDefault阻止默认提交，读取输入值并动态插入展示区域；2. 示例中表单提交后在页面显示姓名、邮箱、年龄；3. 可选优化包括提交后清空表单或追加记录实现历史数据显示。
表单提交后在前端展示数据，常见做法是通过JavaScript捕获用户输入，阻止默认提交行为，然后将数据动态显示在页面上。这样无需跳转页面或依赖后端，适合做本地演示或简单交互。
通过监听表单的 submit 事件，可以阻止页面刷新，读取输入值，并将其展示在指定区域。
关键步骤：
以下是一个简单的注册表单，提交后在下方显示用户填写的信息：
立即学习“前端免费学习笔记（深入）”；
<form id="userForm">
<label>姓名：<input type="text" name="name" required></label><br>
<label>邮箱：<input type="email" name="email" required></label><br>
<label>年龄：<input type="number" name="age"></label><br>
<button type="submit">提交</button>
</form>
<div id="displayArea" style="margin-top: 20px;"></div>
<script>
document.getElementById('userForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止页面刷新
const name = this.name.value;
const email = this.email.value;
const age = this.age.value || '未填写';
const displayArea = document.getElementById('displayArea');
displayArea.innerHTML = `
<h3>提交成功！信息如下：</h3>
<p><strong>姓名：</strong>${name}</p>
<p><strong>邮箱：</strong>${email}</p>
<p><strong>年龄：</strong>${age}</p>
`;
});
</script>
如果希望提交后清空输入框，可在展示数据后添加：
this.reset(); // 清空表单
若要支持多次提交并保留历史记录，可将 innerHTML 改为追加方式：
displayArea.innerHTML += '<div class="record">...</div>';
基本上就这些，不复杂但容易忽略细节，比如忘记 preventDefault 导致页面刷新。只要抓住“拦截 + 读取 + 显示”这个流程，就能轻松实现前端展示。
以上就是HTML表单数据怎么展示_HTML表单提交后数据在前端展示的方法与实例的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
689
收藏
