使用 Github 的 HTML 表单

Question

我正在尝试在 github 上为我的俱乐部建立一个测试网站。我正在使用表单，并且尝试在 html 文件中创建一个虚拟登录表单，但每次我按下提交按钮时，它不会将我定向到 html 文件。我能做些什么？如果可能的话，我更喜欢不使用 javascript 来完成此操作

<form action="/studentinterface.html" method="post">
        <h1>Student Login</h1>
        <fieldset>
          <label for="email">Email</label>
          <input type="email" id="email" name="user_email" placeholder="[email protected]" value="" required>
          <label for="password">Password</label>
          <input type="password" id="password" name="user_password" placeholder="your password" value="" required>
</fieldset>
        <button class="cpoint" type="submit">Submit</button>
      </form>

登录图片登录后点击

我希望它打开我的interface.html 文件，但它无法检索它。如果我在地址栏中输入实际的 html，它对我有用。

Answer 1

您面临的问题可能是由于您的网站在 GitHub 上的托管方式所致。处理表单提交时，GitHub Pages 的行为与传统 Web 服务器不同。以下是不使用 JavaScript 修复此问题的方法：

1。杠杆形式方法（首选）：

将表单的方法属性更改为 GET。这会将表单数据附加到 URL 的问号 (?) 后面。 HTML

<form action="/studentinterface.html?message=success" method="get"></form>

说明：

通过使用 GET，浏览器会将表单数据作为键值对包含在 URL 中（例如，[email protected]&user_password=yourpassword）。这允许您的 Studentinterface.html 潜在地访问此数据（尽管出于安全原因受到限制）。

2。手动重定向（替代）：

如果使用 GET 不理想，您可以在当前的 HTML 文件中实现重定向。但是，这种方法不会将数据发送到下一页。 HTML

<form action="" method="post">
  <button class="cpoint" type="submit">Submit</button>
</form>

<script> // A small script snippet
  function redirectOnSubmit(event) {
    event.preventDefault(); // Prevent default form submission
    window.location.href = "/studentinterface.html"; // Redirect to desired page
  }
  document.querySelector("form").addEventListener("submit", redirectOnSubmit);
</script>

说明：

此方法使用一个小的 JavaScript 片段来拦截表单提交。它阻止默认行为，然后使用 window.location.href 将用户重定向到 Studentinterface.html。