I am currently working on developing a basic login webpage, but I am facing issues with the rendering of the page.
Below is the code I am using:
function logIn(username, password){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username == "a" && password == "a"){
window.location.href="awesomePage.html";
}else{
alert("Incorrect username or password!");
}
}#user {
position: absolute;
top: 10px;
left: 5px;
}
#pass {
position: absolute;
top: 40px;
left: 7.5px;
}
#username {
position: absolute;
top: 5px;
left: 40px;
}
#password {
position: absolute;
top: 20px;
left: 40px;
}
#logIn {
position: absolute;
top: 75px;
left: 80px;
}<form action="javascript:logIn(username, password);" method="post">
<div id="user"> Username: </div>
<div id="username">
<input type="text" id="username" placeholder="Enter username here." />
</div>
<div id="pass"> Password: </div>
<div id="password">
<input type="password" id="password" placeholder="Enter password here." />
</div>
<div id="logIn">
<input type="button" value="Log In" onClick="javascript:logIn(username, password);"/>
</div>
</form>Prior to my changes, after entering a for both username and password and clicking log in, I received an alert message stating: Incorrect username or password.
https://i.sstatic.net/h8dz1.png
In an attempt to resolve the issue, I made the following HTML adjustment:
<div id="un"> <input type="text" id="username" placeholder="Enter username here." /> </div>
<div id="pw"> <input type="password" id="password" placeholder="Enter password here." /> </div>
Consequently, I updated the CSS as follows:
#un {
position: absolute;
top: 5px;
left: 40px;
}
#pw {
position: absolute;
top: 20px;
left: 40px;
}
After making these changes, upon entering a for both username and password, I was successfully redirected to awesomePage.html, however, the input fields were positioned incorrectly.
https://i.sstatic.net/nHJMu.png
My query is: How can I rectify this issue?
Additionally, I have a minor inquiry: Should I name my other pages as awesomePage.html or awesome_page.html, or is Awesome Page.html suitable?