CODEWITHSUNDEEP
htmlcss
Josh20002
Josh20002

Reputation: 21

align checkboxes without css or a table?

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?

Upvotes: 0

Views: 6543

Answers (5)

jon skulski
jon skulski

Reputation: 2305

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 &nbsp;

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.

Upvotes: 0

kim3er
kim3er

Reputation: 6476

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

Upvotes: 1

Samir Talwar
Samir Talwar

Reputation: 14330

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.

Upvotes: 5

Quentin
Quentin

Reputation: 943569

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).

Upvotes: 1

DisgruntledGoat
DisgruntledGoat

Reputation: 72530

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.

Upvotes: 0

Related Questions