Why the input text and password fields are not line up?

Question 1

Why the input text and password fields are not line up?

Username and Password are different length words

How can I fix that problem ?

Use a monospace font
Wrap the words in an element that you set to display: inline-block; width: ??? where ??? is a fixed value.

That element could be the labels.

 <label for="username"> Username:</label> <input type="text" name="username" id="username" /></label><br />
 <label for="password"> Password:</label> <input type="password" name="password" id="password" /></label>

label {
    display: inline-block;
    width: 7em; /* adjust to taste */
}

Keep in mind that you will get different fonts on different systems, so give yourself some leeway with the width of the elements if you take the second approach.

Question 2

"Username:" is slightly wider than "Password:"

That is why they are not aligned.

You want to do something like putting the fields in a table or defined width divs.

Question 3

It's because the text of Username: is a few pixels longer than Password: ?

You need to close the label tags, so the text is actually in the label (setting the for attribute will also make the inputs selectable by clicking the label)

<body>
  <br /><br /><br /><br /><br />
  <div id="loginForm">
    <form action="login.php" method="post">
     <label for="username"> Username:</label> <input type="text" name="username" id="username" /></label><br />
     <label for="password"> Password:</label> <input type="password" name="password" id="password" /></label>         <br /><br />
     <input type="submit" name="sbmtLogin" value="login" />
    </form>
  </div>     
</body>

Then put a common width on the labels with css

div#loginForm form label {
    display: inline-block;
    width: 200px; // whatever looks best
}

Question 4

Not all characters of the font has the same width for all fonts. In your case Username is slightly larger than the Password, therefore the alignment issue.

To fix the issue you need to put the labels in a fixed with box

HTML - wrapped each input element in a div

<body>
<br /><br /><br /><br /><br />
<div id="loginForm">
<form action="login.php" method="post">
    <div><label>Username:</label><input type="text" name="username" id="username" /></div>
    <div><label>Password:</label><input type="password" name="password" id="password" /></div>
    <div><input type="submit" name="sbmtLogin" value="login" /></div>
</form>
</div>
</body>

CSS - set width of label and set display to inline-block

    body {margin:0; padding:0;}
    div#loginForm {width:270px; max-width:270px; margin:0 auto; padding:10px; text-align:center; background-color:#8de3fd;}
    div#loginForm input {margin:3px; padding:5px; color:#5b5b5b; width:150px; border:1px solid #9a9a9a;}
    div#loginForm input[type=submit] {width:70px;}
    #loginForm label { width: 100px; display: inline-block; }