【发布时间】：2019-08-10 06:29:42
【问题描述】：
我正在网站上创建用户登录/注册表单，并且我正在使用无线电输入来显示登录表单或注册表单。加载页面后，它默认为登录表单。如果单击底部的注册链接（实际上是输入标签），它将隐藏登录表单并将其替换为注册表单。这部分工作正常。
问题是当您在注册表单上并单击表单底部的登录链接（同样是输入标签）时，它会停留在注册表单上。我使用了浏览器代码检查器，即使显示注册表单，它也会继续将登录列为已检查。
这里是css 和html：
article {
&#portofentry {
>div {
&.container {
>input {
&[type="radio"] {
display: none;
}
&[name="login"] {
&:checked {
~div {
&.container {
>form {
&[name="loginForm"] {
display: block;
}
&[name="registerForm"] {
display: none;
}
}
&.links {
>div {
&.login {
display: none;
}
&.register,
&.forgot {
display: block;
margin-top: 0;
}
}
}
}
}
}
}
&[name="register"] {
&:checked {
~div {
&.container {
>form {
&[name="registerForm"] {
display: block;
}
&[name="loginForm"] {
display: none;
}
}
&.links {
>div {
&.register,
&.forgot {
display: none;
}
&.login {
display: block;
}
}
}
}
}
}
}
}
>div {
&.container {
>form {
display: none;
>div {
&::after {
content: '';
display: table;
clear: both;
}
>div {
&.vDivide {
position: absolute;
left: 50%;
transform: translate(-50%);
border: 1px solid $light-grey;
height: 17.5rem;
@media only screen and (min-width: 120em) {
height: 26rem;
}
@media only screen and (min-width: 135em) {
height: 34.17rem;
}
>span {
&.vDivideText {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
background-color: $faint-navy;
border: 1px solid $light-grey;
border-radius: 50%;
padding: .8rem 1rem;
color: $off-white;
text-transform: uppercase;
}
}
}
&.full {
&.half {
>button,
>input {
width: calc(100% - 4rem);
display: inline-block;
margin: 1rem;
}
&:nth-of-type(3) {
>button,
>input {
margin: 1rem 1rem 1rem 3rem;
}
}
}
}
>input {
&[type="text"],
&[type="password"] {
margin: 2rem;
padding: 1.5rem;
width: calc(100% - 4rem);
}
}
>label {
color: $grey;
margin-left: 3.5rem;
font-weight: 300;
@media only screen and (min-width: 120em) {
font-size: 3rem;
}
>input {
&[type="date"] {
padding: 1.5rem;
width: auto;
background: none;
border: none;
border-radius: .5rem;
border-right: 1px solid $light-grey;
border-left: 1px solid $light-grey;
text-decoration: none;
margin: 0 auto;
@media only screen and (min-width: 75em) {
font-size: 3rem;
font-weight: 300;
padding: 1.5rem;
}
&:hover {
box-shadow: 0 0 1rem rgba($faint-navy, .5);
background: none;
}
&:focus {
box-shadow: 0 0 1rem rgba($faint-navy, 1);
background: none;
}
}
}
}
>p {
text-align: center;
}
>button {
margin: 2rem;
width: calc(100% - 4rem);
}
}
}
}
&.links {
background: $faint-grey;
margin: 2rem;
padding: 1.5rem;
width: calc(100% - 4rem);
border-radius: 0 0 .5rem .5rem;
>div {
text-align: center;
>label {
cursor: pointer;
}
}
}
}
}
}
}
}
}<article id="portofentry">
<div class="container">
<input type="radio" name="login" id="login" checked>
<input type="radio" name="register" id="register">
<div class="container">
<form action="/members/admit.php" name="loginForm">
<div>
<h2>Login</h2>
<h6>welcome back</h6>
<div class="vDivide">
<span class="vDivideText">or</span>
</div>
<div class="full half">
<button type="button" class="google">
<i class="fab fa-google"></i> Login with Google
</button>
<button type="button" class="facebook">
<i class="fab fa-facebook-f"></i> Login with Facebook
</button>
<button type="button" class="linkedin">
<i class="fab fa-linkedin-in"></i> Login with LinkedIn
</button>
<button type="button" class="twitter">
<i class="fab fa-twitter"></i> Login with Twitter
</button>
</div>
<div class="full half">
<div class="mob">
<p>Sign in manually</p>
</div>
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit" name="loginNow">Login</button>
</div>
</div>
</form>
<form action="/members/register/" name="registerForm">
<div>
<h2>Register</h2>
<h6>welcome</h6>
<div>
<input type="text" name="firstname" placeholder="First Name" required>
<input type="text" name="lastname" placeholder="Last Name" required>
<input type="text" name="email" placeholder="Email" required>
<label for="dob">Date of Birth:
<input type="date" name="dob" id="dob" placeholder="Date of Birth" required>
</label>
<input type="password" name="password" placeholder="Password" required>
<input type="password" name="passwordconfirm" placeholder="Confirm Password" required>
<p>By creating an account you agree to our <a href="/legal/terms-of-use/">Terms & Privacy</a>.</p>
<button type="submit" name="registerNow">Register</button>
</div>
</div>
</form>
</div>
<div class="container links">
<div class="full half register">
<label for="register">Register</label>
</div>
<div class="full half forgot">
<a href="#">Forgot password?</a>
</div>
<div class="login">
Already have an account? <label for="login">Login</label>
</div>
</div>
</div>
</article>两个输入都有ids，我知道它们都可以工作，因为它在加载时默认为一个，我可以单击另一个使其出现。单击登录标签时，我无法让它返回登录屏幕。
我在这里遗漏了什么或做错了什么？
【问题讨论】：
标签： html css forms radio-button