Html - How do I make the "sign up" text at the top of the form?

Ari39sKindaDumb
December 6, 2023
230 views
5 votes
5 Answers

How do I make the "sign up" text at the top of the form and not at the center with the rest of the forms stuff?

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

* {
    font-family: "Lato", sans-serif;
    box-sizing: border-box;
}

body,html {
    margin: 0;
    padding: 0;
    background-color: #e1e1e1;
    height: 100%;
    width: 100%;
    background-image: url('https://yourimageshare.com/ib/C5pVRCrHGx.webp');
    background-size: cover;
}

.form-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form {
    display: flex;
    justify-content: center;
    align-self: center;
    flex-direction: column;
    background-color: #FFFFFF;
    width: 30%;
    height: 70%;
}

.title {
    font-size: 50px;
    text-align: center;
    margin: 0;
}

.input-container {
    width: 100%;
    justify-content: center;
}

.input-name {
    display: inline-block;
}

.input {
    width: 90%;
}

 <div class="form-container">
    <form action="" class="form">
      <h1 class="title">Sign up</h1>
      <div class="input-container">
      <input type="text" placeholder="First Name" class="input-name">
      <input type="text" placeholder="Last Name" class="input-name">
    </div>
      
      <div class="input-container">
      <input type="email" placeholder="Email" class="input">
    </div>

      <div class="input-container">
      <input type="password" placeholder="Password" class="input">
    </div>

      <input type="submit" value="Submit" class="submit-btn">
    </form>
    </div>

WHAT THE CURRENT RESULT LOOKS LIKE :

Please ask me for any more details that are needed.

Answers

- MePhew
- December 6, 2023 at 9:18 pm
- 0 votes
0
I’m not sure if this is what you mean but here you have the "Sign up" text centered above the form.

https://jsfiddle.net/MePhew/3s856e1L/12/

To achieve this you just have to move the title outside of the form element
```
<h1 class="title">Sign up</h1>
<div class="form-container">
...
```
In the JSFiddle example I also changed the title’s color to white so that it can be seen on top of your background
Login or Signup to reply.

Structure your code a little more so that you can understand how your question was resolved

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign Up Form</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

    * {
      font-family: "Lato", sans-serif;
      box-sizing: border-box;
    }

    body, html {
      margin: 0;
      padding: 0;
      background-color: #e1e1e1;
      height: 100%;
      width: 100%;
      background-image: url('https://yourimageshare.com/ib/C5pVRCrHGx.webp');
      background-size: cover;
    }

    .form-container {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .title-container {
      background-color: #FFFFFF;
      width: 30%;
      text-align: center;
      padding: 20px;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    }

    .title {
      font-size: 50px;
      margin: 0;
    }

    .form {
      display: flex;
      flex-direction: column;
      background-color: #FFFFFF;
      width: 30%;
      padding: 20px;
    }

    .input-container {
      display: flex;
      flex-direction: unset;
      align-items: center;
      margin-bottom: 15px;
    }

    .input, .input-name {
      width: 90%;
      margin-bottom: 10px;
    }

    .submit-btn {
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }

    .submit-btn:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <div class="form-container">
    <div class="title-container">
      <h1 class="title">Sign up</h1>
    </div>
    <form action="" class="form">
      <div class="input-container">
        <input type="text" placeholder="First Name" class="input-name">
        <input type="text" placeholder="Last Name" class="input-name">
      </div>
      
      <div class="input-container">
        <input type="email" placeholder="Email" class="input">
      </div>

      <div class="input-container">
        <input type="password" placeholder="Password" class="input">
      </div>

      <input type="submit" value="Submit" class="submit-btn">
    </form>
  </div>
</body>
</html>

So why is your title centered to begin with ?

This is happening because of the justify-content: center; property that centers everything including your title.

There are a lot of ways to achieve what you want, one of them is to wrap your inputs into a div and add the justify-content: space-between; to your form like this :

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

* {
    font-family: "Lato", sans-serif;
    box-sizing: border-box;
}

body,html {
    margin: 0;
    padding: 0;
    background-color: #e1e1e1;
    height: 100%;
    width: 100%;
    background-image: url('https://yourimageshare.com/ib/C5pVRCrHGx.webp');
    background-size: cover;
}

.form-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form {
    display: flex;
    justify-content: center;
    align-self: center;
    flex-direction: column;
    background-color: #FFFFFF;
    justify-content: space-between;
    width: 30%;
    height: 70%;
}

.title {
    font-size: 50px;
    text-align: center;
    margin: 0;
}

.input-container {
    width: 100%;
    justify-content: center;
}

.input-name {
    display: inline-block;
}

.input {
    width: 90%;
}

<div class="form-container">
    <form action="" class="form">
      <h1 class="title">Sign up</h1>
      
      <div>
      <div class="input-container">
        <input type="text" placeholder="First Name" class="input-name">
        <input type="text" placeholder="Last Name" class="input-name">
      </div>
      
      <div class="input-container">
        <input type="email" placeholder="Email" class="input">
      </div>

      <div class="input-container">
        <input type="password" placeholder="Password" class="input">
      </div>
      </div>
      
      <input type="submit" value="Submit" class="submit-btn">
    </form>
    </div>

If you don’t want your button to be displayed at the bottom of the form you can for example wrap everything but the title inside an element (I chose to use <div class="main-content">)
And then you can change your form CSS into justify-content: space-around;

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

* {
    font-family: "Lato", sans-serif;
    box-sizing: border-box;
}

body,html {
    margin: 0;
    padding: 0;
    background-color: #e1e1e1;
    height: 100%;
    width: 100%;
    background-image: url('https://yourimageshare.com/ib/C5pVRCrHGx.webp');
    background-size: cover;
}

.form-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form {
    display: flex;
    justify-content: center;
    align-self: center;
    flex-direction: column;
    background-color: #FFFFFF;
    width: 30%;
    height: 70%;
}

.title {
    font-size: 50px;
    text-align: center;
    margin: 0;
}

.input-container {
    width: 100%;
    justify-content: center;
}

.input-name {
    display: inline-block;
}

.input {
    width: 90%;
}

<div class="form-container">
    <form action="" class="form">
      <h1 class="title">Sign up</h1>
      <div class="main-content">
      <div class="input-container">
      <input type="text" placeholder="First Name" class="input-name">
      <input type="text" placeholder="Last Name" class="input-name">
    </div>
      
      <div class="input-container">
      <input type="email" placeholder="Email" class="input">
    </div>

      <div class="input-container">
      <input type="password" placeholder="Password" class="input">
    </div>

      <input type="submit" value="Submit" class="submit-btn">
      </div>
    </form>
    </div>

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

* {
    font-family: "Lato", sans-serif;
    box-sizing: border-box;
}

body,html {
    margin: 0;
    padding: 0;
    background-color: #e1e1e1;
    height: 100%;
    width: 100%;
    background-image: url('https://yourimageshare.com/ib/C5pVRCrHGx.webp');
    background-size: cover;
}

.form-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form {
    display: flex;
    justify-content: space-between; /* center was making the form in middle*/ 
    flex-direction: column;
    background-color: #FFFFFF;
    width: 30%;
    height: 70%;
    padding: 10px 0; /* top & bottom padding 10px and no left right padding*/
}

.title {
    font-size: 50px;
    text-align: center;
    margin: 0;
}

.input-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px; /* this will give 10px space btw input fields*/
}

.input-name {
    display: inline-block;
}

.input {
    width: 90%;
}

    <div class="form-container">
        <form action="" class="form">
          <h1 class="title">Sign up</h1>
          <div class="input-container">
          <input type="text" placeholder="First Name" class="input-name">
          <input type="text" placeholder="Last Name" class="input-name">
          <input type="email" placeholder="Email" class="input-name">
          <input type="password" placeholder="Password" class="input-nane">
        </div>
          <input type="submit" value="Submit" class="submit-btn">
     </form>
   </div>

Essentially it’s all to do with how you have structured your code. The heading is inside your form which is using display flex to control it’s position. To make it easier, you should move the <h1> outside of it.

A copy of the code amended and commented can be seen here. I’ve added in some extra markup to help your code semantically.

* {
  font-family: "Lato", sans-serif;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  background-color: #e1e1e1;
  background-image: url("https://yourimageshare.com/ib/C5pVRCrHGx.webp");
  background-size: cover;
}

.form-container {
  margin: auto; /* Positions box in the centre of the page */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  padding: 2rem; /* Space around elements */
}

.title {
  font-size: 50px;
  text-align: center;
  margin-top: 0; /* Only need to remove margin above, we want some below to create space */
}

input {
  width: 100%;
  padding: 0.75rem; /* Add padding inside each input */
}

.input-container {
  width: 100%;
  margin-bottom: 1rem; /* Add spacing between inputs */
}

.input-row {
  display: flex; /* Flex row by default */
}

/* Only add margin to an input group if it's inside an .input-row */
.input-row > .input-group {
  margin-right: 1rem;
}

/* If two input groups are side by side, remove unwanted margin from right */
.input-group + .input-group {
  margin-right: unset;
}

.input-name {
  display: inline-block;
}

/* Class to hide content to most users, but allows screen readers to see (accessibility purposes) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
  visibility: hidden;
}

<div class="form-container">
  <!-- Move the h1 outside of the form to control separately -->
  <h1 class="title">Sign up</h1>
  
  <form action="" class="form">
    <div class="input-container">
      <!-- Created a row so you can keep specific content together on the same row (side-by-side) -->
      <div class="input-row">
        <!-- Add labels for each input to help screen readers/accessibility -->
        <div class="input-group">
          <label for="first-name" class="sr-only">First Name</label>
          <input id="first-name" type="text" placeholder="First Name" class="input-name">
        </div>
        <div class="input-group">
          <label for="last-name" class="sr-only">Last Name</label>
          <input id="last-name" type="text" placeholder="Last Name" class="input-name">
        </div>
      </div>
    </div>

    <div class="input-container">
      <label for="email" class="sr-only">Email address</label>
      <input id="email" type="email" placeholder="Email" class="input">
    </div>

    <div class="input-container">
      <label for="password" class="sr-only">Password</label>
      <input id="password" type="password" placeholder="Password" class="input">
    </div>

    <input type="submit" value="Submit" class="submit-btn">
  </form>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How do I make the "sign up" text at the top of the form?

Answers

So why is your title centered to begin with ?