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>
Related
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
I am creating a survey form just for a project on FCC.
I tried putting the <input> tag inside <label>, also used <fieldset> but nothing worked.
<p id="purpose">
<label for="business"><input id="business" type="radio" name="purpose" value="business" checked> business</label>
<label for="leisure"><input type="radio" id="leisure" name="purpose" value="leisure">Leisure</label>
<label for="passingby"><input type="radio" id="passingby" name="purpose" value="passingby">Passing by</label>
<label for="others"><input type="radio" id="others" name="purpose" value="others">others</label>
</p>
<p class="improve">What do we need to improve?</p>
<label for="food"><input type="checkbox" id="food" name="food">Food</label>
<label for="rooms"><input type="checkbox" id="rooms" name="rooms">Rooms</label>
<label for="service"><input type="checkbox" id="service" name="service">Service</label>
<label for="none"><input type="checkbox" id="none" name="none">None</label>
Try out this
<form action="">
<input type="radio" name="purpose" value="business"> business<br>
<input type="radio" name="purpose" value="leisure"> leisure<br>
<input type="radio" name="purpose" value="passingby"> passingby<br>
<input type="radio" name="purpose" value="others"> others<br>
</form>
<p class="improve">What do we need to improve?</p>
<label for="food"><input type="checkbox" id="food" name="food">Food</label> <br>
<label for="rooms"><input type="checkbox" id="rooms" name="rooms">Rooms</label><br>
<label for="service"><input type="checkbox" id="service" name="service">Service</label><br>
<label for="none"><input type="checkbox" id="none" name="none">None</label><br>
Label should be sibling of input
<p id="purpose">
<input id="business" type="radio" name="purpose" value="business" checked><label for="business"> business</label>
<input type="radio" id="leisure" name="purpose" value="leisure"><label for="leisure">Leisure</label>
<input type="radio" id="passingby" name="purpose" value="passingby"><label for="passingby">Passing by</label>
<input type="radio" id="others" name="purpose" value="others"><label for="others">others</label>
</p>
<p class="improve">What do we need to improve?</p>
I am trying using HTML, Jquery, and Node.js to develop an online test for my students. Currently, when I submit the form, the server gets a json object (using body-parser) that includes only the fields that were answered. However, I also need to be able to see which ones were not answer. For example, if my student answers questions 1, 2, 3 but not 4, the server shows the following:
{Q1: a, Q2:b, Q3:c}
I want to get:
{Q1: a, Q2:b, Q3:c, Q4:''}
I tried looking online, however most posts explain how to get rid of the empty responses and not how to include them.
This is what I have right now
<div id="FormContainer1" class="container">
<form id="Form1" action="/Form1" method="POST">
<div class="row">
<div class="col">
<div class="row">
<label> 1. </label>
<label>A </labe> <input type="radio" name="Q1" value="A">
<label>B </labe> <input type="radio" name="Q1" value="B">
<label> C </labe> <input type="radio" name="Q1" value="C">
<label> D </labe> <input type="radio" name="Q1" value="D">
</div>
<div class="row">
<label> 2. </label>
<label> A </labe> <input type="radio" name="Q2" value="A">
<label> B </labe> <input type="radio" name="Q2" value="B">
<label> C </labe> <input type="radio" name="Q2" value="C">
<label> D </labe> <input type="radio" name="Q2" value="D">
</div>
<div class="row">
<label> 3. </label>
<label> A </labe> <input type="radio" name="Q3" value="A">
<label> B </labe> <input type="radio" name="Q3" value="B">
<label> C </labe> <input type="radio" name="Q3" value="C">
<label> D </labe> <input type="radio" name="Q3" value="D">
</div>
<div class="row">
<label> 4. </label>
<label> A </labe> <input type="radio" name="Q4" value="A">
<label> B </labe> <input type="radio" name="Q4" value="B">
<label> C </labe> <input type="radio" name="Q4" value="C">
<label> D </labe> <input type="radio" name="Q4" value="D">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<input type="submit" value="Submit">
</div>
</div>
</form>
and in the server I have,
app.post('/Form1', urlencodedParser, function(request,response){ console.log(request.body); })
You could add a hidden radio button for each question that is marked as checked:
<input type="radio" name="Q4" value="" style="display: none;" checked>
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