I have the following radio buttons which share the same name :
<div id="main_div">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio1">
<input type="radio" id="radio1" class="mdl-radio__button" name="somename" value="1" checked>
<span class="mdl-radio__label">Radio 1</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio2">
<input type="radio" id="radio2" class="mdl-radio__button" name="somename" value="2">
<span class="mdl-radio__label">Radio 2</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio3">
<input type="radio" id="radio3" class="mdl-radio__button" name="somename" value="3">
<span class="mdl-radio__label">Radio 3</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio4">
<input type="radio" id="radio4" class="mdl-radio__button" name="somename" value="4">
<span class="mdl-radio__label">Radio 4</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio5">
<input type="radio" id="radio5" class="mdl-radio__button" name="somename" value="5">
<span class="mdl-radio__label">Radio 5</span>
</label>
</div>
I can't make a fidle of it beacause, I need to change the page and go back.
When I check for example the radio radio3 and go the next page using a link and then click on the browser to go back. My radio radio3 button is still checked but I gave by default the radio1 the attribute checked so I think the radio1 should be checked.
I saw in the label in the radio3 the following class is-checked but the input isn't checked.
I'm using material design lite (https://getmdl.io/)
You can prevent the browser from "remembering" the state of your radio buttons by adding autocomplete="off" to your <input> elements. This should make your page show the first radio as checked each time.
<input type="radio" value="xxx" autocomplete="off">
Read more here
Related
Hi i'm trying to make a form and i'm blocked because i don't know how to make radio button groups
Here is my code:
<!-- Pose des poteaux -->
<!-- 1st group -->
<div>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
<span class="mdl-radio__label">Sur dalle - Pose à la française</span>
</label>
<br>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
<input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
<span class="mdl-radio__label">Contre dalle - Pose à l'anglaise</span>
</label>
<br>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-3">
<input type="radio" id="option-3" class="mdl-radio__button" name="options" value="3" >
<span class="mdl-radio__label">Sur acrotère - pose à la Française</span>
</label>
</div>
<!-- 2nd group -->
<br>
<div>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-4">
<input type="radio" id="option-4" class="mdl-radio__button" name="options" value="4" >
<span class="mdl-radio__label">Contre acrotère - Pose à l'anglaise extérieure</span>
</label>
<br>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-5">
<input type="radio" id="option-5" class="mdl-radio__button" name="options" value="5" >
<span class="mdl-radio__label">Contre acrotère - Pose à l'anglaise intérieure</span>
</label>
</div>
It's supposed to have 2 groups of radio buttons but still not working.
Just give a different name to the buttons in group 2
<!-- Pose des poteaux -->
<!-- 1st group -->
<div>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
<span class="mdl-radio__label">Sur dalle - Pose à la française</span>
</label>
<br>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
<input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
<span class="mdl-radio__label">Contre dalle - Pose à l'anglaise</span>
</label>
<br>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-3">
<input type="radio" id="option-3" class="mdl-radio__button" name="options" value="3" >
<span class="mdl-radio__label">Sur acrotère - pose à la Française</span>
</label>
</div>
<!-- 2nd group -->
<br>
<div>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-4">
<input type="radio" id="option-4" class="mdl-radio__button" name="options2" value="4" >
<span class="mdl-radio__label">Contre acrotère - Pose à l'anglaise extérieure</span>
</label>
<br>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-5">
<input type="radio" id="option-5" class="mdl-radio__button" name="options2" value="5" >
<span class="mdl-radio__label">Contre acrotère - Pose à l'anglaise intérieure</span>
</label>
</div>
I have tried to use both of these components in my html document but neither of them will center. With the checkbox the text gets centered but the icon will remain to the left of the page.
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label">Checkbox</span>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
<span class="mdl-switch__label"></span>
</label>
Use display:block for label and center align labels.
label
{
text-align:center;
}
.mdl-checkbox, .mdl-switch{
display:block;
}
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label">Checkbox</span>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
<span class="mdl-switch__label">Checkbox 2</span>
</label>
I used flex on the label to center the items inside. It also aligns the content vertically so your input is inline with your label.
.mdl-checkbox, .mdl-switch{
display:flex;
justify-content:center;
align-items:center;
}
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label">Checkbox</span>
</label>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
<span class="mdl-switch__label">Checkbox 2</span>
</label>
I am using bootstrap but i can change radio button size and in his
color
Here is ml example
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
Radiobuttons are handled by the browser, there is not really CSS that make this.
Byt there are two options to style the round circle of radiobuttons:
Pure CSS
Pictures
This website explain those two techniques quite well: stephenmorley.org
To be honest, it's quite difficult to have right design by CSS if you are targetting lots of different browsers, and it is the reason why I recommand you to use picture if you have large audience.
You can check this JSFiddle I've made for you for testing purposes https://jsfiddle.net/DTcHh/16879/
<div class="container">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
</div>
The color is changed by adding a bootstrap button class definition to the label that encapsulates the radio input element.
<div class="container">
<label class="radio-inline btn btn-danger">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline btn btn-success">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
</div>
I've got a radio button list in the form of
<div data-toggle="buttons" style="margin: 5px 0 20px">
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="0"> 0</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="1"> 1</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="2"> 2</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="3"> 3</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="4"> 4</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="5"> 5</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="6"> 6</label>
<label class="btn grey active"><input type="radio" name="ResponseForm[nps]" value="7" checked=""> 7</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="8"> 8</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="9"> 9</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="10"> 10</label>
</div>
When I try to check if a radio is selected with
::canSeeOptionsIsSelected('form input[type=radio]', 1);
It is throwing an error:
Step I can see option is selected "form input[type=radio]",1
Fail Element located either by name, CSS or XPath element with 'selected option' was not found.
As I understand it is looking for a select tag, not a radio button. If it's not a proper way to check if a radio is selected, then what is?
Your selector seems to be malformed since you don't use the form tag in your HTML file. Maybe try an xpath like: //input[#type='radio'] in canSeeOptionsIsSelected() function
I wonder what is the right use of with multiple checkboxes?
I have form style that uses the following scheme to create inline checkboxes:
<label class="checkbox inline" for="???">
<input type="checkbox" name="highest_grade[]" value="1">1
</label>
<label class="checkbox inline" for="???">
<input type="checkbox" name="highest_grade[]" value="2">2
</label>
<label class="checkbox inline" for="???">
<input type="checkbox" name="highest_grade[]" value="3">3
</label>
It works fine, but I wonder what should I add as "for" attribute for labels? I can also leave it blank, but I would like to know what is the good practice.
Give your inputs unique ids and reference them from your label tags:
<label class="checkbox inline" for="option1">
<input type="checkbox" name="highest_grade[]" value="1" id="option1"> 1
</label>
<label class="checkbox inline" for="option2">
<input type="checkbox" name="highest_grade[]" value="2" id="option2"> 2
</label>
<label class="checkbox inline" for="option3">
<input type="checkbox" name="highest_grade[]" value="3" id="option3"> 3
</label>