Solution 1 :

In HTML, add class to submit button

<input class="submit-btn" type="submit" name="submitbtn" value="Submit Info">

In CSS, add below

form {
    max-width: 700px;
}
input {
    max-width: 700px;
}
.submit-btn {
    max-width: 80px;
}

Problem :

I’ve been trying to get my form elements to align for ages and tried restarting multiple times, but it’s just not working with me. This is what I’m trying to get:

Ideal form

This is what I get:

Bad form

JSFiddle demo

My main problem is probably the radio buttons, which I can’t get text to the right of when they’re floated right, and for some reason can’t get to float left without floating everything left.
I am really new to HTML, so I might just be missing something obvious?

.container {
  margin-left: 300px;
  margin-right: 600px;
  margin-bottom: 200px;
  line-height: 3;
  display: inline-block;
}

.container input {
  width: 700px;
  float: right;
}

.container select {
  width: 400px;
  float: right;
}
<div class="container">

  <form action="user data.php">
    <input type="text" name="fname" value="First Name"> <br>
    <input type="text" name="lname" value="Last Name"> <br>
    <input type="text" name="email" value="e-mail Address"> <br>
    <input type="text" name="cell" value="Cell Number"> <br>
    <input type="text" name="id" value="ID/Passport Number"> <br>
    <input type="text" name="dob" value="Date of Birth"> <br>

    <label for="course">Course:</label>
    <select name="course"></select> <br>

    <label for="hlevel">Highest Education Level:</label>
    <select name="hlevel"></select> <br>

    <p>Identification Type:</p>

    <input type="radio" name="idtype" id="passnum" style="width: 5px;" value="Passport Number">
    <label for="passnum"> Passport Number </label> <br>

    <input type="radio" name="idtype" id="idnum" value="ID Number">
    <label for="idnum"> ID Number </label> <br>

    <label for="gender">Gender:</label>


    <label for="pgroup">Population Group:</label>
    <select name="pgroup"></select> <br>

    <input type="submit" name="submitbtn" value="Submit Info">
  </form>

</div>

Comments

Comment posted by isherwood

Are you in a fixed-width site scenario? Those rigid margins and container widths aren’t really a modern way to go about this. As soon as the screen drops below ~1300px it overflows.

Comment posted by electroshock777

@isherwood Fixed-width site? (really new to html) But yes I would prefer to move away from that sort of thing (been getting annoyed with the navbar overflowing), it’s just all I know >.<

Comment posted by isherwood

You should look over any of the modern layout grid libraries (Bootstrap) for concept ideas, as well as flexbox and CSS grid. You’re reinventing the wheel here.

Comment posted by electroshock777

Thanks, I definitely plan on using these. ^^ Unfortunately, I’m learning this for my studies and I don’t think they want me to use external libraries yet.

Comment posted by isherwood

I wasn’t suggesting you use them. Just learn from them.

By

Leave a Reply

Your email address will not be published. Required fields are marked *