使用文本输入表单在php中更改背景颜色

时间:2013-11-23 20:12:19

标签: php background-color

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

当输入值为!= 6但输入值== 6不起作用时,代码才有效。我认为当我尝试将输入到文本字段中的值分配到$color文件中的activity1.php时会出现问题。

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>

4 个答案:

答案 0 :(得分:0)

this评论中提到的问题是你输出了两个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);

答案 1 :(得分:-1)

首先我不建议您尝试的是因为这很容易并且应该使用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>

答案 2 :(得分:-1)

为什么不使用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;.'">'';

答案 3 :(得分:-1)

此循环之后

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

你没有为$ _POST ['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>";
    }
}