Aligning HTML5 form elements

I am new to HTML5 so all the help I can get is appreciated. I have three fields (First Name, Last Name and Birth Date) and I am trying to align them together. I would like to align the fields together horizontally and vertically.

Here is my simple code so far:

<html>
<!DOCTYPE html>
<html>
<link href="styles.css" rel="stylesheet" type="text/css">
<body>
  <form>
    <label for="firstname">First Name:</label> <input name="firstname" type="text" size="50" autofocus><br>
    <label for="lastname"><br>Last Name:</label> <input type="text" name="lastname" size="50" autofocus><br>
    <label for="birthdate"><br>Birth Date:</label> <input type="date" name="bdate" size="50"><br> 
  <form> </body> </html>

Here is the CSS I have:

input[type=text] {
    border: 1px solid #D4E2F1;
}

input[type=date] {
    border: 1px solid #D4E2F1;
}

input[type=color] {
    border: 1px solid #D4E2F1;
}

I would prefer not use tables as I am not trying to display tabular data. I am looking for a efficient and correct way to do this.

Your help would be greatly appreciated.

Thanks. AJ

Solution

Try this:

HTML:

<form class="user-form">
    <div class="field">
        <label for="firstname">First Name:</label>
        <input name="firstname" type="text" size="50" autofocus />
    </div>
    <div class="field">
        <label for="lastname">Last Name:</label>
        <input type="text" name="lastname" size="50" />
    </div>
    <div class="field">
        <label for="birthdate">Birth Date:</label>
        <input type="date" name="bdate" size="50" />
    </div>
<form>

CSS:

.user-form { padding:20px; }

.user-form .field { padding: 4px; margin:1px; background: #eee; }

.user-form .field label { display:inline-block; width:120px; margin-left:5px; }

.user-form .field input { display:inline-block; }

jsFiddle: http://jsfiddle.net/VuSX4/