Most of the time, you want to align forms so there is a "label" on the left, then a little space and then neatly aligned all the inputs on the right side - but obviously not "right aligned", but left aligned just spaced away and directly underneath each other.

 The "old" way is to use tables. This is simple, straight forward - but isn't as flexible when it comes to the mobile world and it's not really what the table element is for (I will leave the religious discussion out there... If you want, just go ahead and use tables...)

It might be important to note, that any non-table method to align forms works by defining some absolute maximum width the label text can be. So if you have no control over the table text, you might have to apply extra logic (like having the label text in its own line). The only method that automatically wraps long texts in multiple lines is by using the table method.

<table>
  <tr><td>Name:</td><td><input /></td></tr>
  <tr><td>E-Mail:</td><td><input /></td></tr>
  <tr><td>Home Address:</td><td><textarea></textarea></td></tr>
</table>

When working with forms one will - apart from the actual inputs - soon stumble over this nice element called "label".

People use it mostly for styling purposes, completely forgetting the awesome power of labels: 

When you click on the label - and it is assigned to a form input element - the assigned element will be selected.

This is really great, since it increases the usability of forms greatly.

So how to "assign" an input to a label:

There are actually two method:

1. use <label for="idOfInput">label</label> <input id="idOfInput"/>
2. have the input be INSIDE the label: <label><input/> labelText</label>

Both work great across all browsers currently out there.

The above information label is actually the right approach to go forward. We put the input "inside" the label element and then jsut add span around the actual label text.. and we have a perfectly aligned form. I will not explain the details too much - since it's not really rocket science - you can get each item explained quite well at various css sites.
<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label> and for the css:

/* the label needs a height */
label {
    display:block;
    position:relative;
}

/* the first span is the real "label" */
label span:first-child  {
    font-weight:bold;
    position:absolute;
    left: 3px;
}

/* the "content" has a margin-left - position static is for the spans*/
label input, label textarea, label select, label span.field, label span.value {
    margin-left: 120px;
    display:inline;
    position: static;
}

/* simple class for having the input left and the text right (i.e. radioboxes) */
label.simple span{
    font-weight:default;
    position:static;
}

label.simple input {
    margin-left:auto;
}

This method has only one drawback as already mentioned above: you have to define a maximum "width" of the label (in that case 120px).

Apart from that you gain quite a lot:

• you do not need any messy br lying around for linebreaks - meaning you can quickly accomplish a multi-column layout
• the whole line is click-able. Especially for checkboxes this is a huge help.
• Dynamically showing/hiding form lines is easy (you just search for the input and hide its parent -> the label)
• you can assign classes to the whole label making it show error input much clearer (not only around the input field)
• The code is clean and simple
• easily expandable for multiple devices/resolutions for a one-code fits all design (responsive)
• depending on the html, the css can have in-line label/field or underneath (just dont put the field inside the label )
  

Probably a few more things I don't realize right now.