HTML表单提交按钮失效：点击后无法跳转至感谢页如何解决？

嘿，我帮你找出几个导致点击按钮无法跳转感谢页的问题啦，咱们一个个拆解：

• 表单嵌套违规：你在页面里嵌套了两个<form>标签（最外层一个空form，里面又包裹了class为signin的form），HTML规范明确禁止表单嵌套，这会让浏览器无法正确识别表单的提交逻辑。
• form标签错误使用href属性：<form>标签本身没有href属性，要指定表单提交后的跳转页面，需要使用action属性来设置目标页面地址。
• 按钮与链接的逻辑冲突+拼写错误：你的按钮文字写成了“Sigh me up!”（正确拼写是Sign），同时还在按钮旁放了一个<a>标签的跳转链接，既容易让用户混淆，也没有利用表单的提交机制来完成跳转。
• 重复ID问题：你给<label>和对应的<input>设置了相同的ID（比如fname、lname、email），ID在页面中必须唯一，这会影响表单元素的关联逻辑。

修正后的代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Startup Page</title>
    <link rel="stylesheet" href="MyLandingPage.css">
    <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 移除外层多余的form标签 -->
    <h1>Welcome to the Landing Page</h1>
    <h3>We're a start-up that changes world</h3>
    <p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h3>Sign up for our upcoming launch!</h3>
    <!-- 给form设置action属性，指定跳转地址 -->
    <form class="signin" action="MyLanding_ThanksPage.html" method="get">
        <!-- 修改label的for属性，与input的ID对应，保证唯一 -->
        <label for="fname">First Name:</label>
        <input id="fname" type="text" required>
        <br>
        <label for="lname">Last Name:</label>
        <input id="lname" type="text" required>
        <br>
        <label for="email">Email:</label>
        <span><input id="email" type="email" required></span>
        <br>
        <!-- 修正按钮文字，默认submit类型会触发表单提交 -->
        <button class="signin" type="submit">Sign me up!</button>
    </form>
</body>
</html>

修正说明 #

1. 移除了外层多余的<form>标签，避免嵌套问题；
2. 给表单添加了action="MyLanding_ThanksPage.html"，指定提交后跳转的页面；
3. 修正了按钮的拼写错误，保留按钮的默认submit类型，点击时会触发表单提交并跳转；
4. 修改了<label>的for属性，与对应<input>的ID匹配，保证ID唯一性，同时提升表单的可访问性。

这样调整后，当用户填完所有必填信息并点击按钮，就能正常跳转到感谢页啦。

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