PHP单选按钮选中为真时无法正常加载显示外部PHP文件问题

当前代码无法按选中结果加载对应文件，核心问题有3个：

• 单选按钮没有放在设置了method="post"的<form>容器内，选中的值根本不会被提交到后端
• 代码没有判断$_POST['type']是否存在，首次加载页面时$_POST为空，会直接触发PHP未定义数组键警告，匹配逻辑完全不生效
• 现有代码仅写了value="tea"的单选项，咖啡、冷萃等其他类别的单选按钮缺失，无法选中对应值触发匹配

1. 补全表单结构与所有选项，把所有单选按钮包裹在POST表单内，添加提交触发元素

<form method="POST" action="">
    <label>
        <input type="radio" name="type" value="coffee">
        <img src="img/coffee.gif" class="image-button" alt="Coffee recipe">
    </label>
    <label>
        <input type="radio" name="type" value="specialityCoffee">
        <img src="img/speciality-coffee.gif" class="image-button" alt="Speciality coffee recipe">
    </label>
    <label>
        <input type="radio" name="type" value="coldDrip">
        <img src="img/cold-drip.gif" class="image-button" alt="Cold drip recipe">
    </label>
    <label>
        <input type="radio" name="type" value="tea">
        <img src="img/tea.gif" class="image-button" alt="Tea recipe">
    </label>
    <button type="submit">进入配方填写页</button>
</form>

2. 调整PHP判断逻辑，先校验参数存在性再做文件引入，同时做映射匹配避免非法路径传入

<?php
if (isset($_POST['type'])) {
    $selectedType = $_POST['type'];
    $allowedFiles = [
        'coffee' => 'inc/coffee.php',
        'specialityCoffee' => 'inc/speciality-coffee.php',
        'coldDrip' => 'inc/cold-drip.php',
        'tea' => 'inc/tea.php'
    ];
    if (array_key_exists($selectedType, $allowedFiles)) {
        include $allowedFiles[$selectedType];
    }
}
?>

如果需要用户选中单选后不用点按钮直接加载对应内容，可以加一段JS实现选中即提交：

document.querySelectorAll('input[name="type"]').forEach(radio => {
    radio.addEventListener('change', function() {
        this.closest('form').submit();
    });
});

内容的提问来源于stack exchange，提问作者Niels von Daake