Lo" />

Lo" />

Lo"/>

How to make the log in section can go in to an box?

25 Views Asked by At
<body>
...
<style>
   #box {
     width: 500px;
     height: 500px;
     border: 1px solid black;
   }
...
</style>
...
  <div class="Log-in">
    <div id="">
      <h1 id="center">Log in</h1>
      <div class="input-box">
        <input type="text" id="name" style="background-color: rgb(255, 255, 255); border-radius: 0px;" placeholder="Enter your name">
        <i class='bx bx-user' id="Center" style="float: right; left: 15px; top: 132px;"></i>
        <input type="password" id="password" style="background-color: rgb(255, 255, 255); border-radius: 0px; top: 130px;" placeholder="Enter your password">
        <i class='bx bx-lock-alt' id="Center" style="float: right; left: 15px; top: 111px;"></i>
      </div>
      <input type="submit" id="Center" style="width: 170px; top: 130px;" onclick="myFunction()" value="Submit">
      <label id="Center" style="height: auto; top: 130px;"><input type="checkbox">Remember me</label>
    </div>
  </div>
</body>

on here the box the the (css) code I made a box but the box is not go in the a log-in section so i wanted to that the box is boarded to the log-in section

log-in make it there has a box out the log-in section.

1

There are 1 best solutions below

0
Amaan warsi On

id which must be unique in the whole document. Its purpose is to identify the element when linking. You should use class attribute instead of using id with same value again and again. Your code is incomplete I suggest you learn about HTML Forms.

Here's an example of the usage of the form tag.

<form action="/log-in.html" method="POST">
    <div class="input-box">
        <input type="text" name="name" id="name" style="background-color: rgb(255, 255, 255); border-radius: 0px;"
            placeholder="Enter your name">
        <i class='bx bx-user' class="Center" style="float: right; left: 15px; top: 132px;"></i>
        <input type="password" name="password" id="password"
            style="background-color: rgb(255, 255, 255); border-radius: 0px; top: 130px;"
            placeholder="Enter your password">
        <i class='bx bx-lock-alt' class="Center" style="float: right; left: 15px; top: 111px;"></i>
    </div>
    <input type="submit" class="Center" style="width: 170px; top: 130px;" onclick="myFunction()" value="Submit">
    <label class="Center" style="height: auto; top: 130px;"><input type="checkbox" name="Remember">Remember me</label>
</form>

For your ease I would like you to refer you to w3schools HTML tutorial