HTML按钮点击边缘丢失URL信息问题及代码修复咨询

问题根源 #

点击登录按钮的边缘区域时，会触发表单的默认提交动作（跳转到/login），而非执行EZproxy链接的跳转，导致完整URL被截断，用户无法直接进入目标数据库。

错误原因 #

1. HTML规范不允许在<button>标签内嵌套<a>标签，这种写法会导致点击按钮非文本区域时，优先触发按钮的表单提交行为，而非链接跳转。
2. 第二个<button>标签未闭合，存在语法错误。
3. 表单的action="/login"会在按钮点击时触发默认提交，覆盖链接的跳转逻辑。

修复方案（推荐第一种） #

方案一：用链接模拟按钮样式（最规范） #

移除多余的<button>和表单提交逻辑，直接给<a>标签添加按钮类，让它呈现按钮外观，同时保证整个按钮区域点击都触发链接跳转：

<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>
                    <!-- 移除表单，直接使用带按钮样式的链接 -->
                    <div class="form-group">
                        <a href="http://nyit.idm.oclc.org:80/login?auth=shib&url=^U" class="form-control btn-primary rounded px-3" style="color: #ffffff; display: block; text-align: center; text-decoration: none;">Login with Okta Verify</a>
                    </div>
                    <div class="form-group">
                        <a href="http://nyit.idm.oclc.org:80/login?auth=textfile&url=^U" class="form-control btn-primary rounded px-3" style="color: #ffffff; display: block; text-align: center; text-decoration: none;">Login as a Guest.</a>
                    </div>
                </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>

方案二：保留按钮，修正表单逻辑 #

如果必须保留按钮结构，需要阻止按钮的默认提交行为，或者将按钮设置为非提交类型，并绑定跳转事件：

<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>
                    <!-- 移除表单action，避免默认提交 -->
                    <form class="login-form">
                        <div class="form-group">
                            <!-- 设置按钮类型为button，阻止默认提交，绑定跳转事件 -->
                            <button type="button" class="form-control btn-primary rounded px-3" onclick="window.location.href='http://nyit.idm.oclc.org:80/login?auth=shib&url=^U'">Login with Okta Verify</button>
                        </div>
                        <div class="form-group">
                            <!-- 修复未闭合的button标签，设置类型为button并绑定跳转 -->
                            <button type="button" class="form-control btn-primary rounded px-3" onclick="window.location.href='http://nyit.idm.oclc.org:80/login?auth=textfile&url=^U'">Login as a Guest.</button>
                        </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>

修改说明 #

• 方案一完全遵循HTML规范，通过样式让链接看起来像按钮，整个点击区域都会触发正确的EZproxy链接跳转，从根源解决问题。
• 方案二通过修改按钮类型和添加点击事件，避免触发表单默认提交，同时保留按钮结构。

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