I have a 4x4 table of radiobuttons. In the first row (an extra row ABOVE the 4x4) I would like a button centered horizontally. I have tried colspan etc. but all still leave the radiobutton in a column like the others, and thus uncentered.
Obligatory Table-less Answer:
<div>
<div class="center"><input type='button' value='hello' /></div>
<ul class="radioList">
<li>
<label for="radio1">
<input type="radio" id="radio1" />
Checkbox 1</label>
</li>
<li>
<label for="radio2">
<input type="radio" id="radio2" />
Checkbox 2</label>
</li>
<li>
<label for="radio3">
<input type="radio" id="radio3" />
Checkbox 3</label>
</li>
<li>
<label for="radio4">
<input type="radio" id="radio4" />
Checkbox 4</label>
</li>
</ul>
</div>
.center { text-align:center; }
.radioList {
list-style:none;
width:100%;
}
.radioList li {
float:left;
width:25%;
}
http://jsfiddle.net/Amudt/
http://jsfiddle.net/EJbny/
<table style='width:100%;' border=1>
<tr>
<td colspan=4 style='text-align:center;'><input type='button' value='hello'></td>
Like this? Just use CSS and the text-align:center rule on the top row. Here's a jsFiddle example.
<table>
<tr>
<td colspan="4" style="text-align:center"><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
<td><input type="radio" /></td>
</tr>
</table>
Related
<fieldset style="width: 400px;">
<legend><h2>Form Validation</h2></legend>
<form>
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="ime"></td>
</tr>
<tr>
<td>Username</TD>
<td><input type="text" name="username"></td>
</tr>
</table>
<input type="submit" value="Submit" name="send">
</form>
</fieldset>
I am currently making a form inside of a table... This is kind of new for me, since I don't know how to do it. Above is the code I have tried, and I need something like this.
If someone could get me on the right path, ill be really grateful.
Note: As you can see in the picture above, it needs to have colspan of 3, so they can all have equal width. I made a perfect one with just <form>, but i just found out we have to do it inside of a table...
The easiest way to do it is colgroup - there you can specify, how much of space of the table any column should take.
For your example it would be something like this: (plz note that I didn't feel all of needed rows)
<fieldset style="width: 400px;">
<legend><h2>Form Validation</h2></legend>
<form>
<table>
<colgroup>
<col width="40%"/>
<col width="60%"/>
</colgroup>
<tr>
<td>Name:</td>
<td><input type="text" name="ime"></td>
</tr>
<tr>
<td>Username:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Re-type password:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" id="male" name="gender" />
<label for="male">Male</label>
<input type="radio" id="female" name="gender" />
<label for="female">Female</label>
<input type="radio" id="other" name="gender" />
<label for="other">Other</label>
</td>
</tr>
<tr>
<td>Programming skills:</td>
<td>
<input type="checkbox" id="java"/>
<label for="java">Java</label>
<input type="checkbox" id="ruby"/>
<label for="ruby">Ruby</label>
<input type="checkbox" id="net"/>
<label for="net">.Net</label>
</td>
</tr>
</table>
<input type="submit" value="Submit" name="send">
</form>
</fieldset>
I want a form where someone choose a unique value of radio buttons vertical and horizontal (you'll see below what i mean). I know tha i can do it with name. In my code below you see same name in vertical.
Here's my code
<tr>
<td style="text-align:left;">tracking_url</td>
<td><input type="radio" name="tracking_url" value="image_url"></td>
<td><input type="radio" name="pr_image" value="tracking_url"></td>
<td><input type="radio" name="availability" value="tracking_url"></td>
<td><input type="radio" name="pr_price" value="tracking_url"></td>
<td><input type="radio" name="pr_final_price" value="tracking_url"></td>
<td></td>
</tr>
<tr>
<td style="text-align:left;">image_url</td>
<td><input type="radio" name="tracking_url" value="image_url"></td>
<td><input type="radio" name="pr_image" value="image_url"></td>
<td><input type="radio" name="availability" value="image_url"></td>
<td><input type="radio" name="pr_price" value="image_url"></td>
<td><input type="radio" name="pr_final_price" value="image_url"></td>
<td></td>
</tr>
<tr>
<td style="text-align:left;">availability</td>
<td><input type="radio" name="tracking_url" value="availability"></td>
<td><input type="radio" name="pr_image" value="availability"></td>
<td><input type="radio" name="availability" value="availability"></td>
<td><input type="radio" name="pr_price" value="availability"></td>
<td><input type="radio" name="pr_final_price" value="availability"></td>
<td></td>
</tr>
<tr>
<td style="text-align:left;">price</td>
<td><input type="radio" name="tracking_url" value="price"></td>
<td><input type="radio" name="pr_image" value="price"></td>
<td><input type="radio" name="availability" value="price"></td>
<td><input type="radio" name="pr_price" value="price"></td>
<td><input type="radio" name="pr_final_price" value="price"></td>
<td></td>
</tr>
<tr>
<td style="text-align:left;">full_price</td>
<td><input type="radio" name="tracking_url" value="full_price"></td>
<td><input type="radio" name="pr_image" value="full_price"></td>
<td><input type="radio" name="availability" value="full_price"></td>
<td><input type="radio" name="pr_price" value="full_price"></td>
<td><input type="radio" name="pr_final_price" value="full_price"></td>
<td></td>
</tr>
This is how i want to use radio buttons
but also someone can use radio buttons like
Is there any way to do it with html or javascript??
var col, el;
$("input[type=radio]").click(function() {
el = $(this);
col = el.data("col");
$("input[data-col=" + col + "]").prop("checked", false);
el.prop("checked", true);
});
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #ccc;
padding: 10px;
}
th:empty {
border: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<table>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>Twix</td>
<td><input type="radio" name="row-1" data-col="1"></td>
<td><input type="radio" name="row-1" data-col="2"></td>
<td><input type="radio" name="row-1" data-col="3"></td>
</tr>
<tr>
<td>Snickers</td>
<td><input type="radio" name="row-2" data-col="1"></td>
<td><input type="radio" name="row-2" data-col="2"></td>
<td><input type="radio" name="row-2" data-col="3"></td>
</tr>
<tr>
<td>Butterfingers</td>
<td><input type="radio" name="row-3" data-col="1"></td>
<td><input type="radio" name="row-3" data-col="2"></td>
<td><input type="radio" name="row-3" data-col="3"></td>
</tr>
</table>
https://css-tricks.com/radio-buttons-with-2-way-exclusivity/
The radio buttons within a row need to have the same name="nameValue" value. The value fields can be different for each radio button.
I think it would be better to use checkboxes. And control if other checkboxes could be checked or not using javascript.
Here I implemented in Angular 7 input radio button vertically and horizontal
The Idea behind this is that with radio button we have name property which makes single select either by row or column but for both row and column. I placed the row in name and handled column with javascript whenever button will click.
This is HTML CODE
<section class="editor">
<strong>Editor</strong>
<div>
<label>Add option</label>
<button (click)="addOption()">+</button>
<div *ngFor="let option of options;let i = index">
<span>{{option.title +(i+1)}}</span><button (click)="deleteOption(i)"
*ngIf="options.length>2">X</button>
</div>
</div>
</section>
<hr>
<section>
<strong>Builder</strong>
<div class="builder">
<label>Question title goes here</label><br>
<div *ngFor="let option of options;let row_index = index">
<span>{{option.title +(row_index+1)}}</span>
<span *ngFor="let rank of options;let column_index=index">
<input type="radio" name="{{row_index}}" class="{{column_index}}"
(click)="check(column_index,$event)">
</span>
</div>
</div>
</section>
And this is my .ts file code where I Implemented with Javascript
export class AppComponent {
options = [{
title: "option",
rank: 0,
}, {
title: "option",
rank: 0
}]
constructor() {
}
ngOnInit(): void { }
addOption() {
this.options.push({
title: "option",
rank: 0
})
}
deleteOption(i) {
this.options.splice(i, 1);
}
check(column_index, event) {
Array.from(document.getElementsByClassName(column_index)).map(x=>x['checked']=false);
event.target.checked=true;
}
}
I have a number of labels and their textfields and their corresponding checkbox like below.
I want to align them in the center and proper spacing between them.
Here's the fiddle where I am trying.
For my screen at the moment, there's no distance between the text fields.
<div class="col-sm-4">
<table>
<tbody><tr>
<td><label for="">Design number</label></td>
<td><input type="text" name="Design number" value="SK123"></td>
</tr>
<tr>
<td><label for="">Price</label></td>
<td><input type="text" name="Price" value="500"><br><br></td>
</tr>
<tr>
<td><label for="">Never Out Of Stock</label></td>
<td><label><input type="checkbox" value=""><br><br></label></td>
</tr>
<tr>
<td><label for="">Pattern</label></td>
<td>
<label> <input type="checkbox" value="">Stripes<br></label>
<label><input type="checkbox" value="">Checks<br></label>
<label><input type="checkbox" value="">Prints<br></label>
<label><input type="checkbox" value="">Solid<br></label>
</td>
</tr>
<tr>
<td><label for="">Color</label></td>
<td>
<br><br>
<label><input type="checkbox" value="">White<br></label>
<label><input type="checkbox" value="">Blue<br></label>
<label><input type="checkbox" value="">Green<br></label>
<label><input type="checkbox" value="">Red<br></label>
<label><input type="checkbox" value="">Yellow<br></label>
</td>
</tr>
<tr>
<td><label for="">Occasion</label></td>
<td>
<br><br>
<label><input type="checkbox" value="">Casual<br></label>
<label><input type="checkbox" value="">Fancy<br></label>
<label><input type="checkbox" value="">Office<br></label>
</td>
</tr>
<tr>
<td><label for="">Fabric</label></td>
<td>
<br><br>
<label><input type="checkbox" value="">Silk<br></label>
<label><input type="checkbox" value="">Denim<br></label>
<label><input type="checkbox" value="">Velvet<br></label>
</td>
</tr>
</tbody>
</table>
</div>
Here a good (I hope) format of your code:
table {
width:800px;
}
table td {
width:70%;
padding-bottom: 5px;
padding-top: 5px;
border-bottom:solid 1px #dddddd;
/* text-align: center; <---- If you want all aligned to the center. */
}
table td:first-child {
width:30%;
}
label {
min-width:75px;
margin-left:10px;
}
input[type="checkbox"] {
margin-right:5px;
}
I have removed the "br" tag and add spaces.
The JSFiddle
<div class="col-sm-4">
<table>
<tbody>
<tr>
<td><label for="">Design number</label></td>
<td><input type="text" name="Design number" value="SK123"></td>
</tr>
<tr>
<td><label for="">Price</label></td>
<td><input type="text" name="Price" value="500"></td>
</tr>
<tr>
<td><label for="">Never Out Of Stock</label></td>
<td><input type="checkbox" value=""></td>
</tr>
<tr>
<td><label for="">Pattern</label></td>
<td>
<label><input type="checkbox" value="">Stripes</label>
<label><input type="checkbox" value="">Checks</label>
<label><input type="checkbox" value="">Prints<br></label>
<label><input type="checkbox" value="">Solid<br></label>
</td>
</tr>
<tr>
<td><label for="">Color</label></td>
<td>
<label><input type="checkbox" value="">White<br></label>
<label><input type="checkbox" value="">Blue<br></label>
<label><input type="checkbox" value="">Green<br></label>
<label><input type="checkbox" value="">Red<br></label>
<label><input type="checkbox" value="">Yellow<br></label>
</td>
</tr>
<tr>
<td><label for="">Occasion</label></td>
<td>
<label><input type="checkbox" value="">Casual<br></label>
<label><input type="checkbox" value="">Fancy<br></label>
<label><input type="checkbox" value="">Office<br></label>
</td>
</tr>
<tr>
<td><label for="">Fabric</label></td>
<td>
<label><input type="checkbox" value="">Silk<br></label>
<label><input type="checkbox" value="">Denim<br></label>
<label><input type="checkbox" value="">Velvet<br></label>
</td>
</tr>
</tbody>
</table>
</div>
Look fiddle : https://jsfiddle.net/4xrfw842/1/
Edit your html code
<div class="col-sm-4">
<table>
<tbody><tr>
<td><label for="">Design number</label></td>
<td><input type="text" value="SK123" name="Design number"></td>
</tr>
<tr>
<td><label for="">Price</label></td>
<td><input type="text" value="500" name="Price"><br><br></td>
</tr>
<tr>
<td><label for="">Never Out Of Stock</label></td>
<td><label><input type="checkbox" value=""></label></td>
</tr>
<tr>
<td><label for="">Pattern</label></td>
<td>
<label> <input type="checkbox" value="">Stripes<br></label>
<label><input type="checkbox" value="">Checks<br></label>
<label><input type="checkbox" value="">Prints<br></label>
<label><input type="checkbox" value="">Solid<br></label>
</td>
</tr>
<tr>
<td><label for="">Color</label></td>
<td>
<label><input type="checkbox" value="">White<br></label>
<label><input type="checkbox" value="">Blue<br></label>
<label><input type="checkbox" value="">Green<br></label>
<label><input type="checkbox" value="">Red<br></label>
<label><input type="checkbox" value="">Yellow<br></label>
</td>
</tr>
<tr>
<td><label for="">Occasion</label></td>
<td>
<label><input type="checkbox" value="">Casual<br></label>
<label><input type="checkbox" value="">Fancy<br></label>
<label><input type="checkbox" value="">Office<br></label>
</td>
</tr>
<tr>
<td><label for="">Fabric</label></td>
<td>
<label><input type="checkbox" value="">Silk<br></label>
<label><input type="checkbox" value="">Denim<br></label>
<label><input type="checkbox" value="">Velvet<br></label>
</td>
</tr>
</tbody></table>
</div>
https://jsfiddle.net/4xrfw842/5/
How do I align the "remember me" box so that it comes to left side so that the checkbox should start with username and password text boxes start.
Current it is -
<tr>
<td colspan="2" class="buttons">
<label>
<input id="rememberme" name="rememberme" value="remember" type="checkbox" /> Remember me</label>
<input type="submit" name="login" value="Login" />
</td>
</tr>
Add a label around your "Remember Me" text and assign a class to it;
Then give that class the following style:
.aux {
float: left;
}
<tr>
<td colspan="2" class="buttons">
<label>
<input id="rememberme" name="rememberme" value="remember" type="checkbox" />
<label class="aux"> Remember me</label>
</label>
<input type="submit" name="login" value="Login" />
</td>
</tr>
Is this you're looking for?
you will need to remove margin for checkbox which is given by default
check for the first
Js Fiddle
.valign{
vertical-align: bottom;
}
input{
margin:0;
}
try to insert your form in a two columns table:
<table>
<tr>
<td>User Name:</td>
<td><Input type="text"/></td>
</tr>
<tr>
<td>Password:</td>
<td><Input type="password"/></td>
</tr>
<tr>
<td></td>
<td class="buttons">
<label><input id="rememberme" name="rememberme" value="remember" type="checkbox" /> Remember me</label>
<input type="submit" name="login" value="Login"/>
</td>
</tr>
fiddle: http://jsfiddle.net/2wj86k32/
<tr><td class="buttons"><label>Username</label></td>
<td><input id="rememberme" name="rememberme" type="text" /></td></tr>
<tr><td class="buttons"><label>Username</label></td>
<td><input id="rememberme" name="rememberme" type="text" /></td></tr>
<tr><td class="buttons"></td>
<td><input id="rememberme" name="rememberme" type="checkbox" /><label>remember me</label><input type="submit" value="Login" /></td></tr>
Is it your need ?
<table>
<tr>
<td>Yes <input type="radio" value="yes" /></td>
</tr>
<tr>
<td>No <input type="radio" value="no" /></td>
</tr>
</table> Test Text
Normally, the text 'Test Text' will be pushed to the next line. Is it possible to keep the 'Test Text' text on the same line as the table?
Just in case someone needs the reverse:
Some text <table style="display:inline-table">
<tr>
<td>Yes <input type="radio" value="yes" /></td>
</tr>
<tr>
<td>No <input type="radio" value="no" /></td>
</tr>
</table>
<table style="width: 250px;float: left;">
<tr>
<td>Yes <input type="radio" value="yes" /></td>
</tr>
<tr>
<td>No <input type="radio" value="no" /></td>
</tr>
</table>
Some text
<div>
<div style="width: 70%;float:left">
<table>
<tr>
<td>Yes <input type="radio" value="yes" /></td>
</tr>
<tr>
<td>No <input type="radio" value="no" /></td>
</tr>
</table>
</div>
<div style="width:30%"> Test Text</div>
</div>
Let me know if this works... Change the percentage to whatever fits for you
http://jsfiddle.net/ARMRh/
You can try this. You might want to check for browser compatibility though.
<html>
<body>
<table style="display: inline;">
<tr>
<td>Yes <input type="radio" value="yes" /></td>
</tr>
<tr>
<td>No <input type="radio" value="no" /></td>
</tr>
</table>test
</body>
</html>