在 Web 开发中，把数据库里存储的数据展示到 HTML 表单里是最常见的需求之一，例如用户编辑个人资料时，页面需要自动带上数据库中的昵称、邮箱和下拉选项。实现方式主要分为服务端渲染直出和前端异步获取后填充两类，选择哪一种取决于项目架构与安全要求。
一、服务端渲染：在生成页面时写入值
服务端渲染指的是在后端程序查询数据库之后，直接把数据拼接到 HTML 字符串中再返回给浏览器。这种方式的优势是首屏就能看到正确内容，不需要额外请求，也避免了接口暴露数据查询逻辑。以 PHP 为例，我们可以先查询用户表，再把字段值放到 input 的 value 属性里。
需要注意的是，从数据库取出的内容可能包含引号或尖括号，必须使用 htmlspecialchars 之类的函数做转义，否则会破坏 HTML 结构甚至引发 XSS。下面的代码演示了最基础的写法。
<?php
// 假设已通过 PDO 查询得到 $user 数组
$user = ['nickname' => '张三', 'email' => 'test@ipipp.com', 'city' => 'bj'];
?>
<form method="post" action="/save">
<label>昵称：</label>
<input type="text" name="nickname" value="<?php echo htmlspecialchars($user['nickname']); ?>" />
<label>邮箱：</label>
<input type="text" name="email" value="<?php echo htmlspecialchars($user['email']); ?>" />
<label>城市：</label>
<select name="city">
<option value="bj" <?php echo $user['city']==='bj'?'selected':''; ?>>北京</option>
<option value="sh" <?php echo $user['city']==='sh'?'selected':''; ?>>上海</option>
</select>
</form>
如果使用 Node.js 搭配模板引擎 EJS，逻辑也是相似的。在路由中查库后将对象传给模板，模板里通过 <%= %> 输出并自动转义。这种做法让前后端分工清晰，适合传统多页应用。
对于文本域 textarea，值不能放在属性里，而要写在标签中间。例如 <textarea>数据库内容</textarea>，同样要做转义处理，防止用户之前存过的尖括号影响页面。
二、前端异步填充：通过接口获取数据
在前后端分离项目中，页面先是一个空壳，再由 JavaScript 请求后端接口拿到数据并赋值给表单。这种方式适合单页应用，但增加了请求往返，且要注意接口鉴权，不能让任意用户拿到他人数据。
下面是一段原生 JS 示例，请求成功后把数据库返回的对象依次写入表单控件。注意 fetch 得到的字段要做空值判断，避免 undefined 被写成字符串。
fetch('/api/user/1')
.then(res => res.json())
.then(data => {
document.querySelector('input[name=nickname]').value = data.nickname || '';
document.querySelector('input[name=email]').value = data.email || '';
const sel = document.querySelector('select[name=city]');
if (sel) {
sel.value = data.city || '';
}
const ta = document.querySelector('textarea[name=bio]');
if (ta) {
ta.value = data.bio || '';
}
});
异步填充时，如果表单含有 radio 或 checkbox 等多选项，需要根据数据库值循环比对并设 checked 属性。与服务端直出相比，这种代码更分散，但胜在页面与数据解耦。
无论哪种方式，核心都是先明确数据库字段与表单控件的对应关系，再做安全的赋值或输出。对于保密要求高的系统，更推荐服务端渲染，减少接口面。
三、常见错误与处理建议
开发者常犯的一个错误是直接在 HTML 里拼接未转义的数据库内容，例如把用户昵称原样塞进 value，一旦昵称含双引号就会导致属性提前闭合。另一个错误是下拉框回显时忘记加 selected，造成编辑页看起来像新增页。
建议使用统一的格式化函数，在服务端或前端都先处理再落 DOM。如果表单很复杂，可以考虑把数据库行先转成 JSON 放进隐藏域，再由前端脚本统一映射，降低手写错漏概率。
<script type="application/json" id="form-data">
{ "nickname": "张三", "email": "test@ipipp.com", "city": "bj" }
</script>
<form id="edit-form">
<input type="text" name="nickname" />
<input type="text" name="email" />
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
</form>
<script>
const data = JSON.parse(document.getElementById('form-data').textContent);
const form = document.getElementById('edit-form');
form.nickname.value = data.nickname;
form.email.value = data.email;
form.city.value = data.city;
</script>
通过上述对比可以看出，将数据库的值传入 HTML 表单并不复杂，关键是选对渲染路径并处理好转义与回显状态。小型系统用服务端直出最省心，大型分离架构用接口填充更灵活。