CODEWITHSUNDEEP
htmlcss
Ali Salman
Ali Salman

Reputation: 69

alignment of html form elements

I have a simple form in my html code and I want proper alignment of elements inside it such that all the <input> elements should be aligned to right and all the <b> elements should be aligned to left, for that I am doing something like this but it is not working kindly help.

<b style="float:left">Full Name<b><input style="height:20px; width:150px; float:right" type="text" name="newName"/><br/>
<b style="float:left">Username<b><input style="height:20px; width:150px; float:right" type="text" name="newUsername"/><br/>
<b style="float:left">Password<b><input style="height:20px; width:150px; float:right" type="password" name="newPassword"/><br/>

Upvotes: 0

Views: 61

Answers (3)

darla_sud
darla_sud

Reputation: 359

You can use labels and some css to achieve this. Here is the practice code:

html, body {
  margin:0; 
  padding:0;
}

form {
  display: block;
}

input[type="submit"]
{
  width:150px !important;  
}

.base-form
{
  width:100%;
}

.base-form p label
{
  width: 15%;
  display:inline-block;
}

.base-form p input
{
  width: 55%;
}

.base-form .btn-row
{
  width:70%;
  padding:0px 10px;
}

.base-form .btn-row p
{
  text-align:right;
}
<form class="base-form">
   <legend>This is the form</legend>
   <p>
      <label for="firstField">Name</label>
      <input id="firstField" type="tel" name="cardNo" />
   </p>
   <p>
      <label for="secondField">Telephone</label>
      <input id="secondField" type="tel" name="cv2" />
   </p>
   <div class="btn-row">
      <p>
         <input id="submit" type="submit" />
      </p>
   </div>
</form>

Upvotes: 0

Akshey Bhat
Akshey Bhat

Reputation: 8545

<b style="float:left;clear:left">Full Name</b><input style="height:20px; width:150px; float:right;clear:right;" type="text" name="newName"/>

Add clear attribute to css. no need of <br/>

Upvotes: 0

Fraser Crosbie
Fraser Crosbie

Reputation: 1762

You can use a table to achieve the proper alignment of elements:

https://jsfiddle.net/q25q1rq2/2/

<table>
  <tr>
    <td>Full Name</td>
    <td><input type="text" name="newName" /></td>
  </tr>
  <tr>
    <td>Username</td>
    <td><input type="text" name="newUsername" /></td>
  </tr>
  <tr>
    <td>Password</td>
    <td><input type="password" name="newPassword" /></td>
  </tr>
</table>

Upvotes: 1

Related Questions