How To Align Form Input Fields In Html

There are two ways we can align input form fields in Css. these are ; vertical and horizontal. This is the same as saying inline and block.

It will be good to first note that input fields in a form display inline by default. Just like links, they don’t stack on each other the way divs does. In essence, input fields are inline level elements. 

You can learn the differences between inline and block level elements with examples here

Since form input fields are horizontally aligned, we want to learn how to vertically align input form fields in Css

Example

HTML
 
    <section class="main-container">
      <h1>CONTACT US</h1>
      <form>

        <div>
          <!-- name -->
          <input type="text" placeholder="Name" id="name" />
          <!-- subject -->
          <input type="text" placeholder="subject" id="subject" />
          <!-- number -->
          <input type="number" placeholder="phone" id="phone" />
          <!-- email -->
          <input type="email" name="" placeholder="Email" id="email" />
          <!-- textArea -->
          <textarea
            cols="33"
            rows="6"
            placeholder="Message"
            id="textarea"
          ></textarea>
          <button>Submit</button>
        </div>
      </form>
    </section>

  
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} /* general selector */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: blue;
}
.main-container {
  padding: 10px 20px;
  width: 300px;
  background-color: white;
  border-radius: 7px;
}
h1 {
  text-align: center;
  margin: 20px;
}
.main-container input {
  display: block;
  padding: 8px;
  margin: 10px 0;
  width: 100%;
  font-weight: bold;
}
.main-container textarea {
width: 100%;
  font-weight: bold;
  padding-left: 10px;
  padding-top: 10px;
}
.main-container button {
  background-color: blue;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  outline: none;
  border: none;
  margin-top: 20px;
  cursor: pointer;
  transition: 2s;
}
.main-container button:hover {
  background-color: chartreuse;
}

The code above shows a responsive form with well align inputs fields. Again like I said, the main determining factor here is your design preference. If you want to have a label instead of a placeholder, then use the Html code below;

Html

<section class="main-container">
      <h1>CONTACT US</h1>
      <form >
        <div>
          <!-- name -->
          <label for="">Name</label>
          <input type="text" placeholder="" id="name" />
          <!-- subject -->
          <label for="">Subject</label>

          <input type="text" placeholder="" id="subject" />
          <!-- number -->
          <label for="">Phone</label>

          <input type="number" placeholder="" id="phone" />
          <!-- email -->
          <label for="">Email</label>

          <input type="email" name="" placeholder="" id="email" />
          <!-- textArea -->
          <label for="">Leave a Message</label>

          <textarea
            cols="33"
            rows="6"
            placeholder=""
            id="textarea"
          ></textarea>
          <button>Submit</button>
        </div>
      </form>
    </section>

There are two things we learn in this tutorial;

• First we learn how to create a simple but responsive html and Css contact form
• Secondly, we learn how to align form input fields in Css

Well, I am convinced that there might be other ways to this on the internet, but hopefully this gives you a good idea of how you can align input fields using Css