CODEWITHSUNDEEP
htmlcssalignment
Waaaaat
Waaaaat

Reputation: 644

Alignment of textfield in a form

I want to align my textfields in my form but I cant find a way to do it. I will so you in with a print screen where a want the textfields to start. Here is my code...

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
</head>
<body>
<form method="post" action="signup.php">
<fieldset>
    <legend>Registration Form</legend>
    <label>First Name :
        <input type="text" name="fname" required="required" />
    </label>
    <br/>
    <br/>
    <label>Last Name :
        <input type="text" name="lname" required="required" />
    </label>
    <br />
    <br />
    <label>Username :
        <input type="text" name="username" required="required" />
    </label>
    <br />
    <br />
    <label>Email :
        <input type="text" name="email" required="required" />
    </label>
    <br />
    <br />
    <label>Password :
        <input type="text" name="password" required="required" />
    </label>
    <br/><br/>
 User Type:
  <br/>Doctor
  <input type="radio" name="answer" value="Doctor" />
  Patient
  <input type="radio" name="answer" value="Patient" />

  <!--DOCTOR OPTIONS -->
  <div id="expandDoctor" style="display:none;">
    <label id="Male">Male</label>
    <input type="radio" name="DoctorG" value="male" id="DoctorG">
    <label id="Female">Female</label>
    <input type="radio" name="DoctorG" value="female" id="DoctorG">
    <br/>
    <br/>
    <label id="Age">Age:</label>
    <input type="text" name="DoctorAge" id="DoctorAge" />
    <br/>
    <br/>
    <label id="Specialty">Specialty:</label>
    <select id="SelectSpecialty" name="specialty">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>
    <br/>
    <br/>
    <label id="ID">Doctor ID:</label>
    <input type="text" name="Doctor_ID" id="Doctor_ID" />
  </div>

  <!--PATIENT OPTIONS -->
  <div id="expandPatient" style="display:none;">
    <label id="Male">Male</label>
    <input type="radio" name="PatientG" value="male" id="PatientGM">
    <label id="Female">Female</label>
    <input type="radio" name="PatientG" value="female" id="PatientGF">
    <br/>
    <br/>
    <label id="Age">Age:</label>
    <input type="text" name="PatientAge" id="PatientAge" />
    <br/>
    <br/>
    <label id="Disease">Disease:</label>
    <select id="SelectDisease" name="disease">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>
    <br/>
    <br/>
    <label id="SPID">SPID:</label>
    <input type="text" name="PatientSPID" id="PatientSPID" />
  </div>
</fieldset>

<input type="submit" value="Register" name="register"/>
</form>
</body>
<script>
$("input[type='radio'][name='answer']").change(function() {
  $("[id^=expand]").hide();
  $("#expand" + $(this).val()).show();
});</script>

</body>
</html>

I want the textfield to be aligned in the place that i put the red line Can you help me please? I want the textfield to start in the place where i put the red line

Upvotes: 0

Views: 80

Answers (5)

Waqas Khan
Waqas Khan

Reputation: 257

The best way to make it align proper use table and take labels and textfields in the td.

Upvotes: 0

Waaaaat
Waaaaat

Reputation: 644

A SECOND SOLUTION IN ORDER TO ALIGN THE FIRST 5 TEXTFIELDS IS THE BELOW

<label style="width: 350px; display: inline-block;">First Name :
<input type="text" style="float: right;" name="fname" required="required" />
</label>

For each of the textfields we want to align

Upvotes: 0

Iram
Iram

Reputation: 276

use width variable. Or place the form in the table.

Upvotes: 0

Marco
Marco

Reputation: 325

Try use table formatting.You can also use one of useful frameworks like bootstrap and foundation.

Upvotes: -1

Vitorino fernandes
Vitorino fernandes

Reputation: 15961

wrap all the input in label and add width and set the input to float:right 

label {
  width: 280px;
  display: inline-block;
}
label input {
  float: right;
}
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <form method="post" action="signup.php">
    <fieldset>
      <legend>Registration Form</legend>
      <label>First Name :
        <input type="text" name="fname" required="required" />
      </label>
      <br/>
      <br/>
      <label>Last Name :
        <input type="text" name="lname" required="required" />
      </label>
      <br />
      <br />
      <label>Username :
        <input type="text" name="username" required="required" />
      </label>
      <br />
      <br />
      <label>Email :
        <input type="text" name="email" required="required" />
      </label>
      <br />
      <br />
      <label>Password :
        <input type="text" name="password" required="required" />
      </label>
      <br/>
      <br/>User Type:
      <br/>Doctor
      <input type="radio" name="answer" value="Doctor" />Patient
      <input type="radio" name="answer" value="Patient" />
      <!--DOCTOR OPTIONS -->
      <div id="expandDoctor" style="display:none;">
        <label id="Male">Male</label>
        <input type="radio" name="DoctorG" value="male" id="DoctorG">
        <label id="Female">Female</label>
        <input type="radio" name="DoctorG" value="female" id="DoctorG">
        <br/>
        <br/>
        <label id="Age">Age:</label>
        <input type="text" name="DoctorAge" id="DoctorAge" />
        <br/>
        <br/>
        <label id="Specialty">Specialty:</label>
        <select id="SelectSpecialty" name="specialty">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
          <option value="D">D</option>
        </select>
        <br/>
        <br/>
        <label id="ID">Doctor ID:</label>
        <input type="text" name="Doctor_ID" id="Doctor_ID" />
      </div>
      <!--PATIENT OPTIONS -->
      <div id="expandPatient" style="display:none;">
        <label id="Male">Male</label>
        <input type="radio" name="PatientG" value="male" id="PatientGM">
        <label id="Female">Female</label>
        <input type="radio" name="PatientG" value="female" id="PatientGF">
        <br/>
        <br/>
        <label id="Age">Age:</label>
        <input type="text" name="PatientAge" id="PatientAge" />
        <br/>
        <br/>
        <label id="Disease">Disease:</label>
        <select id="SelectDisease" name="disease">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
          <option value="D">D</option>
        </select>
        <br/>
        <br/>
        <label id="SPID">SPID:</label>
        <input type="text" name="PatientSPID" id="PatientSPID" />
      </div>
    </fieldset>
    <input type="submit" value="Register" name="register" />
  </form>
</body>
<script>
  $("input[type='radio'][name='answer']").change(function() {
    $("[id^=expand]").hide();
    $("#expand" + $(this).val()).show();
  });
</script>
</body>

</html>

Upvotes: 2

Related Questions