CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1813228
user1813228

Reputation:

align labels and textbox horizontally and veritcally

I am working on making a form as shown just like in this image but I am not able to figure out how can I align those labels and textbox vertically and horizontally in the same format shown in that image.

Here is my jsfiddle: https://jsfiddle.net/w6Lq9a1m/1/

And below is my simple HTML:

<div class="row">
  <h2> INSURANCE FORM</h2>
  <h4> <i>BASIC DETAILS</i></h4>
  <form action="/action_page.php">
    FIRST NAME<br>
    <input type="text" name="fname" value="Mickey">
    <br> LAST NAME<br>
    <input type="text" name="lname" value="Mouse">
    <br><br> EMAIL
    <br>
    <input type="text" name="email" value="[email protected]">
    <br> PHONE NUMBER<br>
    <input type="text" name="number" value="123-456-789">
    <br> COUNTRY
    <br>
    <select name="country">
      <option value="canada">Canada</option>
    </select>
    <br> PROVINCE
    <br>
    <select name="province">
      <option value="ontario">ONTARIO</option>
    </select>
    <br> CITY
    <br>
    <select name="city">
      <option value="ottawa">OTTAWA</option>
    </select>
    <br>
  </form>
</div>

Upvotes: 1

Views: 73

Answers (2)

Ehsan
Ehsan

Reputation: 12951

Try this Without Bootstrap :

.left, .right {
   width: 45%;
   margin-bottom: 30px;
}

.left {
  float: left;
}

.right {
   float: right;
}

.hh {
   width: 45%;
   float: right;
}

.halfleft,.halfright {
   width: 45%;
}

.halfleft {
   float: left;
}

.halfright {
   float: right;
}

input[type='text'],select {
   width: 100%;
   border:none;
   border-bottom: 2px orange solid;
   margin-top: 3px;
   outline: none;
}
<div class ="row">
   <h2> INSURANCE FORM</h2>
   <h4> <i>BASIC DETAILS</i></h4>
   <form action="/action_page.php">
     <div class="left">
     	 FIRST NAME<br>
         <input type="text" name="fname" value="Mickey">
     </div>
     <div class="right">
     	 LAST NAME<br>
      <input type="text" name="lname" value="Mouse">
     </div>
      <div class="left">
      	EMAIL<br>
      <input type="text" name="email" value="[email protected]">
      </div>
      <div class="right">
      	PHONE NUMBER<br>
      <input type="text" name="number" value="123-456-789">
      </div>
      <div class="left">
      	COUNTRY<br>
      <select name="country">
         <option value="canada">Canada</option>
      </select>
      </div>
      <div class="hh">
      <div class="right halfleft">
      	 PROVINCE<br>
      <select name="province">
         <option value="ontario">ONTARIO</option>
      </select>
      </div>
      <div class="right halfright">
      	CITY<br>
      <select name="city">
         <option value="ottawa">OTTAWA</option>
      </select>
      </div>
      </div>
   </form>
</div>

Upvotes: 1

Mukesh Ram
Mukesh Ram

Reputation: 6328

Try this using Bootstrap

.form-horizontal .form-control {
  border-radius:0;
  border:none;
  box-shadow:none;
  border-bottom:1px solid orange;
}
.form-horizontal .form-control:focus{
  box-shadow:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12">
  <h2> INSURANCE FORM</h2>
  <h4> <i>BASIC DETAILS</i></h4>

  <form action="/action_page.php" class="form-horizontal">
    <div class="form-group">
      <div class="col-sm-6">
      <label>FIRST NAME</label>
        <input type="text" class="form-control" name="fname" value="Mickey">
      </div>
      <div class="col-sm-6">
      <label>LAST NAME</label>
        <input type="text" class="form-control" name="lname" value="Mouse">
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-6">
      <label>EMAIL</label>
        <input type="text" class="form-control" name="email" value="[email protected]">
      </div>
      <div class="col-sm-6">
      <label>PHONE NUMBER</label>
        <input type="text" class="form-control" name="number" value="123-456-789">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-6">
      <label>COUNTRY</label>
        <select name="country" class="form-control">
          <option value="canada">Canada</option>
        </select>
      </div>
      <div class="col-sm-3">
      <label>PROVINCE</label>
        <select name="province" class="form-control">
          <option value="ontario">ONTARIO</option>
        </select>
      </div>
      <div class="col-sm-3">
      <label>CITY</label>
        <select name="city" class="form-control">
          <option value="ottawa">OTTAWA</option>
        </select>
      </div>
    </div>
  </form>
</div>

Upvotes: 1

Related Questions