Html - How can I clean this Form like the example?

Yuto
October 18, 2023
165 views
1 vote
2 Answers

I’m learning HTML and CSS.
I’m making a form to imitate below the example.
//Example
But I don’t know how to align to label and input the same position.
Does somebody help me ??

// This is my HTML code and screen
My Screen

<form action="#" method="#">
        <div class="form-group">
            <label for="fname">First Name: </label>
            <input type="text" name="firstName" id="fname">
            <label for="mi">MI: </label>
            <input type="number" name="mi" id="mi" min="0" max="50">
            <label for="lname">Last Name: </label>
            <input type="text" name="lastName" id="lname">
            <br>
            <label for="city">City: </label>
            <input type="text" name="city" id="city">
            <label for="state">State: </label>
            <input type="text" name="state" id="state">
            <label for="zcode">Zip Code: </label>
            <input type="text" name="zipcode" id="zcode">
        </div>
</form>

I guess I will be able to solve this problem using CSS.

Answers

I guess the below code is what you want to display. This code is not the best solution, but it’s the simplest one I can think of.

.DataContent {
  width: 100%;
  /* form width */
  line-height: 25px;
}

.DataTitle {
  float: left;
  padding: 0 10px;
  /* label left and right space */
  /*margin-right: 10px;*/
  /* The space between label and textbox */
}

.DataItem {
  float: left;
}

.LabelAlign {
  text-align: right;
}

<div class="DataContent">
  <!-- Col1 -->
  <div class="DataTitle">
    <div class="LabelAlign">
      <label for="FirstName">First Name：</label><br>
      <label for="City">City：</label><br>
    </div>
  </div>
  <div class="DataItem">
    <input type="text" id="FirstName"><br>
    <input type="text" id="City"><br>
  </div>
  <!-- Col2 -->
  <div class="DataTitle">
    <div class="LabelAlign">
      <label for="MI">MI：</label><br>
      <label for="State">State：</label><br>
    </div>
  </div>
  <div class="DataItem">
    <input type="text" id="MI"><br>
    <input type="text" id="State"><br>
  </div>
  <!-- Col3 -->
  <div class="DataTitle">
    <div class="LabelAlign">
      <label for="LastName">Last Name：</label><br>
      <label for="ZipCode">Zip Code：</label><br>
    </div>
  </div>
  <div class="DataItem">
    <input type="text" id="LastName"><br>
    <input type="text" id="ZipCode"><br>
  </div>
</div>

The mistake you are making here is that you haven’t wrapped the label and the input field within a single div or parent tag. Your code should be like this:

.registerForm{
display:flex;
gap:10px;

}
.alignLabel{
display:flex;
flex-direction:column;
align-items:end;
gap:10px;

}
.alignField{
display:flex;
flex-direction:column;
align-items:center;
gap:10px
}

<form class="registerForm" method="POST" action="">
  
  
<div class="alignLabel">
    <label for="FirstName">First Name：</label>
<label for="LastName">Last Name：</label>
<label for="City">City：</label>
 <label for="MI">MI：</label>
 <label for="State" class="label">State：</label>
<label for="ZipCode">Zip Code：</label>
    
    </div>
  
<div class="alignField">
  <input type="text" id="FirstName">
 <input type="text" id="LastName">
 <input type="text" id="City">
<input type="text" id="MI">
<input type="text" id="State">  
 <input type="text" id="ZipCode">
</div>


</form>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How can I clean this Form like the example?

Answers