I'm having some trouble with the <input> HTML tag. I try to make one box checked but it isn't working. The HTML file is running with PHP. As you can see I used the default checked in the input. But it isn't working. How can I fix this without jQuery?
<fieldset id="imageselector">
<label id="labelog" class="container imageinput" style="display:none;">
<input id="Radioog" name="radio" class="radio" type="radio" value="img" checked/>
<img id="selector_image" class="selector_image" src="//youtube.com/yts/img/yt_1200-vflhSIVnY.png">
<span class="imagecheckmark"></span>
</label>
<label id="labelimg" class="container imageinput" style="display:none;">
<input id="Radioimg" name="radio" class="radio" type="radio" value="og"/>
<img id="selector_og" class="selector_image" src="//youtube.com/yts/img/yt_1200-vflhSIVnY.png">
<span class="imagecheckmark"></span>
</label>
</fieldset>
You have display: none on your label, this element is wrapping your radio inputs so none of that will show up. If you remove that, checked is working fine.
Related
I have the following html code, which contains input radio and label for it, when I turn windows narration (voiceover) on, it highlights only radio button:
But, I want input + label to be highlighted together:
is there any way to achieve this?
Here's my code:
<div>
<input type="radio" id="radio1" name="radio1" checked>
<label for="radio1">
Field label
</label>
</div>
I overcame the issue by changing markup a bit. I added wrapper div:
<div class="radio-wrapper">
<input type="radio" id="radio1" name="radio1" checked>
<label for="radio1">
Field label
</label>
</div>
And made radio button width & height 100% and display: inline-block;
Now it's acting as it should.
I have some custom radio buttons. The final option should be a radio button with an input field.
As you can see, in de Codepen example, the radio button does not align vertically center with the input field.
I have tried everything from calculating top, to display flex.
Codepen: https://codepen.io/monsmado/pen/RwarYEG
<form>
<label>Do you have an elevator?</label>
<div class="custom-control custom-radio">
<input type="radio" id="elevatorYes" name="elevator" class="custom-control-input">
<label class="custom-control-label" for="elevatorYes">Yes</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="elevatorNo" name="elevator" class="custom-control-input">
<label class="custom-control-label" for="elevatorNo">No</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="elevatorOther" name="elevator" class="custom-control-input">
<label class="custom-control-label" for="elevatorOther">
<input type="text" class="form-control" name="elevator" placeholder="Other">
</label>
</div>
</form>
Add this CSS in this case
.form-group:nth-child(4) .custom-control-label:after, .form-group:nth-child(4) .custom- control-label:before{
margin-top: 0.5em
}
I send you the solution in you codepen
https://codepen.io/r0binxp/pen/qBZbJaZ
Well, a quick fix for your situation could be overriding the current top value of the custom radio button and set it to 25% (Since the actual height of it is 50% of your input so the 25% will fit it exactly in middle). Also, note that display flex on the parent element won't work as expected because the customized radio exits within the ::before pseudo-element so it won't get the flex attribute.
.custom-control-label[for=monthsOther]::before,
.custom-control-label[for=monthsOther]::after {
top: 25%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
<label>How many months?</label>
<div class="custom-control custom-radio">
<input type="radio" id="monthsYes" name="months" class="custom-control-input">
<label class="custom-control-label" for="monthsYes">1-2</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="monthsNo" name="months" class="custom-control-input">
<label class="custom-control-label" for="monthsNo">3-5</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="monthsOther" name="months" class="custom-control-input">
<label class="custom-control-label" for="monthsOther">
<input type="text" class="form-control" name="months" placeholder="Other">
</label>
</div>
</form>
NOTE: Keep in mind since the radio button itself and its background on check action is defined in ::before and ::after pseudo-elements you need to override both of them.
This seems like a really hacky way to change the appearance of form elements. The original question is missing any CSS code (which is where all the problems arise) but the linked codepen does show the root causes. It will be very difficult to properly align elements that are absolutely positioned, especially when you start taking left-to-right or larger font sizes into account. Additionally, creating the visual representation of a radio button using a ::before on inside the label is a recipe for frustration and ultimately a bad solution.
The proper solution is probably using vertical-align: middle or vertical-align: baseline on both the radio and the label. but those will have no effect while the elements are absolutely positioned.
I use the framework Boostrap and I would like to control the radio buttons alignement.
All the examples I saw to display a responsive list of radio buttons do not manage the alignment. Either they were using labels with same size or a fixed width that keep the alignment but nothing really responsive.
I've tried to use the solution below but with
http://jsfiddle.net/rm7n73ep/`
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
Radio button's label 2
Does somebody know how to combine the property for the responsive behavior and for a correct alignment of labels and radio button?
Thanks a lot for your answer!
Add the following class
label{
display: block;
}
Check if this helps :
<div class="form-group">
<label class="col-md-5"> Your label </label>
<div class="col-md-7">
<div class="col-md-6">
<input type="radio" name="name1" value="0" checked/>
<label for="name1">Input 1</label>
<input type="radio" name="name2" value="1" />
<label for="name2">Input2</label>
</div>
</div>
</div>
I would like to use these funky radio buttons though the radio buttons have an id=radio1, id=radio2, id=radio3 etc
I would like all of them to have id-radio1 so it writes the result to radio1 in the database:
Here is how I have normal radio buttons working in the past using the same id and they toggle between one another:
<div class="form-group col-md-12">
<label class="control-label form-check-inline">Gender</label>*
<div class="form-group">
<input type="radio" id="Gender" name="Gender" value="M" required="required" /><label class="control-label">Male</label>
<input type="radio" id="Gender" name="Gender" value="F" required="required" /><label class="control-label">Female</label>
</div>
</div>
$Gender=$_POST["Gender"];
INSERT INTO [dbo].[SubmissionsTBL]
[Gender]
VALUES
(,'".trimText($Gender)."')
Though, with the funky radio buttons chaning from this:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio2"/>
<label for="radio2">Female</label>
</div>
</div>
to this doesn't work - it doesn't allow me to toggle radio buttons:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1"/>
<label for="radio2">Female</label>
</div>
</div>
What is stopping the toggle?
Thank you!
TL;DR: Due to the id and name attribute having the same value in your first example, I believe you may be confusing the two. With the database communication code you put up, it's grabbing the name="Gender" and not the id="Gender".
Additional information about id and class though you might find useful as an internet programmer:
The id attribute can only apply to one element per HTML document. I would suggest using the class attribute instead. The main difference between and id and a class is that a class can be applied to multiple elements.
Here is a working solution to the code you provided:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio1" class="radio_grp1"/>
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio2" class="radio_grp1"/>
<label for="radio2">Female</label>
</div>
</div>
I used the class .radio_grp1 as the name so that you know that you're referring to a group of radio buttons rather than just one.
Moreover, if you're using a library like bootstrap, it's very common that an element will already have an assigned class. To solve this issue, you can assign a single element multiple classes by adding a space in the string following the class attribute like so:
<input type="radio" name="radio" id="radio2" class="radio radio_grp1"/>
Hope this was useful!
Your code should be changed to something like this. the radio button's name is what is submitted to the back end, and the id is used for front-end things like label association.
id's should always be unique.
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio2"/>
<label for="radio2">Female</label>
</div>
</div>
If by toggling, you mean the normal behavior of radio buttons, then that happens whenever all the radio buttons in the group have the same name.
I have this code:
<div class="divpere" >
<div class="divfille1" ><label>CIVILITE:</label></div>
<div class="divfille2" >
<input type="radio" ID="mademoiselle" runat="server" >Mademoiselle</input>
<input type="radio" ID="madame" runat="server">Madame</input>
<input type="radio" ID="monsieur" runat="server">Monsieur</input>
</div>
</div>
It's a labale and a list of radio buttons, when i try to check one of this radio button, it still not checked!!
What is the reason of this?
How can i fix my snippet?
Demo Fiddle
<div class="divpere" >
<div class="divfille1" ><label>CIVILITE:</label></div>
<div class="divfille2" >
<input name="samename" type="radio" id="mademoiselle" runat="server" /><label for="mademoiselle"> Mademoiselle</label>
<input name="samename" type="radio" id="madame" runat="server"/><label for="madame">Madame</label>
<input name="samename" type="radio" id="monsieur" runat="server"/><label for="monsieur">Monsieur</label>
</div>
</div>
You should mention the name attribute for your radio buttons and Don't forget to mention the same name values for all three radio buttons...