如何动态更改输入的文本字体系列值?

时间:2018-06-02 06:36:44

标签: php html mysqli

我有一个非常简单的疑问,我有一个输入文本和一个下拉列表,在下拉列表中它们是各种字体系列,所以如果我在输入字段中输入任何文本,稍后如果我选择字体系列从下拉列表中选择arial,输入的文本应以arial字体显示。请任何人指导我,我非常接近完成任务。

<!DOCTYPE html>
        <html>
            <head>

                <style>

                </style>

            </head>

            <body style="padding-left:200px">

                <?php

                    $name = $font = $size = "" ;

                    if (isset($_POST["font"])) {
                        $name = test_input($_POST["name"]);
                        $font = test_input($_POST["font"]);
                        var_dump($font);
                        $size = test_input($_POST["size"]);
                        var_dump($size);
                    }

                    function test_input($data) {
                        return $data;
                    }

                    ?>

                <form action="" method="post">

                    <br><br>

                    <div>

                        <label style="color:orange">Enter Text: </label> <input type="text" name="name" placeholder="Enter Something">

                    </div><br><br>

                    <div>

                        <label style="color:orange">Select Size: </label> <input type="text" name="size">

                    </div><br><br>

                    <div>

                        <label class="control-label" style="color:orange;">Font Name :</label>

                        <select name="font" style="margin-left:14px; color:black;">

                            <option disabled selected value> -- select an option -- </option>
                            <option>Times New Roman</option>
                            <option>Arial</option>
                            <option>Verdana</option>
                            <option>Georgia</option>
                            <option>Impact</option>

                        </select>

                    </div><br><br>

                    <!--div>

                        <label style="color:orange">Choose Color: </label> <input type="text" name="size">

                    </div><br><br-->

                    <input type="submit" name="submit" value="Submit">  

                </form>

                <?php

                    echo "<br>";
                    echo "<h2 style='color:orange'>OUTPUT:</h2>";
                    echo '<p style="font-family:'.$font.'; font-size:'.$size.';">'.$name.'</p>';


                ?>

            </body>
         </html>

1 个答案:

答案 0 :(得分:0)

试试这个。只需在您回显的变量中回显您的字体变量即可。 将值返回字体放在变量中,并在回显时使用该变量。

if (isset($_POST["font"])) {
    $name = test_input($_POST["name"]);
    $font = test_input($_POST["font"]);
} 

            <!DOCTYPE html>
            <html>
                <head>

                    <style>
                        .error {
                            color: #FF0000;
                            }
                    </style>

                </head>

                <body style="padding-left:200px">

                    <?php

                        $name =  "";
                        $font='arial';
                        $size='14px';
                        if (isset($_POST["font"])) {
                            $name = test_input($_POST["name"]);
                            $font = test_input($_POST["font"]);
                            $size = test_input($_POST["size"]);
                        }

                        function test_input($data) {
                            return $data;
                        }

                        ?>

                    <form action="" method="post">

                        <br><br>

                        <div>

                            <label style="color:orange">Enter Text: </label> <input type="text" name="name" placeholder="Enter Something">

                        </div><br><br>



                        <div>

                            <label class="control-label" style="color:orange;">Font Name :</label>

                            <select name="font" style="margin-left:14px; color:black;">

                                <option disabled selected value> -- select an option -- </option>
                                <option>Times New Roman</option>
                                <option>Arial</option>
                                <option>Verdana</option>
                                <option>Georgia</option>
                                <option>Impact</option>

                            </select>

                        </div><br><br>



                        <input type="submit" name="submit" value="Submit">  

                    </form>

                    <?php

                        echo "<br>";
                        echo "<h2 style='color:orange'>OUTPUT:</h2>";
                        echo '<p style="font-family:'.$font.';font-size:'.$size.';">'.$name.'</p>';


                    ?>

                </body>
             </html>