如何将水印元素巧妙嵌入HTML表单页面？

在建立现代 Web 表单时往往需要为输入字段添加水印以让使用者用起来更舒服与界面美感。只是很多开发者会遇到以下痛点：水印易被恶意使用者移除或篡改、跨浏览器兼容性差、还有过度装饰导致可读性下降。下面通过结构化的 HTML 示例与实用方法。帮助你巧妙嵌入水印元素，同时降低维护成本。

使用者痛点一览

• 防篡改难：纯前端的 placeholder 在浏览器控制台可以随意删除或修改。
• 兼容性问题：旧版 IE 不支持 placeholder 属性，导致空白占位失效。
• 使用者体验受损：过于醒目的水印颜色或字体会遮挡已输入内容，引发误操作。

说到基础实现，使用 native placeholder

最直接的方法是利用 HTML5 的 placeholder 属性。按理说，这种方式语义清晰、代码简洁。但仅在未输入内容时显示：

说到优点，无额外脚本，自动兼容现代浏览器；缺点：无法对老旧浏览器做降级处理，也无法阻止使用者自行删除。