so using the twitter bootstrap CSS framework,
if you display this html it will show with the text under the radio button, i want them to show to the right * or left of the radio button
this works if you replace Gender with Gender it will have the desired effect
however i do not have control over changing the tag to a span tag (im using a java based framework)
however i can prefix and suffix the html - shown in the example below
######## ADD PREFIX HTML ############<input type="radio" checked name="optionsRadios" value="option1" />
<label>Gender</label>#######ADD ADD SUFFIX THML ############
ur a wizard if you can get this working!, thanks guys
<div class="clearfix">
<label id="optionsRadio">Gender</label>
<div class="input">
<ul class="inputs-list" wicket:id="gender">
<li>
<label>
<input type="radio" checked name="optionsRadios" value="option1" />
<label>Gender</label>
</label>
</li>
<li>
<label>
<input type="radio" name="optionsRadios" value="option2" />
<label>Gender</label>
</label>
</li>
</ul>
</div>
The radio buttons on the bootstrap demo page render as you expect so there is either something in your own CSS causing this or a problem with your markup.
My guess is that the problem is because you have your radio buttons and your labels nested inside another label. Try removing the wrapper label and see if that works.
The label element must not have any nested label elements.
Related
So i am trying to add radio button on my survey form and the button and the text is completly in different positions so here is a picture of how it looks --> enter image description here
i tried display: inline; but still nothing changed
The below code will work as you expected. Just add necessary attributes like name and for.
<p>Would you recommend this survey to your friend:</p>
<input type="radio" name="test" value="yes">
<label for="test">Yes</label><br>
According to the picture, your input tag width is 100%, that's why you are facing this issue. Add class inside input and use this CSS your problem has been fixed.
<style>
.inline-radio{width: auto;}
</style>
**HTML**
<p>Would you recommend this survey to your friend:</p>
<input type="radio" name="test" value="yes" class="inline-radio" >
<label for="test">Yes</label>
I am doing a django project.
But I wanted to have radio buttons grouped as well as name of the buttons to work with django.
Is it okay to use two name attributes in one HTML tag?
Will I be facing any errors if I do so?
Below is my code I am stuck in.
<input type="radio" name="group1" name="removePunc"> Remove Punctuations
<br>
Input name attributes must be unique to send data using traditional forms. If you find yourself needing more attributes, use the data- attributes. Pls share some code to undertand what you are trying to achieve.
If you want to label the group of radio buttons add class="group1" to all of the radio buttons instead of name="group1".
<label for="removePunc">Remove Punctuations</label>
<input type="radio" class="group1" name="removePunc">
<label for="button2">Button 2</label>
<input type="radio" class="group1" name="button2">
<label for="button3">Button 3</label>
<input type="radio" class="group1" name="button3">
I'm about to style some checkboxes for Bootstrap 3, and I absolutely cannot get my head around why in their examples they use this markup:
<label>
<input type="checkbox"> Check me out
</label>
instead of this:
<input type="checkbox" id="a"><label for="a">Check me out</label>
I just would love to know why they went with the nested approach. I can't see any upsides. The huge huge downside is, that checked/unchecked states cannot be styled with CSS such as:
input:checked + label { }
The answer is user-experience. Nesting your radio or checkbox inputs inside a <label> provides additional functionality. Consider:
<label>
<input type="checkbox" value="">
This is my Checkbox Option inside a Label
</label>
In the above code the checkbox is selected by clicking on either the box itself or the text within the <label>.
While in the below code the <label> text is not clickable. The only way to select the checkbox is to click directly upon the box.
<input type="checkbox" value="">
<label>This is my Checkbox Option outside a Label</label>
I can't figure out why the spacing between the radio input and link is different for the first element than for the other two.
Here is the HTML:
<div class="citationChoice">
<label for="mla">
<input type="radio" name="citation" value="mla" id="mla_button" checked="checked">
MLA
</label>
<label for="apa">
<input type="radio" name="citation" value="apa" id="apa_button">
APA
</label>
<label for="chicago">
<input type="radio" name="citation" value="chicago" id="chicago_button">
Chicago Manual of Style
</label>
</div>
jsFiddle
For some reason, without any css applied, the mla radio button is closer to the MLA link than the other radio buttons are to their adjacent links.
(I know the HTML is not completely correct. If at all possible, I have to leave the HTML as is.)
You had a space before <a and jsfiddle was interpreting that. The first MLA link did not have this space, that is why it sat closer to the radio button
BEFORE -
id="apa_button"> <a
AFTER FIX -
id="apa_button"><a
I have 4 radio buttons (A, B, C, D). When I click on the radio button A, there would be another 2 options - A1 and A2. The same will happen with the others. And if I choose D2, another 2 radio buttons would appear.
How can I do this in HTML?
HTML and CSS3-only version (Fiddle):
HTML for group "D" (other groups are similar)
<div>
<input type="radio" name="level0" value="D" id="D"/>
<label for="D">D</label>
<div class="sub1">
<div>
<input type="radio" name="level1" value="D0" id="D0"/>
<label for="D0">D0</label>
</div>
<div>
<input type="radio" name="level1" value="D1" id="D1"/>
<label for="D1">D1</label>
<div class="sub2">
<div>
<input type="radio" name="level2" value="D10" id="D10"/>
<label for="D10">D1-0</label>
</div>
<div>
<input type="radio" name="level2" value="D11" id="D11"/>
<label for="D11">D1-1</label>
</div>
</div>
</div>
</div>
</div>
CSS
.sub1, .sub2 { display: none; }
:checked ~ .sub1, :checked ~ .sub2 {
display: block;
margin-left: 40px;
}
If you want more radio buttons to appear when a certain one is selected, I would suggest not "nesting" them inside one another in the html. Have javascript display a hidden group or RBs when a one is selected.
Frankly, I think using radio buttons to make a select box appear would be much more user friendly, as its clear that you're selecting from a different group. Too many radio buttons always looks ugly.
Other problems with your code: id's should be unique, put the RB text beside the radio button as opposed to inside the tag, and avoid table based layout if possible. inline javascript and css should be avoided too, but as this is a code sample it actually makes it more readable. Oh, most importantly, you have the other buttons set to appear on onclick, so they won't go away if you unselect the RB :D
You can only use a specific id on one element in a document. You have to put different id's on each element and make them visible separately:
<input onclick="document.getElementById('extra1').style.visibility='visible';document.getElementById('extra2').style.visibility='visible';" type="radio" />Apple
<input type="radio" id="extra1" style="visibility:hidden" other choice here />
<input type="radio" id="extra2" style="visibility:hidden" other choice here />
#guffa I think I'll just modify your answer a bit. Put all the optional radio buttons inside a <div> element like this:
<input onclick='document.getElmentById("optional_buttons").style.display="block"' type="radio" />
<div id="optional_buttons" style="display: none;" >
optional radio buttons
</div>