使用 Github 的 HTML 表单

问题描述 投票:0回答:1

我正在尝试在 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,它对我有用。

html forms github button repository
1个回答
0
投票

您面临的问题可能是由于您的网站在 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。

© www.soinside.com 2019 - 2024. All rights reserved.