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>
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>
I want to make it look like it looks at the picture.
I can't put label and radio "circle" in same line.
I was trying to add input class and set float: left but it makes a big space between those two.
<fieldset>
<legend>Choose car rental</legend>
<label>mini<input type="radio" name="carclass" value="mini" value="mini"></label>
<label>economy<input type="radio" name="carclass" value="economy"></label>
<label>compact<input type="radio" name="carclass" value="compact"></label>
<label>SUV<input type="radio" name="carclass" value="suv"></label>
<label>VAN<input type="radio" name="carclass" value="van"></label>
</fieldset>
<fieldset>
<legend>Choose optional equupment</legend>
<label>child seat<input type="checkbox" name="eq" value="seat"></label>
<label>GPS<input type="checkbox" name="eq" value="GPS"></label>
<label>DVD player<input type="checkbox" name="eq" value="dvd"></label>
</fieldset>
Not nescesary to use a label tag for radio fields. Try adding your radio fields like this:
<fieldset>
<legend>Choose car rental</legend>
<input type="radio" name="carclass" value="mini"> Mini<br>
<input type="radio" name="carclass" value="economy" checked> Economy<br>
<input type="radio" name="carclass" value="compact"> Compact<br>
<input type="radio" name="carclass" value="suv"> Suv<br>
<input type="radio" name="carclass" value="van"> Van
</fieldset>
<fieldset>
<legend>Choose optional equipment</legend>
<input type="radio" name="eq" value="seat" checked> Seat<br>
<input type="radio" name="eq" value="gps"> GPS<br>
<input type="radio" name="eq" value="dvd"> dvd
</fieldset>
If you need a clickable label to select the radio field, then you would need labels with for attributes and add id attributes to the input fields. Like this:
<fieldset>
<legend>Choose car rental</legend>
<input type="radio" name="carclass" id="mini" value="mini">
<label for="mini">Mini</label><br>
<input type="radio" name="carclass" id="economy" value="economy" checked>
<label for="economy">Economy</label><br>
<input type="radio" name="carclass" id="compact" value="compact">
<label for="compact">Compact</label><br>
<input type="radio" name="carclass" id="suv" value="suv">
<label for="suv">Suv</label><br>
<input type="radio" name="carclass" id="van" value="van">
<label for="van">Van</label>
</fieldset>
<fieldset>
<legend>Choose optional equipment</legend>
<input type="radio" name="eq" id="seat" value="seat" checked>
<label for="seat">Seat</label><br>
<input type="radio" name="eq" id="gps" value="gps">
<label for="gps">GPS</label><br>
<input type="radio" name="eq" id="dvd" value="dvd">
<label for="dvd">dvd</label>
</fieldset>
You need to put the <input> before the <label>, like so:
<label>This is the label</label>
<input type="radio" name="radio" value="radio">
If you want the radio to be selected when clicking on the label you have to add an ID to the input and reference that ID by using the for attribute. Like so:
<label for="radio1">This is the label</label>
<input type="radio" name="radio" id="radio1" value="radio">
If you want the label and radio on their own line, add a <br /> after the <input>.
You can add css like this
fieldset label {
display: block;
}
HTML
Place the <input> tag before the <label> tag and add a <br> after <label>
<input> <label></label> <br>
CSS
The essential styles are:
input, label {height: [line-height]; line-height: [height]; vertical-align: middle}
The rest of the CSS is either suggested or required. Required styles meaning to apply in the current layout, so it may or may not work as well under different circumstances. See comments in the demo.
BTW when a <form> is submitted the values of each form control (ex. <input>, <textarea>, <select>, etc) with a [name] attribute is collected then sent to the server. A radio button group commonly share a [name] because of its singular nature (normally only one radio can be selected), but if other types of form controls share a [name] then the values will be collected into an array with said [name]. Nothing wrong with that in of itself but just FYI since the checkboxes share the same [name=eq].
/* Suggested */
:root {
font: 400 16px/1.3 Verdana;
}
html,
body {
width: 100%;
height: 100%;
}
body {
overflow-x: hidden;
line-height: 1.3rem;
}
form {
display: flex;
flex-flow: row wrap;
}
fieldset {
width: fit-content;
}
/* Required */
input,
label {
display: inline-block;
font: inherit;
height: 1.3rem; /* Essential */
line-height: 1.3rem; /* Essential */
vertical-align: middle; /* Essential */
}
input {
width: 1rem;
}
[type=radio] {
vertical-align: bottom;
}
<form>
<fieldset>
<legend>Choose car rental</legend>
<input type="radio" name="carclass" value="mini">
<label>mini</label><br>
<input type="radio" name="carclass" value="economy">
<label>economy</label><br>
<input type="radio" name="carclass" value="compact">
<label>compact</label><br>
<input type="radio" name="carclass" value="suv">
<label>SUV</label><br>
<input type="radio" name="carclass" value="van">
<label>VAN</label><br>
</fieldset>
<fieldset>
<legend>Choose optional equipment</legend>
<input type="checkbox" name="eq" value="seat">
<label>child seat</label><br>
<input type="checkbox" name="eq" value="GPS">
<label>GPS</label><br>
<input type="checkbox" name="eq" value="dvd">
<label>DVD player</label><br>
</fieldset>
</form>
your just putting the text before the input dont use <br>
now you can use if you want them to wrap use on fieldset display:inline-flex;without targeting label or display:inline-block and you set the label to display:block
label{display:block;}
<fieldset>
<legend>Choose car rental</legend>
<label><input type="radio" name="carclass" value="mini">mini</label>
<label><input type="radio" name="carclass" value="economy">economy</label>
<label><input type="radio" name="carclass" value="compact">compact</label>
<label><input type="radio" name="carclass" value="suv">SUV</label>
<label><input type="radio" name="carclass" value="van">VAN</label>
</fieldset>
<fieldset>
<legend>Choose optional equupment</legend>
<label><input type="checkbox" name="eq" value="seat">child seat</label>
<label><input type="checkbox" name="eq" value="GPS">GPS</label>
<label><input type="checkbox" name="eq" value="dvd">DVD player</label>
</fieldset>
I want to make block for radio
This is my code.
<label> Rating
<input type="radio">great
<input type="radio">wonderful
</label>
But it does not work correctly.
label{
display: block;
}
<p> Rating</p>
<label for="radio1"><input type="radio" id="radio1" name="radiogroup1">great</label>
<label for="radio2"><input type="radio" id="radio2" name="radiogroup1">wonderful</label>
<div style="display:flex; width: 120px;">
<p style="flex:1">Rating</p>
<div style="flex:1">
<input type="radio">Good<br>
<input type="radio">Great
</div>
</div>
Do you mean something like this? You could also use a table to get the same effect.
Only with html:
<label> Rating: </label>
<p>
<input type="radio" name="rate" id="great">
<label for="great">great</label>
</p>
<p>
<input type="radio" name="rate" id="wonderful">
<label for="wonderful">wonderful</label>
</p>
Try this simple solution to display as list.
label li {
list-style:none;
}
<label> Rating
<li><input type="radio" name="group1">great</li>
<li><input type="radio" name="group1">wonderful </li>
</label>
You might not have do use any css here, you can create the structure using block elements.
Here you are trying to align a inline element in a block so you can use p, div or any other block element.
/* outline focus */
label:focus, input:focus{
outline: dotted 2px red;
}
/* No CSS to align the below elements */
<label for="rating"> Rating</label>
<p><label for="great">great</label><input type="radio" name="rating" id="great"></p>
<p><label for="wonderful">wonderful</label><input type="radio" name="rating" id="wonderful"></p>
I want these radio inputs to stretch across the screen, rather than one beneath the other:
HTML
<input type="radio" name="editList" value="always">Always
<br>
<input type="radio" name="editList" value="never">Never
<br>
<input type="radio" name="editList" value="costChange">Cost Change
CSS
input[type="radio"] {
margin-left:10px;
}
http://jsfiddle.net/clayshannon/8wRT3/13/
I've monkeyed around with the display properties, and googled, and bang (bung? binged?) for an answer, but haven't found one.
In your case, you just need to remove the line breaks (<br> tags) between the elements - input elements are inline-block by default (in Chrome at least). (updated example).
<input type="radio" name="editList" value="always">Always
<input type="radio" name="editList" value="never">Never
<input type="radio" name="editList" value="costChange">Cost Change
I'd suggest using <label> elements, though. In doing so, clicking on the label will check the element too. Either associate the <label>'s for attribute with the <input>'s id: (example)
<input type="radio" name="editList" id="always" value="always"/>
<label for="always">Always</label>
<input type="radio" name="editList" id="never" value="never"/>
<label for="never">Never</label>
<input type="radio" name="editList" id="change" value="costChange"/>
<label for="change">Cost Change</label>
..or wrap the <label> elements around the <input> elements directly: (example)
<label>
<input type="radio" name="editList" value="always"/>Always
</label>
<label>
<input type="radio" name="editList" value="never"/>Never
</label>
<label>
<input type="radio" name="editList" value="costChange"/>Cost Change
</label>
You can also get fancy and use the :checked pseudo class.
This also works like a charm
<form>
<label class="radio-inline">
<input type="radio" name="optradio" checked>Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 3
</label>
</form>
To get your radio button to list horizontally , just add
RepeatDirection="Horizontal"
to your .aspx file where the asp:radiobuttonlist is being declared.
Here is updated Fiddle
Simply remove </br> between input radio's
<div class="clearBoth"></div>
<input type="radio" name="editList" value="always">Always
<input type="radio" name="editList" value="never">Never
<input type="radio" name="editList" value="costChange">Cost Change
<div class="clearBoth"></div>
I have a multiple forms in one page. Each form has exactly the same content. But i encountered an issue regarding with my labels. I know that label "for" tag should be unique and pointed to the element id but I have to multiply the form for some reason.
Please refer to my code found in jsfiddle my code
<form>
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options">
<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options">
<label for="option3">Option 3</label>
<input type="radio" id="option3" name="options">
</form>
<!-- another form but the same content -->
<form>
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options">
<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options">
<label for="option3">Option 3</label>
<input type="radio" id="option3" name="options">
</form>
Thanks
Either:
Generate a prefix that you apply to all the ids in a given instance of a form
Don't use for or id and place the form controls inside the label elements.