PHP 簡易十六進制顏色選擇器：動態修改頁面背景色

功能演示

一個極簡的 PHP 表單頁面，用戶輸入十六進制顏色代碼（如 ff6600），提交後頁面背景即時變為該顏色。適合初學者理解 PHP 處理表單、輸出 HTML 的基本流程。

完整代碼

<?php
// 預設顏色
$bgColor = isset($_POST['inputColor']) ? $_POST['inputColor'] : 'ffffff';
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景顏色修改器</title>
    <style>
        body { font-family: sans-serif; padding: 2rem; transition: background 0.3s; }
        .color-form { background: rgba(255,255,255,0.9); padding: 1.5rem; border-radius: 8px; display: inline-block; }
        input[type="text"] { padding: 0.5rem; width: 120px; text-transform: uppercase; }
        input[type="submit"] { padding: 0.5rem 1rem; background: #333; color: #fff; border: none; cursor: pointer; }
    </style>
</head>
<body bgcolor="#<?php echo htmlspecialchars($bgColor); ?>">
    <div class="color-form">
        <h3>輸入十六進制顏色代碼</h3>
        <form method="post">
            <input type="text" name="inputColor" value="<?php echo htmlspecialchars($bgColor); ?>" placeholder="如 FF6600" maxlength="6" pattern="[0-9A-Fa-f]{3,6}">
            <input type="submit" value="套用背景色">
        </form>
        <p>當前顏色：#<?php echo htmlspecialchars(strtoupper($bgColor)); ?></p>
    </div>
</body>
</html>

代碼解析

1. 接收輸入：$_POST['inputColor'] 獲取提交值，未提交時默認 ffffff（白色）
2. XSS 防護：輸出到 HTML 屬性時使用 htmlspecialchars() 轉義
3. 表單自提交：action 留空默認提交當前頁面
4. 前端驗證：pattern 限制輸入 3-6 位十六進制字符，text-transform: uppercase 自動大寫
5. 過渡動畫：CSS transition 讓背景色變化更平滑

擴展建議

• 添加顏色選取器：<input type="color">（現代瀏覽器原生支持）
• 保存用戶偏好至 Cookie/Session/數據庫
• 支持 RGB、HSL 等多種格式輸入並互轉
• 生成配色方案（互補色、類似色、三角色）

安全提醒

雖然本例僅輸出到 bgcolor 屬性，但永不信任用戶輸入。若將顏色值用於內聯 Style（style="background:#{$input}"），必須嚴格驗證格式（/^[0-9A-Fa-f]{3,6}$/），防止 CSS 注入攻擊。