I want to mix radio and checked button like i design B here https://ux.stackexchange.com/questions/70531/using-mixed-radio-and-checkbox-buttons-is-there-any-efficiency-or-usability-ga
But i just could figure out how to do separately:
<input class="radio-input" type="radio" name="result" value="names" />
<label class="radio-label">Get names of people starting with..</label>
<input type="checkbox" id="A" name="name[]" value="n">
<label for="A">A</label>
<input type="checkbox" id="B" name="name[]" value="n">
<label for="B">B</label>
How can i do this like in design B?
You would have to put them into separate divs, and then align them to be next to each other with CSS styling.
.no-bullets {
list-style:none;
}
<h2>first row</h1>
<ul class = "no-bullets">
<li> <input type="radio" name="name"></li>
<li> <input type="radio" name="name"></li>
<ul class = "no-bullets">
<li><input type="checkbox" name="sex"></li>
<li><input type="checkbox" name="sex"></li>
<li><input type="checkbox" name="sex"></li>
</ul>
</ul>
</div>
Related
I want the checkboxes to be parallel to each other and the text to be aligned the same.
This is what i have (i'm new to this):
<input type="checkbox" name=”liste1” value="1">This is Example1<br>
<input type="checkbox" name=”liste1” value="2">Example2<br>
<input type="checkbox" name=”liste1” value="3">Example123456<br>
<input type="checkbox" name=”liste1”` value="4">Option4<br>
This is how it looks like
When a parent element is allowed to display: flex, each child element will be aligned vertically when the align-item: center is declared
div {
display: flex;
gap: 3px;
align-items: center
}
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4</label>
</div>
To start with, we'll correct the original version of the code:
” is not a valid quote to use in HTML, you should use either " or '
If an HTML tag doesn't have a closing tag (e.g. <p>content</p>) then it is referred to as self-closing, and should have a slash before the closing angle bracket, like this: <input />
This gives us:
<input type="checkbox" name="liste1" value="1" />This is Example1<br />
<input type="checkbox" name="liste1" value="2" />Example2<br />
<input type="checkbox" name="liste1" value="3" />Example123456<br />
<input type="checkbox" name="liste1" value="4" />Option4<br />
This is enough to get it to look right, however generally if you want to show text next to a checkbox, you want it to be clickable and affect the checkbox. The simplest way to do this is to wrap the input and it's label text inside a <label> element, like so:
label {
display: block;
}
input,
span {
vertical-align: middle;
}
<label>
<input type="checkbox" name="liste1" value="1" />
<span>This is Example1</span>
</label>
<label>
<input type="checkbox" name="liste1" value="2" />
<span>Example2</span>
</label>
<label>
<input type="checkbox" name="liste1" value="3" />
<span>Example123456</span>
</label>
<label>
<input type="checkbox" name="liste1" value="4" />
<span>Option4</span>
</label>
(I also used a small CSS rule instead of the <br /> tag, as it's generally preferable to use CSS for layout)
your picture says column but your question says row. Which one do you want?
#container {
display: flex;
flex-direction:column;
gap: 13px;
align-items: center
}
#container2 {
display: flex;
margin-top:20vw;
gap: 83px;
justify-content:center;
}
<div id='container'>
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2 xxx</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3 xxx xxx</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4 xxx</label>
</div>
</div>
<div id='container2'>
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4</label>
</div>
</div>
So Im a complete beginner and Im stuck on some personal project. Im making forms and I want to have inputs from radio buttons all in the same line, but under the label. I know how to make all elements inline and I know that setting the block property should put them under label. But block element puts all of the inputs on its on line. What I want is all inputs to be on the same line, under lable. I can use tag in HTML, but I want to make it with CSS. Any tips?
<div class="radio" >
<label class="radio" for="age">Your age:</label>
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio" >
<label class="radio" for="gender">Your gender</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
just put a line break <br />
<div class="radio" >
<label class="radio" for="age">Your age:</label>
<br />
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio" >
<label class="radio" for="gender">Your gender</label>
<br />
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
Set the label to display: flex; but make sure not to target the radio class or it will also effect the parent div and not work properly.
Instead of setting all of the radio buttons to display: block, setting just the label to display: block will get the effect you want. Block elements will start a new line (if needed) and force the next element to a new line as well. Since you want just the label to be on a new line by itself, setting it to display: block will do the trick.
label.radio {
display: block;
}
<div class="radio">
<label class="radio" for="age">Your age:</label>
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio">
<label class="radio" for="gender">Your gender</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
I have been trying to align the input radio type inline.. but still i can't able to make them inline.. it comes in next line.
This is the coding unit.
<tr>
<td>Display on Homepage</td>
<td>
<div style="display: inline;">
<label>
<input type="radio" class='icheck-me' name="show" value="Yes" data-skin="flat" data-color="orange" checked> Yes
</label>
<label>
<input type="radio" id="radio-inline" class='icheck-me' name="show" value="No" data-skin="flat" data-color="grey"> No
</label>
</div>
</tr>
Try this-
<label class='box'>
<input type="radio" class='icheck-me' name="show" value="Yes" data-skin="flat" data-color="orange" checked> Yes
</label>
<label class='box'>
<input type="radio" id="radio-inline" class='icheck-me' name="show" value="No" data-skin="flat" data-color="grey"> No
</label>
CSS:
.box{ display:inline-block; width: 50px;} .icheck-me{ display:inline-block; float:left;}
You should use the inline on the labels too
<div>
<label style="display: inline;">
<input type="radio" class='icheck-me' name="show" value="Yes" data-skin="flat" data-color="orange" checked> Yes
</label>
<label style="display: inline;">
<input type="radio" id="radio-inline" class='icheck-me' name="show" value="No" data-skin="flat" data-color="grey"> No
</label>
</div>
This is just an example, it's not recommended to add these properties in the style attribute - you should add it to a new class or add the display: inline; to the icheck-me class
You can use display:block to get the radio buttons underneath each other. Also, align the text to the top right of the cell by using: 'style="vertical-align: top;"'
So, your code would look like this:
<tr>
<td style="vertical-align: top;">Display on Homepage</td>
<td>
<div>
<label>
<input type="radio" class="icheck-me" name="show" value="Yes" data-skin="flat" data-color="orange" checked> Yes
</label>
<label>
<input type="radio" id="radio-inline" class="icheck-me" name="show" value="No" data-skin="flat" data-color="grey"> No
</label>
</div>
</td>
</tr>
And CSS:
.icheck-me{
display:block;
}
DEMO
When in a form I have several radio inputs that make a single control (example below), what's the most semantic way to group them together?
<form>
<!-- Single radio control made of 3 radio inputs -->
<input type="radio" name="X" value="A" />
<input type="radio" name="X" value="B" />
<input type="radio" name="X" value="C" />
<!-- Some other control -->
<input type="text" name="Y" value="D" />
</form>
I know I can enclose them in a paragraph (<p>..</p>), but I wonder if maybe list (<ul>..</ul>) would be more semantic approach?
You can group together by using fieldset
.radio_button{
list-style-type: none;
}
<form>
<h1>Testing Form Radio buttons</h1>
<fieldset>
<legend>Title</legend>
<ul>
<li class="radio_button">
<label for="title_1">
<input type="radio" id="title_1" name="title" value="M." />
Mister
</label>
</li>
<li class="radio_button">
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Ms." />
Miss
</label>
</li>
</ul>
</fieldset>
</section>
</form>
Try this:
<form>
<!-- Single radio control made of 3 radio inputs -->
<ul>
<li>
<input type="radio" name="X" value="A" />A
</li>
<li>
<input type="radio" name="X" value="B" />B
</li>
<li>
<input type="radio" name="X" value="C" />C
</li>
</ul>
<input type="text" name="Y" value="D" />
</form>
A good way would be using the bootstrap lib and format your forms with bootstrap
: Bootstrap form inputs
You can use the name field same if you want to get only 1 value selected,
And only selected field's value (value = "A") will be submitted.
You can group them using css styles. W3.css is a nice library like bootstrap.
W3.css examples
What I intend to do is to make each radio button group work independetly.
Please refer this http://codepen.io/anon/pen/tkqew
I want to select an option from each line, but it is selecting only one option.
In future work I want to generate this whole icon thread dynamically so please if you could suggest how I can do that.
A radio button group is created by specifying the same name attribute for the radio buttons in a group. Simply give another common name for the radio buttons in the second line so that they'll act as a different group...
Radio Button activity relies on the names. If you want a group of Radiobuttons just name the group.
<input type="radio" name="optionsRadios" class="optionsRadios2" value="option1" checked="checked" title="Nenhum">
{...}
<input type="radio" name="optionsRadios2" class="optionsRadios2" value="option1" checked="checked" title="Nenhum">
If you are using loops to creating those radio buttons, use the index (as a prefix) in the radio button name.
Like:
<input type="radio" name="first_1">
<input type="radio" name="first_2">
1 and 2 is the index here..
You can select more then one option in radio button but dont put the radio button name same as other button, every button should have unique name.
like this
<input type="radio" name="button1">
<input type="radio" name="button2">
also visit your link i have changed it
You need to give each "set" of radio buttons distinct names:
<div class="icon-thread">
<ul>
<li>
<input type="radio" name="optionsRadios_set1" class="optionsRadios2" value="option1" checked="checked" title="Nenhum">
<label class="radio" for="optionsRadios2"><i class="icon-ban-circle icon-stack-base text-error"></i></label>
</li>
<li>
<input type="radio" name="optionsRadios_set1" class="optionsRadios2" value="option2">
<label class="radio" for="optionsRadios2"><i class="icon-fixed-width icon-moon"></i></label>
</li>
<li>
<input type="radio" name="optionsRadios_set1" class="optionsRadios2" value="option3">
<label class="radio" for="optionsRadios2"><i class="icon-fixed-width icon-plane"></i></label>
</li>
</ul>
</div>
<div class="icon-thread">
<ul>
<li>
<input type="radio" name="optionsRadios_set2" class="optionsRadios2" value="option1" checked="checked" title="Nenhum">
<label class="radio" for="optionsRadios2"><i class="icon-ban-circle icon-stack-base text-error"></i></label>
</li>
<li>
<input type="radio" name="optionsRadios_set2" class="optionsRadios2" value="option2">
<label class="radio" for="optionsRadios2"><i class="icon-fixed-width icon-moon"></i></label>
</li>
<li>
<input type="radio" name="optionsRadios_set2" class="optionsRadios2" value="option3">
<label class="radio" for="optionsRadios2"><i class="icon-fixed-width icon-plane"></i></label>
</li>
</ul>
</div>
Edit: as an aside, you've misused the for attribute in the label. That should match the id of the input element.