HTML offers the dir option where i can put the direction of the elements to "right-to-left".
When i add this attribute to my body, everything works fine, except of the order of the label-input fields.
I place the input before the label like this:
<input id="input_id" type="radio" name="radio_button">
<label for="input_id">Radio Button text</label>
I understand that the dir attribute "just" changes the direction of the characters. But what is an easy way to reorder the input/label pair?
Demo via JSFiddle.
If your questions really is how to control the order of label and input field you need to add styling rules for this:
label{float:right;}
http://jsfiddle.net/ruv5w5zo/3/
<div>
<input id="input_id" type="radio" name="radio_button"/>
<label for="input_id">Radio Button</label>
</div>
input{
float:left;
}
link for FIDDLE
http://jsfiddle.net/ruv5w5zo/2/
You can simply use the following code
div{
display:flex;
flex-direction:row-reverse;
}
<div>
<input type="checkbox" id="tesone"/>
<label for="tesone">اهلا وسهلا</label>
</div>
Related
So i am trying to add radio button on my survey form and the button and the text is completly in different positions so here is a picture of how it looks --> enter image description here
i tried display: inline; but still nothing changed
The below code will work as you expected. Just add necessary attributes like name and for.
<p>Would you recommend this survey to your friend:</p>
<input type="radio" name="test" value="yes">
<label for="test">Yes</label><br>
According to the picture, your input tag width is 100%, that's why you are facing this issue. Add class inside input and use this CSS your problem has been fixed.
<style>
.inline-radio{width: auto;}
</style>
**HTML**
<p>Would you recommend this survey to your friend:</p>
<input type="radio" name="test" value="yes" class="inline-radio" >
<label for="test">Yes</label>
I'm trying to do something i think should be simple but i'm not getting it right, these are the lines i have written with no luck:
<input type="checkbox"> I agree to the <a hraf="terms & conditions.html></a> </input>
[i want this [this is the page i want the
as regular hyperlink to go to]
text]
how can i make it right? Thanks!
You need to use label like:
<label for='checkterm'>I agree to the terms</label>
<input type="checkbox" id='checkterm'>
Reference:
<label>: The Input Label element
I recommend that you also read this article regarding inputs (I see that you make mistakes)
Try with this:
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
<label style="display:inline; float:none" for="agree">
I agree with the terms and conditions.
</label>
Also check that you put the tag correctly. <a href=...>, you've got a mistake (you did put hraf).
I want to display the related text of the checkbox along with it.
<input id="Checkbox1" type="checkbox" value="Admin"><span>Admin User</span>
This is the most used markup to do that. But it doesn't feel good to use a separate span for the check box. And it doesn't even look good in a form.
Is there a way to relate these two with each other? Or what is the best way to do this?
use a Label and the for attribute.
The for attribute specifies which form element a label is bound to
<input id="Checkbox1" name="Checkbox1" type="checkbox" value="Admin" />
<label for="Checkbox1">AdminUser</label>
Also give your input a name
Instead of using for attribute you can use the nested <input type="checkbox">:
<label><input name="Checkbox1" type="checkbox">Admin User</label>
Instead of using <span> you can use the <label>-tag:
<label for="Checkbox1">Admin User</label>
It will 'attach' the label to your checkbox in a sense that when the label is clicked, it is as if the user clicked the checkbox.
For the styling, you need to apply your own styles to make them look 'together' yourself.
Hi I would like to target and modify the <label> tag only when is next to a input[type=radio], no in any other cirscuntances.
My code looks like this:
<fieldset>
<legend>Some legend</legend>
<p>Some explanation</p>
<label>
<input type="radio" name="#{name}" value="#{value}" />
</label>
</fieldset>
I tryied with fieldset label:first-child+input[type=radio]{} but doenst work, if someone can help me would be awesome.
EDIT:
What I want is to be able to style only the LABEL tag no the RADIO button INPUT tag, and this style will apply only when <label><input type="radio"></label> structure is found.
What you are asking for is not possible in CSS. It is not possible to traverse "back" or "up" the DOM tree (so you can't target previous siblings or parent nodes).
See this post: Is there a CSS parent selector?
I have 4 radio buttons (A, B, C, D). When I click on the radio button A, there would be another 2 options - A1 and A2. The same will happen with the others. And if I choose D2, another 2 radio buttons would appear.
How can I do this in HTML?
HTML and CSS3-only version (Fiddle):
HTML for group "D" (other groups are similar)
<div>
<input type="radio" name="level0" value="D" id="D"/>
<label for="D">D</label>
<div class="sub1">
<div>
<input type="radio" name="level1" value="D0" id="D0"/>
<label for="D0">D0</label>
</div>
<div>
<input type="radio" name="level1" value="D1" id="D1"/>
<label for="D1">D1</label>
<div class="sub2">
<div>
<input type="radio" name="level2" value="D10" id="D10"/>
<label for="D10">D1-0</label>
</div>
<div>
<input type="radio" name="level2" value="D11" id="D11"/>
<label for="D11">D1-1</label>
</div>
</div>
</div>
</div>
</div>
CSS
.sub1, .sub2 { display: none; }
:checked ~ .sub1, :checked ~ .sub2 {
display: block;
margin-left: 40px;
}
If you want more radio buttons to appear when a certain one is selected, I would suggest not "nesting" them inside one another in the html. Have javascript display a hidden group or RBs when a one is selected.
Frankly, I think using radio buttons to make a select box appear would be much more user friendly, as its clear that you're selecting from a different group. Too many radio buttons always looks ugly.
Other problems with your code: id's should be unique, put the RB text beside the radio button as opposed to inside the tag, and avoid table based layout if possible. inline javascript and css should be avoided too, but as this is a code sample it actually makes it more readable. Oh, most importantly, you have the other buttons set to appear on onclick, so they won't go away if you unselect the RB :D
You can only use a specific id on one element in a document. You have to put different id's on each element and make them visible separately:
<input onclick="document.getElementById('extra1').style.visibility='visible';document.getElementById('extra2').style.visibility='visible';" type="radio" />Apple
<input type="radio" id="extra1" style="visibility:hidden" other choice here />
<input type="radio" id="extra2" style="visibility:hidden" other choice here />
#guffa I think I'll just modify your answer a bit. Put all the optional radio buttons inside a <div> element like this:
<input onclick='document.getElmentById("optional_buttons").style.display="block"' type="radio" />
<div id="optional_buttons" style="display: none;" >
optional radio buttons
</div>