Aligning textboxes via HTML

Question

Here is my code:

Classroom name:                <input type="text" name="txtClassroomName" size="20"><br>
School name:                   <input type="text" name="txtSchoolName" size="20"><br>
School contact email address:  <input type="text" name="txtSchoolEmail" size="20"><br>
School address:                <input type="text" name="txtSchoolAddress" size="20"><br>
School telephone number:       <input type="text" name="txtTelephoneNumber" size="20"><br>

As you can probably guess, this code displays some text and then has some textboxes after this text.

My question is this: I am wanting to align all the texboxes so that they are aligned. I have added spaces after the text, yet the textboxes just appear straight after the text, ignoring the spaces that I entered. What is the best, most effective way to do this? Maybe a table?

thanks

Answer 1

Normally you'd use css to do this for you. in your css file add:

label{
display:inline-block;
width:200px;
margin-right:30px;
text-align:right;
}

input{

}

fieldset{
border:none;
width:500px;
margin:0px auto;
}

Then in the html you would set the labels up next to the textboxes:

<fieldset>
<label for="txtClassroomName">Classroom name:</label><input type="text" name="txtClassroomName" size="20">
<label for="txtSchoolName">School name:</label><input type="text" name="txtSchoolName" size="20">
<label for="txtSchoolEmail">School contact email address:</label><input type="text" name="txtSchoolEmail" size="20">
<label for="txtSchoolEmail">School address:</label><input type="text" name="txtSchoolAddress" size="20">
<label for="txtSchoolEmail">School telephone number:</label><input type="text" name="txtTelephoneNumber" size="20">
</fieldset>

in the css file, the margin-right:30px; line tells it how far apart to put the label and textbox

setting the fieldset width essentially creates a box round it all and you can set it's width if you need to make any labels bigger.

Hope that helps.

Martyn

Answer 2

<table>
<tr><td><label for="txtClassroomName">Classroom name:</label>                
  <td><input type="text" name="txtClassroomName" id="txtClassroomName" size="20">
<tr><td><label for="txtSchoolName">School name:</label>
  <input type="text" name="txtSchoolName" id="txtSchoolName" size="20"><br>

...
</table>

A table is the only way to make the columns aligned so that the first column occupies just the width it needs (the width of the longest label). Any other approach forces you to make a guess on the width, and the results will inevitably vary, and the code will not be robust (the width needs to be adjusted whenever the length of the longest label changes).