Question posted in 
I have input fields I created with HTML and when I run the page I cannot enter data in to the text boxes. I tried disabled=false but it did not work. The input fields I’m having problems with are email and password. I also placed the input fields in to a form. I also placed the input text boxes inside a div. Will this affect the program? Please help. Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#menu,
#footer-menu {
text-align: center;
}
nav {
margin: auto;
line-height: 60px;
}
header {
margin: -8px;
position: sticky;
top: 0;
height: 75px;
background-color: antiquewhite;
}
a {
margin: auto;
text-decoration: none;
font-size: 24px;
color: black;
}
footer {
position: absolute;
bottom: 0;
height: 75px;
width: 100%;
background-color: antiquewhite;
}
div#center {
text-align: center;
}
input {
margin: .1rem;
}
#label {
position: relative;
top: 73px;
left: 35%;
}
div#label {
margin-top: .7rem;
font-weight: bold;
padding-top: .9rem;
font-size: 18px;
}
h2 {
text-align: center;
}
#register {
display: inline;
color: blue;
text-decoration: underline;
}
#logbtn {
position: absolute;
width: 75px;
height: 25px;
background-color: green;
display: inline;
border-radius: 5px;
left: 51%;
color: white;
}
input[type=submit] {
position: absolute;
width: 75px;
height: 25px;
background-color: green;
display: inline;
border-radius: 5px;
left: 51%;
color: white;
}
#account {
text-align: center;
color: blue;
text-decoration: underline;
}
#logo {
float: left;
}
</style>
</head>
<body>
<header><img src="logo.jpg" style="height: 75px; width: 75px;" id="logo">
<div id="menu">
<nav>
<a href="index.html">Home|</a>
<a href="math-facts.html">Games|</a>
<a href="about.html">About|</a>
<a href="login.html">Login</a>
</nav>
</div>
</header>
<form id="forma">
<h2 id="h2">Log in</h2>
<div id="label">
<div>Email:</div>
<div>Password:</div>
<p id="register">Need an account? Register</p>
</div>
<!-- <form id="forma"> -->
<div id="center">
<!-- <label for="email">Email:</label> -->
<input name="email" type="email" id="email"><br>
<!-- <label for="password">Password:</label> -->
<input type="password" id="password"><br><br>
<input type="submit" value="Log in" id="sublogin"><br>
</div>
</form>
<form id="formb">
<h2 id="h2">Register</h2>
<div id="label">
<div>Email:</div>
<div>Password:</div>
<div>Repeat Password:</div>
</div>
<div id="center">
<!-- <label for="email">Email:</label> -->
<input name="email" type="email" id="email"><br>
<!-- <label for="password">Password:</label> -->
<input type="password" id="password"><br>
<!-- <label for="password2">Repeat Password:</label> -->
<input type="password" id="password2" name="password2"><br>
<input type="checkbox" id="over"><label for="over">I am over 13 and like playing games.</label><br><br>
<input type="submit" value="Register" id="subregister"><br>
</div>
<p id="account">Have an account? Log in</p>
</form>
<footer>
<hr>
<div id="footer-menu">
<nav>
<a href="contact-us.html"><img src="icon-contact-us.png"></a>
<a href="https://instagram.com"><img src="icon-instagram.png"></a>
<a href="https://twitter.com"><img src="icon-twitter.png"></a>
<a href="https://facebook.com"><img src="icon-facebook.png"></a>
</nav>
</div>
</footer>
<script>
window.addEventListener("load", function () { document.getElementById("formb").style.display = "none" });
const register = document.getElementById("register");
const login = document.getElementById("forma")
register.addEventListener("click", function () {
document.getElementById("forma").style.display = "none";
document.getElementById("formb").style.display = "block";
});
const account = document.getElementById("account");
account.addEventListener("click", function () {
document.getElementById("formb").style.display = "none";
document.getElementById("forma").style.display = "block";
});
const sublogin = document.getElementById("sublogin");
sublogin.addEventListener("click", function () {
alert("Form submitted")
})
const subregister = document.getElementById("subregister");
subregister.addEventListener("click", function () {
alert("Form submitted")
})
document.getElementById("forma").setAttribute("disabled", false);
</script>
</body>
</html>
2
Answers
You have placed the labels above the inputs. Here’s a quick fix:
This is what I changed:
I have changed
leftto move it to the leftmost position and decreasedwidthto30%. You can of course adjust this further, but this should be a good start.Your text inputs appear to be completely covered by their labels, that’s why you cannot click and edit values. You can see it by using Chrome developer tools.
One way to resolve this is to remove the div with id="label" and uncomment the labels inside the form.