The input element is missing a closing tag. This can be fixed by using:
<input type="hidden" id="redirectURL" name="redirectURL" placeholder="" value=<%=redirectURL%>>
Solution 1 :
Solution 2 :
You forgot to close the hidden input element.
Add an extra > just after value=<%=redirectURL%>.
Problem :
I have this HTML CSS combo to make a login form:
<!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;
}
Which produces this:
However, when I add an addition field to my html form (it’s hidden as it’s a redirect link and doesn’t need input from the user):
<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>
It causes everything below it (in this case the submit button) disappear taking it’s ‘hidden’ attributes.
How would this be fixed?
Comments
Comment posted by Nathan
oh…now I feel stupid, thought it was something more complex that I was somehow missing? But no, I’ve wasted 2 hours stuck on this when it was just a simple > -_- Thanks!
Comment posted by eol
Been there, mate – it happens to all of us 🙂
Comment posted by Nathan
just need a fresh eye hahah, I’ll mark it as the answer when it allows, cheers