加三个多选按钮，一个单选按钮

发布于 2024-02-19 14:35:21

在前端的表单中添加三个多选按钮和一个单选按钮的代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>POST提交案例</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h2>POST提交案例</h2>
        <form method="POST">
            <div class="mb-3">
                <label for="name" class="form-label">姓名</label>
                <input type="text" class="form-control" id="name" name="name">
            </div>
            <div class="mb-3">
                <label for="message1" class="form-label">留言1</label>
                <textarea class="form-control" id="message1" name="message1" rows="3"></textarea>
            </div>
            <div class="mb-3">
                <label for="message2" class="form-label">留言2</label>
                <textarea class="form-control" id="message2" name="message2" rows="3"></textarea>
            </div>
            <div class="mb-3">
                <label for="checkboxes" class="form-label">多选项</label><br>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="option1" name="options[]" value="Option 1">
                    <label class="form-check-label" for="option1">选项1</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="option2" name="options[]" value="Option 2">
                    <label class="form-check-label" for="option2">选项2</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="option3" name="options[]" value="Option 3">
                    <label class="form-check-label" for="option3">选项3</label>
                </div>
            </div>
            <div class="mb-3">
                <label for="radio" class="form-label">单选项</label><br>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="radio" id="radio1" value="Radio 1">
                    <label class="form-check-label" for="radio1">单选1</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="radio" id="radio2" value="Radio 2">
                    <label class="form-check-label" for="radio2">单选2</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="radio" id="radio3" value="Radio 3">
                    <label class="form-check-label" for="radio3">单选3</label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
            <button type="button" class="btn btn-secondary" onclick="clearForm()">清空</button>
        </form>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        function clearForm() {
            $("form")[0].reset();
        }
    </script>

    <?php
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // 获取POST提交的数据
        $name = $_POST["name"];
        $message1 = $_POST["message1"];
        $message2 = $_POST["message2"];
        $options = implode(", ", $_POST["options"]);
        $radio = $_POST["radio"];

        // 在这里可以对数据进行处理，如存入数据库等

        // 显示提交成功提示
        echo "<script>alert('提交成功');</script>";
    }
    ?>
</body>
</html>

在以上代码中，我们在表单中添加了一个多选项的<div>，其中包含了三个多选按钮，通过name="options[]"实现多选项的处理。同时，我们还添加了一个单选项的<div>，其中包含了三个单选按钮，通过name="radio"指定了单选项的名称。

当用户提交表单时，后端代码会获取到多选项和单选项的值，并在处理数据时将多选项的值使用implode()函数转换为字符串。

请确保服务器环境支持PHP，并且已经安装了必要的库和扩展。