Creating Login Page for a website

Question

I am fairly new to web design so please bear with my lack of knowledge and possible stupid questions. I am trying to create a login page as shown below.

I have placed the Username and Password form inside a div element which I have centred on the page. However, I haven't managed to centre the Username and Password field correctly inside this div element. I tried to place form by centering it relative to the div element in the middle of the page and placing the login to the bottom right corner however, it still doesn't work. Further, I am not able to correctly place The header "SampleWebPage" in its correct place.

Here's the CSS and HTML code for the centred div class inside which the form is placed.

.login_div {

    width: 300px;
    height: 300px;

    /* Center form on page horizontally & vertically */
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
}

<html>
 <head>
  <title>Login Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="{{ url_for('static', filename='login.css') }}">
 </head>
<body>
 <div class = "login_div">
  
 <form action="" method = "post" class="login_form">
  Username:
  <input type="text" name="username" value="{{
          request.form.username }}">
 <br>
  Password:&nbsp; 
  <input type="password" name="password" value="{{
          request.form.password }}">
 <br>
  <input class="btn btn-default" type="submit" value="Login">
  </form>
  </div>
   
   
</body>
</html>

I'm sorry if this is a very broad question, however I require help getting this webpage to work correctly.

Thanks.

Use your browser's debugging tools. Like "Inspect Element" when you right click. You should be able to navigate through DOM and see the elements and their respective rendered CSS. — Sunny Patel, Aug 08 '18 at 15:52
Possible duplicate of [How to center an element horizontally and vertically?](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — Sunny Patel, Aug 08 '18 at 15:58

Simranjit Singh · Answer 1 · 2018-08-09T03:43:58.013

3

You can use flexbox:

.login_div {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row {
  padding: 10px;
}
.row.submit {
  text-align: right;
}

<head>
  <title>Login Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="{{ url_for('static', filename='login.css') }}">
</head>

<body>
  <div class="login_div">
    <form action="" method="post" class="login_form">
      <div class="row">
        <label>Username:
        <input type="text" name="username" value="{{request.form.username}}">
      </label>
      </div>
      <div class="row">
        <label> Password:
        <input type="password" name="password" value="{{request.form.password }}">
      </label>
      </div>
      <div class="row submit">
      <input class="btn btn-default" type="submit" value="Login">
      </div>
    </form>
  </div>


</body>

edited Aug 09 '18 at 03:43

answered Aug 08 '18 at 16:33

Simranjit Singh

384
1
6

Thanks. Now how can I place the login as shown in the image I posted? – Samarth Upadhyaya Aug 09 '18 at 00:48
The code above is how to place the login in the center of the page. All you have to do is style the inputs with css and add a background image to the body – Simranjit Singh Aug 09 '18 at 02:36
I have managed to place the login in the centre of the page. However, I am not able to place the login submit button in the correct place I want to as shown in the picture I uploaded – Samarth Upadhyaya Aug 09 '18 at 03:09
I've updated the snippet in the answer above for this. – Simranjit Singh Aug 09 '18 at 03:44
Please read [answer] and [edit] your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post. – Adriaan Aug 16 '23 at 07:44

Creating Login Page for a website

1 Answers1