Align text fields 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 guess, this code displays some text, and then after that the text has text fields.

My question is this: I want to align all the tex boxes so that they are aligned. I added spaces after the text, but the text fields just appear right after the text, ignoring the spaces I entered. What is the best, most effective way to do this? Maybe a table?

thank

Answer 1

Usually you should use css for this. 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 html you set the labels next to the text fields:

<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 css file, margin-right: 30px; the line tells how far from each other to put a label and a text field

, , .

, .

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>

- , ( ). , , ( , ).

Answer 3

HTML . HTML SPACE,  

Classroom name:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="txtClassroomName" size="20"><br>

. . , , , .

, <TABLE> CSS.

Answer 4

You can also make all text fields displayed one below the other in the center of the screen. It will look uniform.