使用文本输入表单更改php中的背景颜色 - Change background-color in php using text input form

我编写了一个程序，通过使用文本输入字段的表单更改页面的背景颜色。我试图将一个变量分配给文本字段中写入的任何值。

该代码在输入值!= 6时工作，但在输入值== 6时不工作。我认为当我试图将输入到文本字段中的值分配给activity1.php文件中的$color时，问题就出现了。

activity1.php

<?php
$color = "color";
if (isset ($_POST["button1"])) {
    if (strlen($_POST["color"]) == 6) {
        echo "<body style='background:#$color;'>";
    } elseif (strlen($_POST["color"]) != 6) {
        echo "Please enter a valid 6 digit hex code<body style='background: black; color: white;'><br>";
    }
}
?>

pageColor.php

<body>
<form action="pageColor.php" method="post">
    <?php
    include "activity1.php";
    ?>
    Please enter your color code: <input type="text" id="color" name="color" />
    <input type="submit" id="button1" name="button1" />
</form>
</body>

正如本注释所暗示的，问题是您正在输出两个body标记。这不是有效的html。

为了解决这个问题，我更喜欢有单独的html和php代码，这样我就可以用php处理html，也可以清楚地看到我的html代码。

body.html:

<body style="background-color:{zBackgroundColor}">
<form action="pageColor.php" method="post">
    Please enter your color code: <input type="submit" id="button1" name="button1" />
    <p>{zErrorContainer}</p>
    <input type="submit" id="button1" name="button1">
</form>
</body>

在php代码中，我只有包含要在html:中替换的值的逻辑

$color = '#FFFFFF'; // that way your values won't be undefined when the post is not submitetd
$error = '';
if (isset ($_POST["button1"])) {
    if (strlen($_POST["color"]) == 6) {
        $color = $_POST['color'];
        $error = '';
    } else { // no need to verify length two times
        $color = '';
        $error = 'Please specify a correct color value';
    }
}
$data = [
    '{zBackgroundColor}' => $color,
    '{zErrorContainer}' => $error,
]

我喜欢使用strtr()来替换html中的值。还有其他功能可以替换字符串中的内容，例如sprintf()，它更强大、更快，但有点约束和复杂的

$html= strtr(file_get_contents('body.html'), $data);
echo $html;

$data中包含的值将替换模板中的占位符。｛z｝方括号很重要，因为strtr()将用它的值替换与数组中任何键匹配的任何字符串。使用带有"z"字母的方括号可以最大限度地减少替换不需要的字符串的可能性。

但是，直接访问$_POST中的值有些危险，因为它无法控制发送到服务器的内容。至少考虑使用filter_input()

$color = filter_input('INPUT_POST, 'color', 'FILTER_SANITIZE_STRING);

为什么不使用Jquery？

http://api.jquery.com/css/

您可以在提交时更改背景色。

$(document).ready(function()
{
     $("#form").submit(function()
{
    $("body").css({"background-color": "#Code"});
})
})

您可以通过给输入元素一个id和来检索它

$("#elem").val();

上面的例子还要求您为表单分配一个ID。

对于您的代码；

尝试：echo '<body style="background:#'.$color;.'">'';

首先，我不会建议您尝试什么，因为这可以很容易地完成，也应该使用Javascript完成，但正如您所说，您只是在学习，因此以下是您的错误。

//First there are 2 body tags which is totally wrong. your php page should be like this

activity.php

<?php
    if (isset ($_POST["button1"]))
     {
       //Checking for lenght and hexa type
       if(ctype_xdigit($_POST["color"]) && (strlen($_POST["color"]) == 6 || strlen($_POST["color"]) == 3)) 
       {
        echo  '<body style=''background-color:#'.$_POST["color"].';''>';
       } 
       elseif(!ctype_xdigit($_POST["color"]) || (strlen($_POST["color"]) != 6 && strlen($_POST["color"]) != 3))
       {
        echo "Please enter a valid 6 or 3 digit hex code<br /><body style='background-color: black; color: white;'><br />";
        }
      }
?>

pageColor.php

<?php
    include "activity1.php";
?>
    <form action="pageColor.php" method="post">
    Please enter your color code:<input type="text" id="color" name="color" />
    <input type="submit" id="button1" name="button1" />
    </form>
</body>

在该循环之后

if (strlen($_POST["color"]) == 6){

您没有将$color值分配给$_POST['color']。因此变量color值将保持为"color"。当你在样式中使用"background:#color"时，它不是有效的css。

$color = "color";
if (isset ($_POST["button1"])){
    if (strlen($_POST["color"]) == 6){
        // $color value is color here. '#color' is not a proper hex bg code. 
        echo  "<body style='background:#$color;'>";
    }elseif(strlen($_POST["color"]) != 6){
    echo "Please enter a valid 6 digit hex code<body style='background: black; color: white;'><br>";
    }
}

尝试将其更改为

$color = "color";
if (isset ($_POST["button1"])){
    if (strlen($_POST["color"]) == 6){
        $color=$_POST["color"];
        echo  "<body style='background:#$color;'>";
    }elseif(strlen($_POST["color"]) != 6){
    echo "Please enter a valid 6 digit hex code<body style='background: black; color: white;'><br>";
    }
}