如何在表单提交时隐藏输入字段数据？

首先，先看你提供的登录表单代码：

<form method="post" action="testPwd.html">
  <p>
    <input type="text" name="username" value="" placeholder="username" maxlength="30">
  </p>
  <p>
    <input type="password" name="password" value="" placeholder="password" maxlength="25">
  </p>
  <p class="submit">
    <input type="submit" name="commit" value="Enter">
  </p>
</form>

其实你已经做了最关键的一步——使用method="post"提交表单！和GET请求不同，POST会把表单数据放在HTTP请求的请求体中，而不是拼在URL地址栏里，这就已经避免了数据在浏览器地址栏暴露的问题。

如果你的需求是在用户点击提交后，视觉上立刻清空输入框的内容（防止旁人从屏幕上看到输入的账号密码），可以通过JavaScript实现这个效果：

<form method="post" action="testPwd.html" onsubmit="clearInputFields()">
  <p>
    <input type="text" name="username" id="username" value="" placeholder="username" maxlength="30">
  </p>
  <p>
    <input type="password" name="password" id="password" value="" placeholder="password" maxlength="25">
  </p>
  <p class="submit">
    <input type="submit" name="commit" value="Enter">
  </p>
</form>

<script>
function clearInputFields() {
  // 表单已经完成数据收集，此时清空输入框不会影响提交
  document.getElementById('username').value = '';
  document.getElementById('password').value = '';
}
</script>

这里要注意：onsubmit事件触发时，浏览器已经把输入框的数据读取到表单提交的请求里了，所以清空输入框完全不会影响数据的正常提交，只是让页面上的输入区域变成空白。

最后给你两个额外的安全建议：

• 务必使用HTTPS协议部署你的登录页面，这样整个请求传输过程中数据都是加密的，能有效防止中间人窃取账号密码。
• 后端接收密码后，不要直接存储明文，一定要用专业的哈希算法（比如bcrypt）对密码进行加密后再存储，这是登录功能的基础安全要求。

内容的提问来源于stack exchange，提问作者Abhinav Parashar