如何用纯HTML实现选中单选按钮后跳转至指定学生信息页面

嘿，这个问题问得好！纯HTML下确实可以通过为每个学生单独设置<form>来实现需求，但有个关键细节需要明确：如果想共用页面底部的单个Submit按钮，仅靠HTML是无法完成的——因为HTML表单的跳转地址（action）是固定写死的，没办法根据选中的单选框动态改变。不过如果调整一下布局，给每个学生行配一个独立的提交按钮，纯HTML就能完美实现你的需求，下面是具体方案：

可行实现代码（每个学生单独设form） #

结合你提供的页面头部，完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Update Student Job Search Information</title>
</head>
<body>
    <h2>学生求职信息列表</h2>
    <table border="1" cellpadding="8" cellspacing="0">
        <thead>
            <tr>
                <th>选择</th>
                <th>姓名</th>
                <th>当前状态</th>
            </tr>
        </thead>
        <tbody>
            <!-- 学生1的独立表单 -->
            <tr>
                <td>
                    <form action="student-alice.html" method="get">
                        <input type="radio" name="selected-student" id="alice">
                        <label for="alice"></label>
                </td>
                <td>Alice Brown</td>
                <td>求职中</td>
                <td>
                        <button type="submit">查看详情</button>
                    </form>
                </td>
            </tr>
            <!-- 学生2的独立表单 -->
            <tr>
                <td>
                    <form action="student-bob.html" method="get">
                        <input type="radio" name="selected-student" id="bob">
                        <label for="bob"></label>
                </td>
                <td>Bob Wilson</td>
                <td>已拿到offer</td>
                <td>
                        <button type="submit">查看详情</button>
                    </form>
                </td>
            </tr>
            <!-- 可按此格式添加更多学生 -->
        </tbody>
    </table>
</body>
</html>

关键细节说明 #

• 每个学生对应独立form：每个<form>的action属性直接指向该学生的专属信息页面（比如student-alice.html），提交后直接跳转。
• 单选框分组：所有单选框的name属性设置为相同值（这里是selected-student），这样浏览器会将它们视为同一组，确保同一时间只能选中一个学生，符合你的交互需求。
• 提交按钮与form绑定：每个提交按钮属于当前行的form，点击后只会提交对应学生的表单，跳转到正确的页面。

关于“底部单个Submit按钮”的说明 #

如果一定要保留页面底部的单个Submit按钮，纯HTML无法实现动态跳转——因为HTML表单的action是静态的。这种情况下需要借助JavaScript来动态修改表单的跳转地址，示例代码如下（仅作补充，超出纯HTML范围）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Update Student Job Search Information</title>
    <script>
        function setStudentUrl() {
            const selectedRadio = document.querySelector('input[name="selected-student"]:checked');
            if (selectedRadio) {
                document.getElementById('student-form').action = selectedRadio.value;
            }
        }
    </script>
</head>
<body>
    <h2>学生求职信息列表</h2>
    <table border="1" cellpadding="8" cellspacing="0">
        <thead>
            <tr>
                <th>选择</th>
                <th>姓名</th>
                <th>当前状态</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="radio" name="selected-student" id="alice" value="student-alice.html" checked>
                    <label for="alice"></label>
                </td>
                <td>Alice Brown</td>
                <td>求职中</td>
            </tr>
            <tr>
                <td>
                    <input type="radio" name="selected-student" id="bob" value="student-bob.html">
                    <label for="bob"></label>
                </td>
                <td>Bob Wilson</td>
                <td>已拿到offer</td>
            </tr>
        </tbody>
    </table>

    <form id="student-form" method="get" onsubmit="setStudentUrl()">
        <button type="submit" style="margin-top: 20px;">查看选中学生详情</button>
    </form>
</body>
</html>

但既然你要求仅使用HTML，那优先推荐第一个每个学生单独设form的方案，完全符合纯HTML的要求，交互逻辑也清晰。

内容的提问来源于stack exchange，提问作者Elizabeth