嗨，作为大一新生能自己动手写表单尝试功能，已经超棒啦！你的需求是点击按钮后跳转到输入框里填写的目标页面对吧？咱们来调整你的代码实现这个功能～

首先得说明：纯HTML没法实现动态获取输入框内容作为跳转地址（因为form的action属性是固定值），所以咱们需要借助一点点JavaScript来完成这个逻辑。下面给你两种常用的实现方式：

方式一：用普通按钮触发跳转 #

这种方式更直观，避免表单默认提交行为的干扰：

<form id="jumpForm">
  <!-- 保留你的隐藏输入 -->
  <input type="hidden" name="a_hidden_input"/>
  <!-- 给文本输入框添加id（方便JS获取值）和提示文本 -->
  <input type="text" id="targetUrl" name="a_text_input" placeholder="请输入要跳转的URL，比如https://example.com"/>
  <!-- 用普通按钮替代submit，绑定点击事件 -->
  <button type="button" onclick="jumpToTargetUrl()">跳转</button>
</form>

<script>
function jumpToTargetUrl() {
  // 获取输入框中的URL并去除首尾空格
  const inputUrl = document.getElementById('targetUrl').value.trim();
  
  // 简单校验输入是否有效
  if (!inputUrl) {
    alert('请输入有效的URL地址哦！');
    return;
  }
  
  // 自动补全http/https前缀（避免用户只输入域名导致跳转错误）
  const fullUrl = inputUrl.startsWith('http') ? inputUrl : `https://${inputUrl}`;
  
  // 执行跳转
  window.location.href = fullUrl;
}
</script>

代码解释： #

• 给文本输入框添加id="targetUrl"，让JS能精准定位到这个输入框获取内容
• 把原submit按钮改成type="button"的普通按钮，这样点击时不会触发表单默认的提交刷新行为
• JS函数里做了两步关键处理：
  1. 校验输入是否为空，为空就弹出提示
  2. 自动补全URL前缀，防止用户只输入example.com时，浏览器误跳转到当前网站的/example.com路径
• window.location.href = fullUrl是实现页面跳转的核心代码

方式二：保留submit按钮，阻止默认提交行为 #

如果你想保留原表单的submit按钮样式，可以通过阻止表单默认提交行为来实现跳转：

<form id="jumpForm" onsubmit="return handleFormSubmit(event)">
  <input type="hidden" name="a_hidden_input"/>
  <input type="text" id="targetUrl" name="a_text_input" placeholder="请输入要跳转的URL"/>
  <input type="submit" value="跳转"/>
</form>

<script>
function handleFormSubmit(event) {
  // 阻止表单默认的提交刷新行为
  event.preventDefault();
  
  const inputUrl = document.getElementById('targetUrl').value.trim();
  if (!inputUrl) {
    alert('请输入有效的URL地址！');
    return false;
  }
  
  const fullUrl = inputUrl.startsWith('http') ? inputUrl : `https://${inputUrl}`;
  window.location.href = fullUrl;
}
</script>

代码解释： #

• 给表单绑定onsubmit事件，通过event.preventDefault()阻止表单默认提交
• 后续的URL校验和跳转逻辑和方式一完全一致

刚接触前端的话，多尝试这类小功能能快速熟悉HTML和JS的配合哦～

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