HTML隐藏表单字段提交前意外显示，如何解决？

问题原因 #

哪怕给输入框加了type="hidden"，页面加载时浏览器会先解析渲染HTML结构，再执行提交脚本，这极短的时间内表单元素可能被浏览器短暂渲染出来，导致数据闪现。

解决方案 #

方案1：用CSS提前隐藏表单 #

给表单添加style="display: none;"，从根本上阻止浏览器渲染这个表单元素：

<form name="form1" id="form1" action="{{ $endpoint }}" method="post" style="display: none;">
  <input type="hidden" name="data" value="{{ $data }}">
</form>
<script>
  document.getElementById('form1').submit();
</script>

方案2：纯JS构造POST请求（更推荐） #

完全不用HTML表单，直接通过JavaScript创建并提交请求，避免任何DOM渲染的可能：
如果需要模拟表单提交的页面跳转效果（而非AJAX请求），可以用JS动态创建表单并立即提交，同时确保创建后立即隐藏：

const form = document.createElement('form');
form.action = '{{ $endpoint }}';
form.method = 'POST';
form.style.display = 'none';

const input = document.createElement('input');
input.type = 'hidden';
input.name = 'data';
input.value = '{{ $data }}';

form.appendChild(input);
document.body.appendChild(form);
form.submit();

如果不需要页面跳转，仅需发送POST请求，也可以用fetch或XMLHttpRequest：

// 使用fetch API
fetch('{{ $endpoint }}', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: `data=${encodeURIComponent('{{ $data }}')}`
});

内容的提问来源于stack exchange，提问作者Louis Chung