I have two radio button.
<div class="col-md-4">Yes : <input id="default_yes" value="1" type="radio" v-model="default"></div>
<div class="col-md-8">No : <input id="default_no" value="0" type="radio" v-model="default"></div>
How to apply HTML required in vuejs radio button ?
To use required with radio, you just need to keep name for every input from this group.
This question is not at all about VueJS. It is only about HTML.
<input id="default_yes" name="myChoice" value="1" type="radio" v-model="default" required>
<input id="default_no" name="myChoice" value="0" type="radio" v-model="default" required>
Related
I basically want to create a select element, where the options are displayed next to each other horizontally. Like this:
How can I implement this design?
Using a basic form a radio button would be one way to do it and then hide the actual input using css while keeping the label
Hide radio button while keeping its functionality
then you are just styling the labels how you want them
<form action="form action goes here">
<input type="radio" value="1">
<label for="1">1</label>
<input type="radio" value="2">
<label for="2">2</label>
<input type="radio" value="3">
<label for="3">3</label>
<input type="radio" value="1">
<label for="3">3</label>
...and so on
</form>
can somelone explain why i can't unselect or select multiple times my radio button input ? Here is my code:
<div id="grade">
<label id="gradeName">Grade</label>
<input type="radio">
<label for="">5</label>
<input type="radio">
<label for="">6</label>
<input type="radio">
<label for="">7</label>
<input type="radio">
<label for="">8</label>
<input type="radio">
<label for="">9</label>
<input type="radio">
<label for="">10</label>
</div>
For example if i want to unselect the value i can't, can this be fixed in html or i need js for this ?
Radio buttons are designed so that at all times one member of the radio group is selected.
You have not checked one by default, so none start out in the checked state.
You have not given them names so they aren't grouped (each is in a group consisting of just itself).
An an aside, a label is for labelling a single form control. You can't use a label to label an entire radio button group. That is what the fieldset element is for.
<fieldset>
<legend>Radio Example</legend>
<label><input type="radio" name="groupName" value="1" checked> 1</label>
<label><input type="radio" name="groupName" value="2"> 2</label>
<label><input type="radio" name="groupName" value="3"> 3</label>
</fieldset>
If you want each button to have two states, so you can check and uncheck them freely, use checkboxes:
<fieldset>
<legend>Checkbox Example</legend>
<label><input type="checkbox" name="groupName" value="1" checked> 1</label>
<label><input type="checkbox" name="groupName" value="2"> 2</label>
<label><input type="checkbox" name="groupName" value="3"> 3</label>
</fieldset>
Your approach is not right. By reading https://en.wikipedia.org/wiki/Radio_button you can understand that the purpose of the radio button is to choose only one value from a list of items. If you want to have the check/uncheck behavior you should use checkboxes and apply styles to look like radio buttons.
In the following code:
<form>
<input type="radio" style="disabled:true">Alpha<br>
<input type="radio" style="enabled:false">Beta<br>
<input type="radio">Gamma<br>
</form>
1) Why is it allowing me to select more than one radio button at a time?
2) How to I "grey out" specific radio buttons? The "enabled" and "disabled" attributes do not seem to be working.
To make a group of radio buttons, give them all the same name:
<form>
<input type="radio" name="group1">Alpha<br>
<input type="radio" name="group1">Beta<br>
<input type="radio" name="group1">Gamma<br>
</form>
Demo
To disable a radio button, use the disabled attribute in its tag:
<form>
<input type="radio" name="group1">Alpha<br>
<input type="radio" name="group1">Beta<br>
<input type="radio" name="group1" disabled>Gamma<br>
</form>
Demo
Disabled is not a CSS attribute so it is not defined within the style attribute.
As commented above you can also wrap the <input> in a <label> tag like so:
<form>
<label><input type="radio" name="group1">Alpha</label><br>
<label><input type="radio" name="group1">Beta</label><br>
<label><input type="radio" name="group1" disabled></label>Gamma<br>
</form>
Or you can link the label with the inputs id:
<label for="alpha">Alpha</label>
<input type="radio" name="group1" id="alpha">
Then the user can click on the text instead of just the radio button.
Demo
The disabled attribute isn't a css style. You disable an input like this:
<form>
<input type="radio" name="radGroup">Alpha<br>
<input type="radio" name="radGroup" disabled>Beta<br>
<input type="radio" name="radGroup">Gamma<br>
</form>
notice also the name attribute. This will prevent multple radio buttons been selected at once. Each input in the group must share the same name
DEMO
a group of radiobuttons must have the same same to select only one:
use the html disabled attribute to disable a radio <input type="radio" disabled>
so your solution would be:
<form>
<input type="radio" name="rb1">Alpha<br>
<input type="radio" name="rb1">Beta<br>
<input type="radio" name="rb1" disabled>Gamma<br>
</form>
From what I have gathered, in order to make a label of a radio button clickable, you must assign the same "name" attribute value to both elements.
The problem I am having is when you have more than one radio button, say a "yes or no" type selection. In order to make it to where if you click one, the other disables is that both radio buttons "name" attribute has to be the same value.
Is it possible to do both?
<label for="no">No</label>
<input type="radio" name="no" value="no" />
<label for="yes">Yes</label>
<input type="radio" name="yes" value="yes" />
id (not name) attribute should be referred by label's for attribute. It should be like this: http://jsfiddle.net/zzsSw/
<label for="no">No</label>
<input type="radio" name="mygroup" id="no" value="no" />
<label for="yes">Yes</label>
<input type="radio" name="mygroup" id="yes" value="yes" />
You can also write labels without IDs:
<label>
<input type="radio" name="mygroup" />
My clickable caption
</label>
or checkbox
<label>
<input type="checkbox" name="mygroup[]" />
My clickable caption
</label>
It seems simple, but this has been a bit of a headscratcher for me. Given the following (valid xhtml transitional) code:
<form action="weird.html">
<label for="test1">T1</label>
<input type="radio" id="test1" name="test" value="1" />
<label for="test2">T2</label>
<input type="radio" id="test2" name="test" value="2" />
<label for="test3">T3</label>
<input type="radio" id="test3" name="test" value="3" />
<label for="test4">T4</label>
<input type="radio" id="test4" name="test" value="4" />
<label for="test5">T5</label>
<input type="radio" id="test5" name="test" value="5" />
</form>
Why is it that I can't tab between radio buttons? This issue seems to be because they all have the same name attribute, but that seems rather counter-intuitive to me as far as accesbility goes. Why does the focus state only get applied to one? Is this because the group is treated as a single element? Are access keys the only non-Javascript solution here?
You actually use the arrow keys to move within the radio buttons because as you said, they are treated as a single element. This is normal behavior.
As James and Tatu said that is normal, I don't know if you have used "TABINDEX", it might work.
<input type="radio" id="test5" name="test" value="5" tabindex="5" />
But as they are treated as single element it might not work.
Yes, each radio button group is treated as one form element - if you want to skip between the group elements then use the arrow keys. It does make sense; if you're tabbing through a long form with a group of 10 radio buttons halfway down, you'd get annoyed if you had to tab through all 10 radio options before moving to the next form item.
If they're not in the same group, then you can tab between them. In the example below, T5 will gain separate tab focus to the rest:
<form action="weird.html">
<label for="test1">T1</label>
<input type="radio" id="test1" name="test" value="1" />
<label for="test2">T2</label>
<input type="radio" id="test2" name="test" value="2" />
<label for="test3">T3</label>
<input type="radio" id="test3" name="test" value="3" />
<label for="test4">T4</label>
<input type="radio" id="test4" name="test" value="4" />
<label for="test5">T5</label>
<input type="radio" id="test5" name="test2" value="5" />
</form>