Jump to content

Organize Check Boxes


mtber
 Share

Recommended Posts

I am trying to find a way to separate checkboxes from their text. So what i want is to have all of the text boxes in a column on the left all alighned the same and then to have the text on the right aligned the same. Is there anyway to do this. I posted an Example of my code below.

<p><input type="checkbox" name="2a"/><font class="numbers">2a.</font> Text goes here</p><ul><li><input type="radio" value="Y" name="2a" class="select">YES</input></li><li><input type="radio" value="N" name="2a" class="select">NO</input></li><li><input type="radio" value="B" name="2a" class="select">BOTH</input></li><li><input type="radio" value="O" name="2a" class="select">OMITTED</input></li></ul>

Link to comment
Share on other sites

Input tags really don't work that way. They are self-closing. Since there is no closing tag, you cannot put text between them.Now, browsers are designed to make sense of bad HTML, so you might get something that looks correct, but in the long run it may give you trouble. The typical thing to do is put a <label></label> element next to an input element.For the sake of alignment, you would use CSS to give all your input elements the same width. That would ensure that the labels all appeared at the same horizontal coordinate.Is there a reason for using the <ul> element, other than making each input appear on a separate line? There are better solutions using CSS.

Link to comment
Share on other sites

This will work, for example:CSS

<style type="text/css">	input.select {		width: 30px;		float: left;		clear: both;		display: block;	}	label.select {		display: block;	}</style>

HTML

<input type="radio" value="Y" name="2a" class="select"><label class="select">YES</label><input type="radio" value="N" name="2a" class="select"><label class="select">NO</label><input type="radio" value="B" name="2a" class="select"><label class="select">BOTH</label><input type="radio" value="O" name="2a" class="select"><label class="select">OMITTED</label>

Edited by Deirdre's Dad
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...