align checkboxes without css or a table?

Question

Hello

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.

Answer 2

I don't see why you want to do that.

It doesn't meet your no css instruction, but you could use inline styles if you really just want no external css.

Perhaps you could use  

CSS (and to a lesser extent- tables) are tools you are looking for.

Edit: Another way you could do this is with ghost pixel images. images that are a 1x1 alpha transparent png and you use the height and width attributes in to tell it how much you want to space. You'd might need some inline css to make sure things clear correctly.

Answer 3

The simplest way would simply be to align them all to the right. I'm not sure if the "align" attribute works on the form element but you could try that, or wrap your code in a div or p element with align="right").

CSS is a better solution. Put a class on the form then use the CSS rule text-align: right; or simply add style="text-align: right" to the form element directly.

Answer 4

The article Applying CSS to forms has some examples of syling labels to cause inputs to the right to line up along a vertical edge.

That said, it is a convention in user interface design to place labels to the right or radio buttons and checkboxes. If you follow that convention, then they will line up by themselves (since all the checkboxes will share a width).

Answer 5

You could just put your labels and inputs in an unorderded list. In order to get the alignment, the text would have to go on the right of the input/

<ul>
    <li>
        <label><input /> Some Text</label>
    </li>
</ul>

or

<ul>
    <li>
        <input /><label for="">Some Text</label>
    </li>
</ul>

Rich