Html - how to properly give spacing to input fields of a form?

Samuel
July 2, 2024
223 views
0 votes
2 Answers

I have been unable to give spacing betweenb the column of texts and input fields in a form. I want my web page to look likle my design in the first image but i got the second image below that as my result.

tell me how do i fix this so that therte is spacing between the columns of text and input fields like my design in the first image?

This is my current code

<div style="display:flex">
<div id="application-image-intro">
  <img id="application-image-1"
  src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/lady-sitting-table-near-        laptop-smartphone.jpg" 
  alt="lady-sitting-table-near-laptop-smartphone">
</div>
<div class="application-start" style="display: flex;">
  <h1><h1 style="font-family: arial; color:#56aeff;">Register to start</h1>
  <h2>Already registered? login here</h2>
  <div class="application-form">
  <form action="submit.php" method="post"><label class="apply-name" for="name">Full Name</label>
      <input type="text" id="fullname" name="fullname" required><br>

      <label class="apply-email" for="email">Your email</label>
      <input type="text" id="lastName" name="lastName" required><br>

      <label class="apply-country" for="country of residence"> Country of residence</label>
      <input type="text" id="lastName" name="lastName" required><br>

      <label class="apply-birth" for="date of birth"> Date of birth</label>
      <input type="text" id="lastName" name="lastName" required><br>
  </form>
</div>
</div>
</div>
</div>
</body>

this is my codepen work on the design

https://codepen.io/Samuel-Christian-the-looper/pen/oNRpaBm

I have tried giving each input fields a tag to be modified on the css but it dpes not work even when i give each of the specified input fields a margin-bottom attribute in the css.

Answers

Well all I did was add <br> after all of your form labels in HTML.

Then I just styled your labels and input fields a little bit by doing this:

.application-form > form > label {
  font-weight: bold;
}

.application-form > form > input {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  margin-bottom: 15px;
  box-sizing: border-box;
}

Heres what it looks like (I only included the relevant html)

body {
    background-image: url("file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/techno%20background.jpg");
    height: 100%;
    background-position: top center ;
  
  background-size: cover;
  margin:0;
    
}
#header-container {
    display: flex;
    background-color: #10a0d9;
    align-items:center;
    text-align:center !important;
    justify-content: center;
    font-family: Arial;
}

.image-container  {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
}

.img1 {
    width: 50%;
}
.img2 {
    width:50%
}

.sidebar {
    width: 290px;
    height: 300px;
    background-color:#E6C536;
    float:left;
    font-size: 13px;
    text-align: justify;
    padding-right: 30px;
    padding-left: 30px;
    font-family: Arial;

    
}

#text-container {
    display: flex;
    flex-direction: column;
    background-image:none;
    text-align: left;
    margin-left: 30px;
    height: 700px;
    text-size-adjust: 15;
    gap:20px 70px;
    padding-left: 50px;
    padding-right: 7px;
    font-family: Arial;

}

.landing-page {
    height: 400;
    width:250;
    background-color: #c6c9cf;

}

#titel-container-2 {
    position:top;
    top:0;
    display: flex;
    height: auto;
    width:100%;
    background-color: #56aeff;
    text-align:center !important;
    font-family: Arial;
    justify-content: center;
}

.image-container-2 {
    display: flex;
    flex-direction: column;
    width: 555px;
    height: 700px;
    
}

.text-container-2 {
    padding: 30px;
    text-align:left;
    font-family: Arial;
    font-size: 18px;
}

.main-content {
    display: flex;

}

.registration-form {
    background-image:url("file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/metal.jpg")
}

#application-image-1 {
    height: 800px;
    width: 700px;
    object-fit: fill;
}

#application-image-intro{
    height: 800px;
    width: 595x;
    display: flex;
    
}

.application-start {
    display: flex;
    position: right
    padding-left: 50px;
    justify-content: center;
    width: 1000px;
    text-align: center;
    align-items: center;
    margin-top: 0;
    align-self: flex-start;
    flex-direction: column;
    padding-top:0px
    
}

.application-form {
    text-align: left;
    padding: 20px;
}

.apply-name {
    margin-bottom: 20px;
}
.apply-email {
    margin-bottom: 20px;
}

.apply-country {
    margin-bottom: 20px;
}

.apply-birth {
    margin-bottom: 20px;
}

.application-image-2 {
    height: 800px;
    width: 595px;
    display: flex;
    background-color: #56aeff;
}

#passport-image {
    height: 800px;
    width: 600px;
    object-fit:contain;
}

#ID-application {
    margin-left: 50px;
    text-align: center;
    justify-content: center;
    padding-left: 50px;
    position: right;
    width: 1000px;
}

.application-form > form > label {
  font-weight: bold;
}

.application-form > form > input {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  margin-bottom: 15px;
  box-sizing: border-box;
}

<div class="application-form">
<form action="submit.php" method="post"><label class="apply-name" for="name">Full Name</label><br>
    <input type="text" id="fullname" name="fullname" required><br>

    <label class="apply-email" for="email">Your email</label><br>
    <input type="text" id="lastName" name="lastName" required><br>

    <label class="apply-country" for="country of residence"> Country of residence</label><br>
    <input type="text" id="lastName" name="lastName" required><br>

    <label class="apply-birth" for="date of birth"> Date of birth</label><br>
    <input type="text" id="lastName" name="lastName" required><br>
</form>
</div>

maybe this ?
(with a minimal amount of coding…)

const myForm = document.querySelector('#my-form');

myForm.onsubmit = e =>
  {
  e.preventDefault(); // disable form submit for testing.

  // get form data
  let data = Object.fromEntries(new FormData(myForm));

  console.clear();
  console.log(data);
  }

label { 
  margin      : .6rem;  
  display     : block;
  font-size   : .8rem;
  font-weight : bold;
  }
label * {
  box-sizing : border-box;
  display    : block;
  font-size  : 1rem;
  width      : 16rem;
  padding    : .2rem .3rem;
  }
button{ 
  margin         : .6rem;  
  width          : 16rem;
  text-transform : uppercase;
  font-size      : 1rem;
  }

<form id="my-form">  
    <label>
      Full Name
      <input name="fullname"   type="text" required>
    </label>
    <label>
      Your email
      <input name="email"      type="email" required>
    </label>
    <label>
      Country of residence
      <input name="country"    type="text" required>
    </label>
    <label>
      Date of birth
      <input name="birth_date" type="date" required>
    </label>

    <button> register </button>
  </form>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – how to properly give spacing to input fields of a form?

Answers