内容摘要：用HTML直接操作数据库，听起来像是个伪命题——浏览器里跑的那点JavaScript，怎么可能直接连MySQL？但如果你把“HTML数据库”理解成前端页面与后端数据库之间的交互，这事就成立了。我最早接

用HTML直接操作数据库，数据删改听起来像是库增个伪命题——浏览器里跑的那点JavaScript，怎么可能直接连MySQL？数据删改但如果你把“HTML数据库”理解成前端页面与后端数据库之间的交互，这事就成立了。库增我最早接触这个，数据删改是库增帮朋友改一个库存管理页面，他用的数据删改是PHP+MySQL，前端全是库增原生HTML表单，没有框架，数据删改没有AJAX，库增点一下“添加”就刷新整页。数据删改丑，库增但能用。数据删改

先说增。库增HTML里最直白的数据删改添加方式就是<form>表单。一个输入框、一个提交按钮，action指向后端脚本，method用POST。后端收到数据后拼一条INSERT语句。比如：

<form action="add.php" method="post"> <input type="text" name="product"> <input type="number" name="qty"> <button type="submit">入库</button> </form>

add.php里就是$conn->query("INSERT INTO stock (name, qty) VALUES ('$product', $qty)")。注意，这里我故意没写预处理语句——早期很多教程就这么教，结果SQL注入一抓一个准。我自己踩过坑，有人往输入框里填了个单引号加OR 1=1，整张表被清空。所以后来我坚持用PDO的prepare。

删。删除通常靠一个链接或按钮，带上记录ID。比如每行数据后面跟一个<a href="delete.php?id=5">删除</a>。但这样太危险，GET请求能被爬虫或预加载触发。我见过一个后台，鼠标悬停就发请求，结果用户只是滑过，数据就没了。稳妥做法是用POST表单，加个确认弹窗：

<form action="delete.php" method="post" onsubmit="return confirm('确定删除？')"> <input type="hidden" name="id" value="5"> <button>删除</button> </form>

后端拿到id，执行DELETE FROM stock WHERE id=5。别小看这个confirm，它救过我好几次。

改。修改比增和删都麻烦，因为要先回显旧数据。典型流程是：列表页每行有个“编辑”链接，点进去打开一个表单，里面value已经填好当前值。用户改完提交，后端跑UPDATE。HTML部分没什么特别的，就是value属性动态输出：

<input type="text" name="product" value="<?php echo $row['name']; ?>">

但这里有个细节：如果产品名里带双引号，value就会截断。得用htmlspecialchars转义。我见过有人直接echo，结果页面布局全乱，输入框里只剩半截文字。

查。查询是前端最常做的事。简单场景就是一个搜索框，提交后后端SELECT ... WHERE name LIKE '%关键词%'，然后循环输出到<table>里。但纯HTML表格没有分页，数据一多就卡。我试过用<details>和<summary>做折叠，勉强能看。后来还是老老实实加了个LIMIT和页码链接。

真正让“HTML数据库增删改查”变得顺手的，是fetch API。不用刷新页面，点按钮直接发JSON，后端返回结果，前端用JS更新DOM。比如：

fetch('api.php', {  method: 'POST', body: JSON.stringify({ action: 'add', name: '螺丝', qty: 100}) })

但这么写，HTML里就只剩一个空容器，所有内容靠JS生成。调试时打开源码，一片空白。对SEO也不友好。所以我现在的习惯是：首屏用HTML直出，后续交互再用fetch。混着来，不教条。

最后说个真实教训。有次我图省事，把数据库连接信息直接写在HTML的<script>里，想着反正内网。结果页面被缓存，同事在咖啡店打开，直接连上了公司数据库。从那以后，任何跟数据库沾边的操作，我一律放后端。HTML只负责展示和收集输入，别让它碰SQL。