Question

If I have a html form like the following:

<form name="statusForm" action="post.php" method="post" enctype="multipart/form-data">
Test:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTestTestTestTestTestTest:       
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<input name="Submit" value="submit" type="submit">
</form>

Is it possible to align the checkboxes so they are in union, without using a table or css but pure html? Otherwise, which css should be used?

Answer 1

Yup. Surround each label with a <label> tag:

<label for="checkboxes1">Test:</label>
<input id="checkboxes1" name="checkboxes[]" value="Test" type="checkbox">

Then give the label a width:

label {
    display: inline-block; /* try "block" instead if this fails in IE */
    min-width: 5em;
}

That should pad out the text boxes nicely. As an added bonus, clicking on the label should now place the browser focus into the textbox.