HTML登录注册表单切换异常：点击创建账号双表单同时显示问题求助

问题原因 #

你代码里存在登录表单的标签闭合错误，直接导致隐藏规则不生效：

• id为login的表单开头多写了一个多余的</form>标签，原代码为 <form class="form form--hidden" id="login"></form>
• 这个多余的闭合标签直接将登录表单提前闭合，后续所有登录相关的标题、输入框、按钮等元素都不在form#login的标签范围内
• 当你切换到创建账号页给form#login加隐藏类时，只会隐藏那个空的表单标签，外部的登录内容不会被隐藏，所以两个表单内容会同时出现
• 反过来切换回登录页时，创建账号的所有内容都在自己的form#createAccount标签内，加隐藏类后可以正常隐藏，所以显示正常

修复方案 #

1. 删除form#login开标签后面多余的</form>，修改后代码为：

<form class="form  form--hidden" id="login">

修改后所有登录相关元素都会被包裹在登录表单内部，加隐藏类时可全部隐藏，切换逻辑就正常了。

2. 顺便修复两个不影响当前切换逻辑，但会导致后续功能异常的小问题：

• 你当前的HTML结构里<head>标签未闭合，所有的title、link资源都写在了head标签外，要把这些资源移到<head>和</head>内部
• 所有class属性里不要加CSS选择器的前缀点，比如<div class="form__message .form__message--error">要改成<div class="form__message form__message--error"，否则对应的样式不会生效

内容的提问来源于stack exchange，提问作者Robert Parslow