Have Geek Brain

Set checkboxes without css or table?

If I have an html form like:

<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 checkboxes so that they are in union, without using table or css, but pure html? Otherwise, which css should you use?

0


a source to share


5 answers


Uh-huh. Highlight each label with a tag <label>

:

<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;
}

This should format the text fields well. As an added bonus, clicking on the shortcut should now place the browser focus on the text field.

+5


a source


In the article Applying CSS to Shapes, there are some examples of sequencing shortcuts to bring the inputs to the right to line up along the vertical edge.



However, it is a convention in user interface design to put labels on the right or radio buttons and checkboxes. If you follow this convention, they line up themselves (since all checkboxes will have a width).

+1


a source


You can just put your labels and entries in an unordered list. To get the alignment, the text would have to go to 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

+1


a source


I don't understand why you want to do this.

This doesn't match your css statement, but you can use inline styles if you just don't want the external css to be unnecessary.

Perhaps you could use &nbsp;

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

Edit: Another way you could do this is with ghost pixel images. images that are 1x1 alpha transparent png and you use the height and width attributes to specify how much you want to fit. You may need inline css to make sure everything is correct.

0


a source


The easiest way is to just bring them to the right. I'm not sure if the "align" attribute works on the form element, but you can try this or wrap your code in a div or p element with align="right"

).

CSS is the best solution. Place the class on the form, then use a CSS rule text-align: right;

or just add style="text-align: right"

to the form element directly.

0


a source






More articles:


All Articles