HTML Radio Buttons: add space between the buttons from the same groupe - html

I have 3 radio buttons on the same line in a td of the table like that:
<td align="left">
CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" />
USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
Now I would like to add some spaces between those radio buttons and I don't know how to do it.
I tryed to use width attribute, margin attribute but nothing changes.
Thank you very much.


Check working example on jsbin
Also, here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<td align="left">
CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" />
USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
</body>
</html>
CSS:
input[type="radio"]{
margin: 0 10px 0 10px;
}


Use like this in CSS
input[type="radio"]{
//padding: or margin or line-height for better spaces bettween radio button according to your need and design;
}


Try this:
input[type="radio"]{margin:10px 0};}
put this in the css folder or in the header section of your html file. If your putting this in your html file in your header section, it should look like this:
<style type="text/css">
input[type="radio"]{margin: 10px 0};}
</style>
Hope this helped!


If you don't want to use fixed padding to the buttons, then consider wrapping each one with <label> tag, this will make the labels clickable too.
HTML:
<label>CHF <input type="radio" name="currency" id="chf_currency" checked="checked" onChange="currencyChanged()" /></label>
<label>USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/></label>
<label>EUR <input type="radio" name="currency" id="eur_currency" onChange="currencyChanged()"/></label>
CSS:
<style type="text/css">
label + label {
margin-left: 20px;
}
</style>
http://jsfiddle.net/9cJJ9/

Related

Aligning different multiple form inputs on one line

I'm trying to align multiple form inputs as well as some text on one line in two scenarios (vertical-align:bottom, and not specific alignment) Please see the attached code where you can see how just about all elements aligns differently.
What is the best/proper way to solve this? Would really appreciate if someone could modify the code so all the elements aligns properly.
Thank you.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Sample 1, with vertical align bottom:<br>
<font style="font-size:45px;vertical-align:bottom">🔍</font>
<input type="text" style="width:100px;height:45px;font-size:45px;vertical-align:bottom">
<input type="checkbox" style="width:45px;height:45px;vertical-align:bottom">
<input type="button" value="Search" style="height:45px;vertical-align:bottom">
<br><br>
Sample 2, without vertical align bottom:<br>
<font style="font-size:45px">🔍</font>
<input type="text" style="width:100px;height:45px;font-size:45px">
<input type="checkbox" style="width:45px;height:45px">
<input type="button" value="Search" style="height:45px">
</body>
</html>

It's because all inputs have different margins. Try setting the margin of all inputs to the same value.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Sample 1, with vertical align bottom:<br>
<font style="font-size:45px;vertical-align:bottom; margin: 10px;">🔍</font>
<input type="text" style="width:100px;height:45px;font-size:45px;vertical-align:bottom; margin: 10px;">
<input type="checkbox" style="width:45px;height:45px;vertical-align:bottom; margin: 10px;">
<input type="button" value="Search" style="height:45px;vertical-align:bottom; margin: 10px;">

The attribute selector isn't making any changes in css

I am new to css, and I am experimenting with css attribute selectors. I am trying to implement it to a radio button, but it seems not to do it's job
I tried moving the style tag inside or outside the head tag, but that doesn't seem to be the problem at all.
<!DOCTYPE HTML>
<html>
<style>
[type="radio"]{
margin: 800 px;
color:palevioletred;
size: 200px;
}
</style>
<head>
</head>
<body>
<input type="radio" name="gender" value="male">Male</input>
<input type="radio" name="gender" value="female">Female</input>
<input type="radio" name="gender" value="female">Other</input>
</body>
</html>
It has to change the color,size and margin (they are just test cases). I am not getting why there are no changes?

Let me clear you something out. Until here it is ok:
<input type="radio" name="gender" value="male"/>
to continue on just do that:
<input type="radio" name="gender" value="male"/><label>Male</label>
.
.
.
easy as that.

I'll put anything that was going wrong in code comments.
<!DOCTYPE HTML>
<html>
<!-- you cannot put the style tag (or anyhting else except the doctype)
anywhere except in the head or body of the document -->
<style>
[type="radio"] {
margin: 800 px; /* has to be 800px, not 800 px */
color: palevioletred;
size: 200px; /* this would have to be font-size or width depending on what you are trying to accomplish, not size */
}
</style>
<head>
</head>
<body>
<!-- input elements cannot have text or HTML content -->
<input type="radio" name="gender" value="male">Male</input><!-- and thus, no closing tag either -->
<input type="radio" name="gender" value="female">Female</input>
<input type="radio" name="gender" value="female">Other</input>
</body>
</html>

How to separate radio buttons?

I'm aware this may seem like a stupid question that every should know. But I just can't for the life of me work it out.
The look I need to achieve is:
| == radio button
|Terrorists nice even spacing here |Counter-Terrorists
I have these radio buttons:
Image
But what i need is for them to be equally spaced while staying in the dead center of the page.
Ive messed around with them for ages to no avail.
HTML:
<input type='radio' id='choice' value='terrorist' class='radiopick'>Terrorist's
<input type='radio' id='choice' value='countert' class='radiopick'>Counter-Terrorist's
CSS:
input.radiopick{
}

try this.
HTML
<form>
<div class="radiopick">
<input type='radio' id='choice' value='terrorist' />Terrorist's</div>
<div class="radiopick">
<input type='radio' id='choice' value='countert' />Counter-Terrorist's</div>
</form>
CSS
form {
display:flex;
text-align:center;
}
form .radiopick {
justify-content: center;
width:150px;
margin: auto;
}

Have you thought of using tables? Although I don't fully understand the question, if you want even spacing for each box you could do something like:
<!DOCTYPE html>
<html>
<body>
<table style="width:300px" align="center">
<tr>
<td><input class="radiopick" type="radio" name="test" value="yes" />Terrorist</td>
<td><input class="radiopick" type="radio" name="test" value="yes" />Counter-Terrorist</td>
</tr>
</table>
</body>
</html>
An example can be found here

Adjusting checkboxes To Align Center

I want to adjust checkboxes in the middle of screen.
My html code:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Test</title>
</head>
<body>
<form method="get" style="text-align: center">
<input name="check1" type="checkbox">short text<br>
<input name="check2" type="checkbox">medium-length text__________<br>
<input name="check3" type="checkbox">long text________________________________<br>
<input name="Submit1" type="submit" value="submit"></form>
</body>
</html>
The checkboxes are on different positions because of different text length.
What's the best way to adjust them to a vertical line roughly to the position of the checkbox of the longest text ("check3")?
I'm sorry for this probably simple question.

You can change it to this which I believe will get you what you want:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Test</title>
</head>
<body>
<form method="get" style="text-align: center;">
<div style="display: inline-block; text-align: left;">
<input name="check1" type="checkbox">short text<br>
<input name="check2" type="checkbox">medium-length text__________<br>
<input name="check3" type="checkbox">long text________________________________
</div>
<br>
<input name="Submit1" type="submit" value="submit">
</form>
</body>
</html>
This way you don't need to know the width of your text beforehand.

Use div tag and then u can use margin attribute and remove
style="text-align: center"
form form tag
#checkbox {
float:left
margin-left:70px;
}
<div id="checkbox">
<form method="get" >
<input name="check1" type="checkbox">short text<br>
<input name="check2" type="checkbox">medium-length text__________<br>
<input name="check3" type="checkbox">long text________________________________<br>
<input name="Submit1" type="submit" value="submit"></form>
</div>
http://jsfiddle.net/48fwg/

You can go with something as simple as setting a width to your form and then setting margin: 0 auto like so:
HTML
<form method="get">
<input name="check1" type="checkbox" />short text<br>
<input name="check2" type="checkbox" />medium-length text__________<br>
<input name="check3" type="checkbox" />long text________________________________<br>
<input name="Submit1" type="submit" value="submit" />
</form>
CSS
form { display: block; margin: 0 auto; width: 400px; }
jsFiddle
!OR!
If you don't want to set the width, you can set the display of the form to table and get the same result, but with an auto width:
HTML -> the same
CSS
form { display: table; margin: 0 auto; }
jsFiddle
!OR!
If you want it fully centered, horizontal and vertical, you can use a variation of the following:
HTML
<table>
<tbody>
<tr>
<td>
<form method="get">
<input name="check1" type="checkbox" />short text<br />
<input name="check2" type="checkbox" />medium-length text__________<br />
<input name="check3" type="checkbox" />long text________________________________<br />
<input name="Submit1" type="submit" value="submit" />
</form>
</td>
</tr>
</tbody>
</table>
CSS
html, body { margin: 0; height: 100%; width: 100%; }
table { height: 100%; margin: 0 auto; }
td { vertical-align: middle; }
jsFiddle

Adding white space after input?

I have this kind of html
<label>
<input type="checkbox">
Print document
</label>
The problem is that Print document text is alwats sticed to check box?
I can not add Print Document in new element, of controller, is it possible to do that
is simple CSS rule?

Add CSS :
input[type=checkbox]{
padding-right : 10px;
}

the correct html is : <input type="checkbox"><label>Print document</label>
After you can select in css the checkbox like this :
input[type=checkbox]{
margin-right: 15px;
}

You can do this:
FIDDLE
HTML:
<input type="checkbox">
<label>
Print document
</label>
CSS:
label{
margin-left:20px;
}

You can use margin in style:
Inline CSS:
<label>
<input type="checkbox" style="margin-right:15px;">
Print document
</label>
Internal CSS:
<head>
<style>
input[type=checkbox]{
margin-right: 15px;
}
</style>
</head>
<label>
<input type="checkbox" style="margin-right:15px;">
Print document
</label>
External CSS:
style.css
input[type=checkbox]{
margin-right: 15px;
}
page.html
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<label>
<input type="checkbox" style="margin-right:15px;">
Print document
</label>
Demo:
Inline CSS
Internal CSS
External CSS