html提交数据到数据库

admin
行业动态
2025-04-30
4220

HTML通过表单提交数据至服务器端脚本（如PHP/Python），后端接收后经数据库API（如MySQLi/PDO）建立连接并执行INSERT语句，最终将数据写入数据库完成

环境准备

步骤	说明
安装Web服务器	如Apache/Nginx + PHP环境（XAMPP/WAMP/MAMP）或Node.js环境
创建数据库	通过phpMyAdmin/命令行/GUI工具创建数据库及用户
配置数据库连接	在服务器端代码中配置主机名、用户名、密码、数据库名

HTML表单设计

<form action="process.php" method="POST">
  <input type="text" name="username" placeholder="用户名" required>
  <input type="email" name="email" placeholder="邮箱" required>
  <textarea name="content" placeholder="留言内容" required></textarea>
  <button type="submit">提交</button>
</form>

服务器端处理（PHP示例）

<?php
// 连接数据库
$conn = new mysqli('localhost', 'root', 'password', 'mydatabase');
// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 获取表单数据并消毒
$username = $conn->real_escape_string($_POST['username']);
$email = $conn->real_escape_string($_POST['email']);
$content = $conn->real_escape_string($_POST['content']);
// 插入数据
$sql = "INSERT INTO feedback (username, email, content) VALUES (?, ?, ?)";
$stmt = $conn->prepare($sql);
$stmt->bind_param("sss", $username, $email, $content);
if ($stmt->execute()) {
    echo "提交成功！";
} else {
    echo "错误: " . $stmt->error;
}
$stmt->close();
$conn->close();
?>

数据库表结构设计

字段名	数据类型	说明
id	INT AUTO_INCREMENT	主键ID
username	VARCHAR(50)	用户名（非空）
email	VARCHAR(100)	邮箱（非空）
content	TEXT	（非空）
created_at	TIMESTAMP DEFAULT CURRENT_TIMESTAMP	创建时间

SQL建表语句

CREATE TABLE feedback (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    email VARCHAR(100) NOT NULL,
    content TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

安全注意事项

风险类型	防护措施
SQL注入	使用预处理语句（Prepared Statements）或PDO绑定参数
XSS攻击	输出时使用`htmlspecialchars()`转义特殊字符
数据校验	前端使用`required`属性 + 后端二次校验（如正则验证邮箱格式）

完整流程示意图

graph TD
    A[用户填写HTML表单] --> B{提交按钮点击}
    B --> C[浏览器发送HTTP请求]
    C --> D[服务器端接收数据]
    D --> E[数据清洗与校验]
    E --> F[数据库插入操作]
    F --> G[返回响应结果]
    G --> H[页面显示结果]