如何基于HTML用户输入拼接URL，实现跳转至google.com/输入A+输入B+输入C

静态HTML无法直接读取输入框内容并拼接到链接中，需要搭配JavaScript实现该需求，同时原代码存在HTML结构语法错误，需同步修正。

完整调整后代码 #

<html>
<head>
<title>URL拼接测试</title>
<script>
// 动态更新跳转链接
function updateLink() {
    const baseUrl = "https://www.google.com/";
    // 获取三个输入框的值并做编码处理，避免特殊字符破坏URL结构
    const inputA = encodeURIComponent(document.getElementById("ina").value.trim());
    const inputB = encodeURIComponent(document.getElementById("inb").value.trim());
    const inputC = encodeURIComponent(document.getElementById("inc").value.trim());
    // 按要求拼接为 google.com/a+b+c 格式
    const targetUrl = baseUrl + [inputA, inputB, inputC].join("+");
    // 赋值给提交链接
    document.getElementById("submitLink").href = targetUrl;
}
</script>
</head>
<body>
    <label for="ina">Input A:</label><br>
    <input type="text" id="ina" name="ina" oninput="updateLink()"><br><br>
    <label for="inb">Input B:</label><br>
    <input type="text" id="inb" name="inb" oninput="updateLink()"><br><br>
    <label for="inc">Input C:</label><br>
    <input type="text" id="inc" name="inc" oninput="updateLink()"><br><br>
    <a id="submitLink" href="https://www.google.com" target="_blank">Submit</a>
</body>
</html>

关键修改说明 #

• 修正了原代码的HTML结构错误：调整了<head>和<body>的嵌套关系，符合HTML语法规范
• 新增了JavaScript逻辑：读取三个输入框的用户输入，使用encodeURIComponent对输入内容编码，避免特殊字符导致URL异常，再按要求用+拼接三个输入值，生成最终目标URL
• 给三个输入框绑定了input事件，用户每次输入内容时都会自动更新提交链接的跳转地址
• 如果需要做空输入校验，可在updateLink函数中添加判断逻辑，输入不全时禁用跳转或提示用户补充内容

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