I want to have a group of radio buttons, so that one of them appears twice.
The result would look like this:
The tricky point is that I want to achieve this in pure HTML/CSS (although I doubt CSS will help here).
Here is the code I wrote to produce the four radio buttons above:
<input type="radio" name="buttons" value="choice1" id="button1"/>
<label for="button1">Choice 1</label>
<input type="radio" name="buttons" value="choice1" id="button1"/>
<label for="button">Choice 1</label>
<input type="radio" name="buttons" value="choice2" id="button3"/>
<label for="button3">Choice 2</label>
<input type="radio" name="buttons" value="choice3" id="button4"/>
<label for="button4">Choice 3</label>
I naively thought that attributing the same value to the first to buttons would make them behave as one, but of course it doesn't.
Is it possible to achieve this behaviour without any JS?
Edit
This might sound strange, so here's my usecase.
What I ultimately want is to have a radio button storing a global state, and have access to it at multiple places.
For instance, suppose the following snippet:
.state-repeater {
visibility: hidden;
}
#button.state-repeater:checked > p {
color: blue;
}
<input type="radio" id="button" />
<label for="button">Button</label>
<!--
Lots of blocks; the two parts are totally uncorrelated;
so the classical sibling selector tricks do not work
-->
<input class="state-repeater" type=radio id="button" />
<p>The button is checked</p>
I want the <p> tag text to turn blue when the radio button is checked; however, due to the radio button being far from it, I need some kind of repeater.
Obviously, the approach of this snippet does not work.
Is it possible to "repeat" the information that the radio button is checked?
You'll need to use JS. There is no pure way. Maybe wrap the radio in an element that LOOKS like 2 radio buttons and when clicked they both LOOK like they've been selected. But if you need two actual radio buttons that work together, you are out of luck. And in any case the thing I described before would be a huge headache compared to using JS.
Related
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 am building a questionnaire and I have a label for the question and then radio buttons for the user to answer with.
The question text is added with a label and then depending on the number of responses (yes/no/unsure, male/female) labelled radio buttons are added.
My problem is that I am also trying to maintain accessibility and I need to have the question text label be associated with the radio buttons.
The label with the nested input(radio) associates fine, the one with issues is the one attached to the fieldset.
I am using the WAVE toolbar for basic compliance to accessibility standards, but I can't seem to get over the orphaned label errors.
<div>
<label for="{{question.UniqueID}}" compile="question.Text"></label>
</div>
<div>
<fieldset class="col-sm-6" id="{{question.UniqueID}}">
<label class="radio-inline" ng-repeat="responseOption in question.Responses">
<input type="radio"
name="{{question.QuestionID}}"
id="{{responseOption.UniqueID}}"
value="{{responseOption.ResponseOptionID}}"
ng-model="$parent.selectedOptionID"
ng-click="newValue(value, question, responseOption)">
{{responseOption.Text}} <!--Male/Female, yes/no/unsure-->
</label>
</fieldset>
What you want is a legend in the fieldset, not a label. Labels are really only used to pair with inputs, hence the for/id suggestion in feitla's answer. Legends are the way to give an associated name to a fieldset. They're difficult to style though. You might be better off using the name attribute on the radio inputs to make them a group. Then you can just use a paragraph to put the question in instead. E.g.
<p>Q1: Do you like snozzberries?</p>
<input type=radio name=q1 id=q1-y /><label for=q1-y>Yes</label>
<input type=radio name=q1 id=q1-n /><label for=q1-n>No</label>
Your <label> element should have an associated for attribute in order to associate it to the correct input/radio.
<label class="radio-inline" for="{{responseOption.UniqueID}}" ng-repeat="responseOption in question.Responses">
I'm trying to program a dynamic form, so I can't use the normal form tags and stuff. I use normal buttons, JQuery, and AJAX calls to simulate a traditional form. However, I can't figure out how to do radio buttons. Any help?
EDIT: Yeah, I suppose I should have been more specific. I tried doing
<input type="radio" />
and stuff, but:
it lets me select more than one button at a time (which kind of defeats the point of radio buttons)
it won't let me deselect a button after it's pressed!
EDIT 2: The reason I'm not using form tags is that I need multiple submit buttons as well, and the only solution I found to that dilemma was to not use form tags.
Why can't you use the form tag? There is nothing stopping you from doing so. But if you don't want to use the form tag, why not:
<input type='radio' name='test' value='1' checked>
<input type='radio' name='test' value='2'>
<input type='radio' name='test' value='3'>
<input type='radio' name='test' value='4'>
Works fine for me. Demo
Edit:
1: You need to specify a name for the radio group, otherwise each input is considered its own group. Hence why you can select more than one button at a time when using <input type="radio" />. Look at my code above. The radio group is 'test'.
2: Radio buttons are suppose to have a default value. When you create a radio group you should be specifying a default value with the checked attribute. A consequence of this is that you can't deselect a radio button. You can either choose a different value or stick with the default. If you want to be able to deselect, then consider using checkboxes instead. I've updated the example code to reflect this.
If you are able to select more than one radio button, its sounds like your name attributes are not matching. What you want to end up with is something like the following:
<input type="radio" name="group-1" value="something-unique">
<input type="radio" name="group-1" value="something-else-unique">
<input type="radio" name="group-1" value="another-unique-something">
<input type="radio" name="group-2" value="something-unique">
<input type="radio" name="group-2" value="something-else-unique">
<input type="radio" name="group-2" value="another-unique-something">
Note that the name attribute is the same for the group of options, which means that the selections will replace each other.
Also, I haven't had any issues not wrapping radios in form tags, when using them purely with javascript, however if you want to do any html post stuff, I would expect that they are required.
You can try this:
HTML
<div>
<ul>
<li><input type="radio" name="radio" value="value1" checked>Radio Button1</input></li>
<li><input type="radio" name="radio" value="value1">Radio Button2</input></li>
<li><input type="radio" name="radio" value="value1">Radio Button3</input></li>
</ul>
</div>
DEMO
There should not be an input element without a form element. You are not going to get the HTML to respond the way you want it to if you do not use it correctly. Multiple submit buttons would indicate the need for multiple forms.
If, for whatever reason, that does not work, perhaps you should reconsider the format through which you are asking the user to submit information.
What's the most appropriate, semantically correct way to label checkbox and radio elements? Obviously, giving each one a unique id attribute is an option and using that in id a <label for="">, but this seems like it would break the semantic grouping. Putting unenclosed text next to the input element just seems...wrong.
Edit:
Additionally, how should one denote the label for a group of such elements? (i.e. not the description of each option, but the description of the whole group)
Using <label for=""> is the correct way to do that. The grouping of radio buttons is done by denoting the group via the name attribute and individual elements via the id attribute. For example:
<input type="radio" name="rbg" id="rbg1"><label for="rbg1">Button One</label><br>
<input type="radio" name="rbg" id="rbg2"><label for="rbg2">Button Two</label><br>
<input type="radio" name="rbg" id="rbg3"><label for="rbg3">Button Three</label><br>
As for putting a label over the entire group, just put them in a container that has a text container above the stack of buttons (or checkboxes). Example:
<div>
<h3>My Radio Button Group</h3>
<input type="radio" name="rbg" id="rbg1"><label for="rbg1">Button One</label><br>
<input type="radio" name="rbg" id="rbg2"><label for="rbg2">Button Two</label><br>
<input type="radio" name="rbg" id="rbg3"><label for="rbg3">Button Three</label><br>
</div>
I mostly use Chris Coyiers HTML ipsum : http://html-ipsum.com/
always a good helper
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>