php - 通过选择以该名称存储在数据库 PHP/Html 中的图像，为单选按钮提供隐藏的文本值

Question

你好，知识渊博的堆栈溢出社区。我正在尝试完成以下任务：用户填写了这张快速表格，该表格的一部分是从单选按钮中选择一个团队吉祥物，他们的图像在第一张图片下方。然后在他们填写完所有必需的信息后，将其与吉祥物选择一起发送到数据库。这是我挣扎的地方，因为用户不应该像我以前那样知道图像文本名称，如果我在输入框中输入类似 vader.jpg 的内容，则会生成吉祥物图片，如您在第二张图片中看到的那样。

现在，我在stackoverflow上找到了另一个线程： 如何以表格形式制作选择 图像反过来会生成它们，正如您在第二张图片中再次看到的那样。

这是我可以在文本字段中放入 vader.jpg 作为示例的代码，并且将为该团队生成 Vader 的图像，而不是我尝试使用单选按钮执行的操作。

前：

            <div class="form-group">
                <label for="mascot">Mascot</label>
                <input type="text" name="mascot" id="mascot" class="gt-input"
                       value="<?php if($_SERVER['REQUEST_METHOD'] == 'POST') echo $mascot ?>">
            </div>

后：

           <div class="form-group">
                <label for="mascot">Mascot</label>
                <input type="radio" name='mascot' id="thing1"value="<?php if($_SERVER['REQUEST_METHOD'] == 'POST') echo $mascot ?>"/><label for="thing1"></label>
                <input type="radio" name='mascot' id="thing2"value="<?php if($_SERVER['REQUEST_METHOD'] == 'POST') echo $mascot ?>"/><label for="thing2"></label>
                <input type="radio" name='mascot' id="thing3"value="<?php if($_SERVER['REQUEST_METHOD'] == 'POST') echo $mascot ?>"/><label for="thing3"></label>
                <input type="radio" name='mascot' id="thing4"value="<?php if($_SERVER['REQUEST_METHOD'] == 'POST') echo $mascot ?>"/><label for="thing4"></label>
                <input type="radio" name='mascot' id="thing5"value="<?php if($_SERVER['REQUEST_METHOD'] == 'POST') echo $mascot ?>"/><label for="thing5"></label>
            </div>

CSS：

input[type=checkbox] {
    display:none;
}

input#thing1[type=radio] + label
{
    background-image: url("../images/empire.jpg");
    border-color: white;
    border-style: solid;
    height: 80px;
    width: 80px;
    display:inline-block;
    padding: 0 0 0 0px;

}
input#thing2[type=radio] + label
{
    background-image: url("../images/bb8.jpg");
    border-color: white;
    border-style: solid;
    height: 80px;
    width: 80px;
    display:inline-block;
    padding: 0 0 0 0px;
}
input#thing3[type=radio] + label
{
    background-image: url("../images/leia.jpg");
    border-color: white;
    border-style: solid;
    height: 80px;
    width: 80px;
    display:inline-block;
    padding: 0 0 0 0px;
}
input#thing4[type=radio] + label
{
    background-image: url("../images/ewok.jpg");
    border-color: white;
    border-style: solid;
    height: 80px;
    width: 80px;
    display:inline-block;
    padding: 0 0 0 0px;
}

input#thing5[type=radio] + label
{
    background-image: url("../images/kyloRen.jpg");
    border-color: white;
    border-style: solid;
    height: 80px;
    width: 80px;
    display:inline-block;
    padding: 0 0 0 0px;
}

如果有一个我不知道的解决方案，我感谢你为帮助我实现我需要完成的事情所做的努力。

标签： phphtmlcsssqlradio-button