this html code looks like this    Login

Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
icon
Related questions
Question
this html code looks like this 
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
form{
display: flex;
flex-direction: column;
width: 300px;
justify-content: space-evenly;
margin: auto;
}
h2{
     position: fixed;
     width: 350px;
     height: 300px;
     top: 50%;
     left: 50%;
     margin-top: -150px;
     margin-left: -175px;
     background: #07A8C3;
     padding-top: 10px;
}

 

</style>
<script type="application/javascript">
function validate() {
{{!-- var data = new FormData(); --}}
const data = new URLSearchParams();
data.append('name', document.getElementById("name").value);
data.append("password", document.getElementById("password").value);
var params = { name: document.getElementById("name").value, password: document.getElementById("password").value };
var request = new XMLHttpRequest();
request.open("POST", "/api/login");
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onload = function () {
var result = JSON.parse(request.response);
if (result.status === "y") {
window.location.href = "/index";
} else {
alert(result.meg);
}
};
{{!-- request.send(JSON.stringify(params)); --}}
request.send(data.toString());
}

 

</script>
<h2>Login</h2>
<form action="index.hbs" method="POST">

 

<label for="">User Name:</label>>
<li class="list-group-item"><input class="form-control" type="text" name="name" id="name" placeholder="enter account" /></li>
<li class="list-group-item"><input class="form-control" type="text" name="password" id="password" placeholder="enter password" /></li>
<li class="list-group-item"><button type="button" class="btn btn-block btn-danger" onclick="validate()" id="btnLogin">login</button></li>
</ul>
</div>
</div>
</body>
</html>
============
how could I change the logininput box ,change it box into the middle green  box in the middle .
User Name:
enter account
enter password
login
Login
Transcribed Image Text:User Name: enter account enter password login Login
Expert Solution
steps

Step by step

Solved in 2 steps with 3 images

Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY