HTML Button 在点击时丢失 URL 信息

Question

这与我们的 A-Z 数据库有关，该数据库使用 EZproxy 链接来访问图书馆的订阅数据库。 如果用户单击按钮的边缘而不是直接单击文本，则初始 URL 来自 https://nyit.idm.oclc.org/login?url=https://search.proquest.com/abicomplete?accountid=12917 到 https://nyit.idm.oclc.org/login 这破坏了用户体验，因此他们永远无法访问数据库。他们转而进入 EZproxy 登陆页面。 如何修复我的 html 代码以免发生这种情况？

    <section class="ftco-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="popover-header">
                    <h2 class="heading-section">Login to access library resources.</h2>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="row ""col-md-7 col-lg-5">
                    <div class="login-wrap p-4 p-md-5">
                <div class="align-items-center justify-content-center">
                    <img src="public/logo.png" title="Proxy Login" alt="Proxy Login">
                </div>
                <form action="/login" class="login-form" method="post">
                <div class="form-group">
                    <button class="form-control btn-primary rounded px-3"><a href="http://nyit.idm.oclc.org:80/login?auth=shib&url=^U" style="color: #ffffff">Login with Okta Verify</a></button>
                </div>
                 <div class="form-group">
                    <button class="form-control btn-primary rounded px-3">
                    <p><a href="http://nyit.idm.oclc.org:80/login?auth=textfile&url=^U" style="color: #ffffff">Login as a Guest.</a></p>
                    <p>&nbsp;</p>
                 </div></form>
        </div>
            </div>
        </div>
    </div>
        <div class="row justify-content-center">
            <div class="popover-footer"><a href="https://www.nyit.edu/policies/privacy_statement" target="_blank">Privacy Statement</a>
            </div>
        </div>
    </section>

Answer 1

如果用户单击 [...] 按钮 [...] 初始 URL 将 [...] 变为 https://nyit.idm.oclc.org/login

查看您的表单操作：

<form action="/login" class="login-form" method="post">

当您单击按钮提交表单时，用户将导航到该表单的操作 URL。在本例中，URL 为

/login

。

您混淆了链接和表单按钮。这不仅非常不直观，而且是无效的 HTML。选择其中之一。

在这种情况下，听起来您只想使用链接。如果您不想提交该表单，请不要使用表单或按钮。例如：

<div class="form-group">
  <a href="http://nyit.idm.oclc.org:80/login?auth=shib&url=^U" style="color: #ffffff">Login with Okta Verify</a>
</div>
<div class="form-group">
  <p><a href="http://nyit.idm.oclc.org:80/login?auth=textfile&url=^U" style="color: #ffffff">Login as a Guest.</a></p>
  <p>&nbsp;</p>
</div>

没有表格，没有按钮，没有混乱。 （我还建议不要使用

<p>&nbsp;</p>

进行布局。使用 CSS 来设置布局样式，而不是不必要的 HTML 元素。）

如果您希望链接看起来像按钮，请将它们设置为看起来像按钮。但如果您不想使用按钮或表单，请不要将它们包装在实际的按钮、实际的表单中。