I have written the following code:
male <input type="radio" name="sex" value="male">
female <input type="radio" name="sex" value="female">
other <input type="radio" name="sex" value="other">
All this is inside a form. How can I get them on one single line?
Wrap them in a label tag
<label>male <input type="radio" name="sex" value="male"></label>
<label>female <input type="radio" name="sex" value="female"></label>
<label>other <input type="radio" name="sex" value="other"></label>
also check if no styles are applied to the input elements which may display them as block elements
If you want the dots to go in a line from left to right, you are done. If you want to dots to go from top to bottom you can simple do:
male <input type="radio" name="sex" value="male"><br>
female <input type="radio" name="sex" value="female"><br>
other <input type="radio" name="sex" value="other">
<br> makes them jump to the next line
Related
i'm using laravel form my project with dompdf module for create pdf reports. I have a problem to show in the same line the checkbox and label.
i'm trying with this:
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
and this is the result:
check in Bootstrap website
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
OR try to use tables
There's some other CSS affecting the alignments. The checkbox and the label are in the same line by default.
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
Here's a series of three radio buttons wrapped in label elements. display: inline-block is applied to labels. For some reason only the first label can be selected, although on Firebug all labels appear well separated:
Fiddle
You must use 1 ID for each label FOR.
Also you need a group name which must be the same as in the other options.
<label for="pa_couleur1">
<input type="radio" name="color" id="pa_couleur1" value="blanc">blanc
</label>
<label for="pa_couleur2">
<input type="radio" name="color" id="pa_couleur2" value="bleu">bleu
</label>
<label for="pa_couleur3">
<input type="radio" name="color" id="pa_couleur3" value="marron">marron
</label>
https://jsfiddle.net/0jLdst52/5/
I found a code to help change stars color as you hover over them. It works like a charm. However, when I click on a star to fix the rating, it sends me to the top of the page. The stars are a little at the bottom of the page so it is very annoying to click on a star and end up at the top and having to scroll back down again.
The page is not being refreshed. It just sends me to the top. Is there a way to prevent this and allow the user to click on the star and stay on the part of the page where the stars are?
HTML
<fieldset class="rating">
<legend>Please rate:</legend>
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
</fieldset>
Here is the full code:
jsfiddle
Thanks
DEMO
Hi User2961763
It seems that top:-9999px; on .rating:not(:checked) > input causing problem. if you comment or remove this style it will work fine though you also need to take care that it wont affect your other functionality. Hope it Helps
.rating:not(:checked) > input {
position:absolute;
/* top:-9999px; */
clip:rect(0,0,0,0);
}
I am working on an android App using jQuery mobile,phonegap in which i have form i need to make the radio elements to be as native ones not as button like this
[1]: http://i.stack.imgur.com/YKEGa.png
, i do that by adding data-role="none" , but the radio size " selected circle " is too small how can i enlarge the radio size ?
please help me,
Thanks in advance.
You can basically style the fields as you wish. For example, the below theme has the style as you expect.
http://driftyco.github.io/graphite/
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
Say I have the following mark up:
<label for="name">Name:</label>
<input type="radio" name="name" id="name"/>
The order of the tags appear to be proper to me (in a semantic sense: label before the thing you're labeling). But I want to display this as radio button first, followed by the label. How can I do that in CSS?
You don't need CSS. Wrap your input in a label and put the text last.
<label><input type="radio" name="name" id="name"/>Name:</label>
Is that still semantic for you?
Or you could try the float.
Tag order in this case doesn't matter. And even if it did, then it would be the other way around - first you would have to create the radio button, and then reference it in the label.
To answer your question: just do it in the order you want to display it
<input type="radio" name="name" id="name"/>
<label for="name">Name:</label>
fiddle http://jsfiddle.net/Jm2JR/1/..
write like this:
input{
float:left;
}
Check this http://jsfiddle.net/3cLRg/
<label for="name" style="float:right;">Name:</label>
try this:
<label style="position:relative; left:100px;" for="name">Name:</label>
<input type="radio" name="name" id="name"/>
2nd approach is :
<input type="radio" name="name" id="name"/>
<label for="name">Name:</label>
Hi you just define your input tag as like that
<label>Name:
<input type="radio" name="name" id="name"/></label>
<br />
<label>
<input type="radio" name="name" id="name"/> Name
</label>
Live demo http://jsfiddle.net/rohitazad/bhBQn/1/