我有这样的HTML CSS组合来制作一个登录表格。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hold your horses...</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="box" action="/users/login" method="POST">
<h1>Woah...</h1>
<h2>You'll need to be logged in to do that</h2>
<input type="text" id="username" name="username" placeholder="Username">
<input type="password" id="password" name="password" placeholder="Password">
<input type="submit" id="submit" name="" value="Login">
</form>
</body>
</html>
style. css:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #191919;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-weight: 500;
}
.box h2{
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
font-size: medium;
}
.box input[type = "text"],.box input[type = "password"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
font-family: 'Montserrat', sans-serif;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"], input[id = "submit"]{
border:0;
background: none;
display: block;
font-family: 'Montserrat', sans-serif;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover, input[id = "submit"]:hover{
background: #2ecc71;
}
产生的结果是这样的。
然而,当我在我的html表格中添加一个附加字段(它是隐藏的,因为它是一个重定向链接,不需要用户输入)。
<form class="box" action="/users/login" method="POST">
<h1>Woah...</h1>
<h2>You'll need to be logged in to do that</h2>
<input type="text" id="username" name="username" placeholder="Username">
<input type="password" id="password" name="password" placeholder="Password">
<input type="hidden" id="redirectURL" name="redirectURL" placeholder="" value=<%=redirectURL%> // <--- new line
<input type="submit" id="submit" name="" value="Login">
</form>
它会导致它下面的所有东西(在这种情况下,提交按钮)消失,并带有它的 "隐藏 "属性。
如何解决这个问题?
这个 input
元素缺少一个结束标签。这可以通过使用以下方法来解决。
<input type="hidden" id="redirectURL" name="redirectURL" placeholder="" value=<%=redirectURL%>>
你忘了关闭隐藏的输入元素。
添加一个额外的 >
刚刚 value=<%=redirectURL%>
.