Positioning Form Elements

Question

I designed a form for entering data, but for proper positioning of elements of the form I use "margin-left" with each element to become below each other at the same position

Is there any way to do positioning better?

#content {
  height: 200px;
  width: 400px;
  background: lightgreen;
}

<div id="content">
  <form name="log" action="insplacement.jsp" method="post">
    Year:<input type="text" name="year" value="" size="20" Style="margin-left: 165px" /><br> No of Company Visited:<input type="text" name="company" value="" size="20" Style="margin-left: 45px" /><br> Number of Students Placed:<input type="text" name="num"
      value="" size="20" style="margin-left: 25px" /><br> Percentage of Students Placed:<input type="text" name="percentage" value="" size="20" style="margin-left: 9px" /><br> Maximum Salary offered (p.a.):<input type="text" name="max" value="" size="20"
      style="margin-left: 4px" /><br> Minimum Salary offered (p.a.):<input type="text" name="min" value="" size="20" style="margin-left: 7px" /><br> Average Salary offered (p.a.):<input type="text" name="avg" value="" size="20" style="margin-left: 15px"
    /><br>
    <input type="submit" value="Insert" name="logButton" />
    <input type="reset" value="Clear" />

  </form>
</div>

Answer 1

Keep it simple

There is no need to add any extra HTML elements; let the form element markup speak for itself.

Firstly, give the labels a label element and a for attribute that links the label to its matching input via the id.

A note on usability

Before we go on, there have been lots of usability studies – here is one – that suggest positioning labels above the input results in faster and easier completion of forms. Here I have provided both options.

Option 1 - Labels to the left of inputs

• place display: inline-block on the labels and inputs

• place a width on the label large enough to contain your largest label

• place a width on the form to contain your inputs and labels.

form {
  width: 500px;
}
label {
  display: inline-block;
  width: 200px;
}
input {
  display: inline-block;
}

<form action="insplacement.jsp" id="log" method="post" name="log">

  <label for="one">Year:</label>
  <input id="one" name="year" size="20" type="text" value="">

  <label for="two">No of Company Visited:</label>
  <input id="two" name="company" size="20" type="text" value="">

  <label for="three">Number of Students Placed:</label>
  <input id="three" name="num" size="20" type="text" value="">

</form>

Option 2 - Labels above inputs

This is even simpler, one CSS property:

• place display: block on the labels

label {
  display: block;
}

<form action="insplacement.jsp" id="log" method="post" name="log">

  <label for="one">Year:</label>
  <input id="one" name="year" size="20" type="text" value="">

  <label for="two">No of Company Visited:</label>
  <input id="two" name="company" size="20" type="text" value="">

  <label for="three">Number of Students Placed:</label>
  <input id="three" name="num" size="20" type="text" value="">

</form>

Answer 2

#content {
    height: 200px;
    width: 400px;
    background: lightgreen ;
    margin: 100px auto 0;
}

and the HTML

<form>
    <fieldset>
        <div>
            <label for="name">Name</label>
            <input id="name" />
        </div>
        <div>
            <label for="telephone">Telephone</label>
            <input id="telephone" />
        </div>
    </fieldset>
</form>

Answer 3

Try like this:-

style-

#header {
    text-align: center;
    height:100px;
    /*width:1360px;*/
    background-color: lightskyblue;

}
#content {
    height: 200px;
    width: 400px;
    background: lightgreen ;
    margin: 100px auto 0;
    /*margin-top:100px;*/
    /*margin-left: 500px ;*/
}
dt , dd{width: 50%;margin: 0 0 8px;float: left;height: 20px;}

<dl>
          <dt> Year:</dt>
          <dd><input type="text" name="year" value="" size="20" /></dd>
          <dt> No of Company Visited:</dt>
          <dd><input type="text" name="year" value="" size="20" /></dd>
          <dt> Number of Students Placed:</dt>
          <dd><input type="text" name="year" value="" size="20" /></dd>
          <dt> Percentage of Students Placed:</dt>
          <dd><input type="text" name="year" value="" size="20" /></dd>
          <dt> Maximum Salary offered (p.a.):</dt>
          <dd><input type="text" name="year" value="" size="20" /></dd>
          <dt> Minimum Salary offered (p.a.):</dt>
          <dd><input type="text" name="year" value="" size="20" /></dd>
          <dt>Average Salary offered (p.a.)</dt>
          <dd><input type="text" name="year" value="" size="20" /></dd>
    </dl>

DEMO

Answer 4

Resize your browser to see this in action

HTML

<section class="feedback_form">
    <form action="" method="post">
        <fieldset>
            <label>Name:</label>
            <input type="text" name="name" id="name">
        </fieldset>
        <fieldset>
            <label>Company Name:</label>
            <input type="text" name="company_name">
        </fieldset>
        <fieldset>
            <label>City:</label>
            <input type="text" name="city">
        </fieldset>            
    </form>
</section>

CSS

.feedback_form {
    margin: 15px 0 0 0;
}
.feedback_form label {
    display: block;
}
.feedback_form input, .feedback_form select, .feedback_form textarea {
    width: 95%;
}
.feedback_form input[type=submit], .feedback_form input[type=reset] {
    width: auto;
}
fieldset {
    border: 0;
    padding:0 0 10px 0;
}
@media screen and (min-width:768px) {
    .feedback_form {
        width:80%;
        margin:0 auto;
    }
    .feedback_form label {
        width: 45%;
        display: inline-block;
        vertical-align: top;
        font-weight:normal;
    }
    .feedback_form input, .feedback_form select, .feedback_form textarea {
        width: 50%;
    }
    .feedback_form input[type=submit], .feedback_form input[type=reset] {
        margin-right: 10px;
        padding: 5px;
    }
}

Fiddle Demo