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>
Related
I made a form with some check boxes and the check boxes with their texts are displayed inline:
enter image description here
What I'm trying to do is to display one checkbox with it's text per row so I tried creating a class for all the check boxes and within the CSS, added display: block:
.checkbox {
display: block;
}
From what I've read, it's better to avoid using br tags all the time in your HTML and attempt to do your styling as much as you can within your CSS.
However, this is what happens:
enter image description here
When trying to search online for this issue, I just get results on how to align multiple check boxes/ fields into the same row.
Here is the HTML:
<p>What would you like to see improved? (Check all that apply)</p>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="frontEnd" value="frontEnd">Front-end Projects</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="backEnd" value="backEnd">Back-end Projects</input>
<input type="checkbox" class="checkbox" id="dataVisualization" value="frontEnd">Data Visualization</input>
<input type="checkbox" class="checkbox" id="challengesImproved" value="challengesImproved">Challenges</input>
<input type="checkbox" class="checkbox" id="openSourceCommunity" value="openSourceCommunity">Open Source Community</input>
<input type="checkbox" class="checkbox" id="gitterHelpRooms" value="gitterHelpRooms">Gitter help rooms</input>
<input type="checkbox" class="checkbox" id="videos" value="videos">Videos</input>
<input type="checkbox" class="checkbox" id="cityMeetups" value="cityMeetups">City Meetups</input>
<input type="checkbox" class="checkbox" id="wiki" value="wiki">Wiki</input>
<input type="checkbox" class="checkbox" id="forum" value="forum">Forum</input>
<input type="checkbox" class="checkbox" id="additionalCourses" value="additionalCourses">Additional Courses</input>
Something like this could work, but there other ways
label {
display: block;
}
<label>
<input type="checkbox" name="" id="">
Ola3
</label>
<label>
<input type="checkbox" name="" id="">
Ola1
</label>
<label>
<input type="checkbox" name="" id="">
Ola2
</label>
Put your <input type="checkbox"> and <label> for that checkbox in a <div>.
<div>
<input type="checkbox" id="first">
<label for="first">First</label>
</div>
<div>
<input type="checkbox" id="second">
<label for="second">Second</label>
</div>
This way you don't need to style you container because <div> has display: block by default.
Edit: mistake on my end pointed out in comments. Added id to inputs.
Method -1 - using a display:block;
label {display:block;}
<p>What would you like to see improved? (Check all that apply)</p>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="frontEnd" value="frontEnd">Front-end Projects</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="backEnd" value="backEnd">Back-end Projects</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="dataVisualization" value="frontEnd">Data Visualization</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="challengesImproved" value="challengesImproved">Challenges</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="openSourceCommunity" value="openSourceCommunity">Open Source Community</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="gitterHelpRooms" value="gitterHelpRooms">Gitter help rooms</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="videos" value="videos">Videos</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="cityMeetups" value="cityMeetups">City Meetups</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="wiki" value="wiki">Wiki</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="forum" value="forum">Forum</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="additionalCourses" value="additionalCourses">Additional Courses</input>
Method -2 : using a <br>
<p>What would you like to see improved? (Check all that apply)</p>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="frontEnd" value="frontEnd">Front-end Projects</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="backEnd" value="backEnd">Back-end Projects</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="dataVisualization" value="frontEnd">Data Visualization</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="challengesImproved" value="challengesImproved">Challenges</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="openSourceCommunity" value="openSourceCommunity">Open Source Community</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="gitterHelpRooms" value="gitterHelpRooms">Gitter help rooms</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="videos" value="videos">Videos</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="cityMeetups" value="cityMeetups">City Meetups</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="wiki" value="wiki">Wiki</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="forum" value="forum">Forum</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="additionalCourses" value="additionalCourses">Additional Courses</input>
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 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 got a problem with checkbox and label. When I re-size screen the label split line, and checkbox should split follow label also.currently, when label stay in new line, but checkbox not stay in the same place of label. What I need is pair new line when responsive.
Anyone have any idea? Thanks in advance for your helping!
Below is my code
<div id="score">
<input type="radio" id="score_0" name="score" required="required" value="1">
<label for="score_0" class="required">E</label>
<input type="radio" id="score_1" name="score" required="required" value="2">
<label for="score_1" class="required">D</label>
<input type="radio" id="score_2" name="score" required="required" value="3">
<label for="score_2" class="required">C</label>
<input type="radio" id="score_3" name="score" required="required" value="4">
<label for="score_3" class="required">B</label>
<input type="radio" id="score_4" name="score" required="required" value="5">
<label for="score_4" class="required">B+</label>
<input type="radio" id="score_5" name="score" required="required" value="6">
<label for="score_5" class="required">A</label>
<input type="radio" id="score_6" name="score" required="required" value="7">
<label for="score_6" class="required">S</label>
</div>
You can actually nest your inputs into the label tag, then set a style for the label
.scores label {
white-space: nowrap;
}
<div class="scores">
<label for="score_1" class="required">
<input type="radio" id="score_1" name="score" required="required" value="2">D</label>
<label for="score_2" class="required">
<input type="radio" id="score_2" name="score" required="required" value="3">C</label>
<label for="score_3" class="required">
<input type="radio" id="score_3" name="score" required="required" value="4">B</label>
<label for="score_4" class="required">
<input type="radio" id="score_4" name="score" required="required" value="5">B+</label>
<label for="score_5" class="required">
<input type="radio" id="score_5" name="score" required="required" value="6">A</label>
<label for="score_6" class="required">
<input type="radio" id="score_6" name="score" required="required" value="7">S</label>
</div>
Demo - Easier to resize here