This question already has answers here:
Align form elements in CSS
(3 answers)
Closed 6 years ago.
I'm new to HTML, this being my first project. I'm trying to design a simple calculator, identical to this image.
The problem I'm having is I can't find a simple way to put spacing between the labels i.e "term, interest rate" and the input boxes meaning the layout looks poor. The easiest I've found is adding loads of  's but that seems ludicrous.
For example in the code below how can I get spacing between the "Term" and the input box?
<form>
<label>
Term <input name ="term" type ="text"/>
</label>
</form>
.table tr td{
text-align:right;
}
/*this sets padding space */
.table tr td{
padding-top:10px;
}
<form>
<table class="table">
<tr>
<td>
<label> Term </label>
</td>
<td><input name ="term" type ="text"/></td>
</tr>
<tr>
<td>
<label> Rate Blah Blah </label>
</td>
<td><input name ="blahblah" type ="text"/></td>
</tr>
</table>
</form>
you can use it like this
Related
I'm trying to check a checkbox using <label> but by clicking a row / <tr> of <table>. Is this possible??
I have tried to use jQuery, but I'm not quite satisfied with the result, because, I'll eventually select the texts inside the row, which isn't very user friendly
I also have tried to test it in HTML on Chrome
<table border="1">
<label>
<!-- This label is expected to be used to check on the checkbox by
clicking anywhere on the table row -->
<tr>
<td><input type="checkbox" /> Foo</td>
<td>Bar</td>
</tr>
</label>
</table>
I expected when I click bar the checkbox would be checked, but it didn't
Note:
Since this is impossible to be aquired through basic HTML, I'm going to close this question
Please set label for attribute to do this, below code will help you.
<table border="1">
<tr>
<td><input type="checkbox" id="mycheckbox" /> Foo</td>
<td><label for="mycheckbox">Bar</label></td>
</tr>
</table>
$('.checkBoxChecked').on('click', function(){
var checkbox = $(this).find('.Aps_checkbox');
checkbox.prop("checked", !checkbox.prop("checked"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr class="checkBoxChecked">
<td><input type="checkbox" id="mycheckbox" class="Aps_checkbox"/> Foo</td>
<td>Bar</td>
</tr>
<tr class="checkBoxChecked">
<td><input type="checkbox" id="mycheckbox2" class="Aps_checkbox"/> Foo2</td>
<td>Bar2</td>
</tr>
</table>
<!-- begin snippet: js hide: false console: true babel: false -->
It's not possible to achieve this by basic HTML as of now...
Based on W3, it said that <label> can only affect on one level of container only
Something like this:
Legal:
<label>
<div> AAAA</div>
<input type="checkbox">
Some text
</label>
Illegal:
<label>
<div> AAAA
<input type="checkbox">
</div>
Some text
</label>
So since my question is involving more than one level of containers, It can't be achieved by normal means
Reference:
Mozila Web Reference
Multiple labels can be associated with the same form control.
Clicking on any of the labels associated with an input element toggles the checked state of that input element.
To check a checkbox by clicking a table row, you can create a table where the first td element of each table row contains an input element, and the subsequent td elements contain labels for that input element, like so:
<table>
<tr>
<td>
<input id="foo" type="checkbox" />
</td>
<td>
<label for="foo">Foo Label 1</label>
</td>
<td>
<label for="foo">Foo Label 2</label>
</td>
</tr>
<tr>
<td>
<input id="bar" type="checkbox" />
</td>
<td>
<label for="bar">Bar Label 1</label>
</td>
<td>
<label for="bar">Bar Label 2</label>
</td>
</tr>
</table>
To maximize the clickable area of each table row, you can make each label element fill the width of its parent td element like so:
table td label {
display: block;
}
This question already has answers here:
Give border title in div
(4 answers)
Closed 7 years ago.
I guess its really simple, but I cant find it as I'm don't know how it is called.
I want to make a border with a title, something like this:
----TITLE_HERE----------------------------------
You can use the <fieldset> and <legend> tags to achieve this, as demonstrated in the code below pulled from this answer:
<div id="form" style="width:350px;">
<fieldset>
<legend style="color:blue;font-weight:bold;">General Information</legend>
<table>
<tr>
<td><span style="text-decoration:underline">C</span>hange Password To:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span style="text-decoration:underline">C</span>onfirm Password:</td>
<td><input type="text"/></td>
</tr>
</table>
</fieldset>
</div>
I think you're going for something like this :
fieldset {
border : none;
border-top : 1px solid #000;
}
<fieldset>
<legend>Title</legend>
Here is some demo content
</fieldset>
See also this Fiddle.
Im trying to do a linethrough over a label + checkbox both in a separate td.
In my example code I have created 2 tables:
Currently only table 1 is doing a line-through when checkbox = checked. I guess this is working because both elements share a td. Is there a way to fix this so table 2 can line-through instead of table 1? Thanks!
HTML:
<table id = "1">
<tr>
<td>
<input id="oregano" type="checkbox" class="checkedBox" />
<label for="oregano" class="checkedLabel">Oregano</label>
</td>
</tr>
</table>
<table id = "2">
<tr>
<td><input id="oregano" type="checkbox" class="checkedBox" /></td>
<td><label for="oregano" class="checkedLabel">Oregano</label></td>
</tr>
</table>
Stylesheet:
.checkedBox:checked + .checkedLabel {
text-decoration: line-through;
color: blue
}
Fiddle
http://jsfiddle.net/gdmpz506/
That is because you have a different syntax for each table.
If you put the checkbox and label in the same td in the second table it will work just fine. (and of-course make the id unique so that the second label does not point to the first element..)
.checkedBox:checked + .checkedLabel {
text-decoration: line-through;
color: blue;
}
<table>
<tr>
<td>
<input id="oregano-1" type="checkbox" class="checkedBox" />
<label for="oregano-1" class="checkedLabel">Oregano</label>
</td>
</tr>
</table>
<table>
<tr>
<td id="checktd">
<input id="oregano-2" type="checkbox" class="checkedBox" />
<label for="oregano-2" class="checkedLabel">Oregano 2</label>
</td>
</tr>
</table>
Demo at http://jsfiddle.net/gaby/gdmpz506/1/
It works in table 1 because there the input and label elements are siblings, i.e. children of the same element. It is irrelevant that the parent happens to be a td element. You are correctly using the “next sibling” operator +. (Here I’m assuming that you really want just the label struck out.)
The same is not possible when the input and label elements are not siblings, as they cannot be if they are in different td elements. There are no CSS selectors at present to handle such cases. You would need JavaScript to make checking a checkbox strike out the corresponding label.
I have a problem with aligning my labels and input fields in a form. Time and again I end up with something like this:
Which is produced with HTML like so:
...
<ul>
<li>
<label for="STREET">Street</label>
<input data-val="true" data-val-required="The Street field is required." id="STREET" name="STREET" type="text" value="P.O. Box 1053" />
</li>
<li>
<label for="SUITE">Suite</label>
<input id="SUITE" name="SUITE" type="text" value="" />
</li>
<li>
<label for="city">City</label>
<input data-val="true" data-val-required="The City field is required." id="city" name="city" type="text" value="Dalton" />
</li>
...
Naturally my issue is that the labels and the inputs don't line up, so the display is all jaggy, etc. I can personally think of many ways around this, using a table, setting a bunch of divs, and picking widths, etc. so that everything lines up properly.
It's not that these approaches don't work, but they don't seem to be more of a hack than a real solution, and then I end up having to manipulate the label widths if the label text / font changes, etc.
Is there an easier way to solve this type of problem, while preserving simple HTML / CSS or should I stick with the classic approach of hard coding widths, divs, using tables, etc ?
Here's an option
ul {
display: table;
}
li {
display: table-row;
}
label, input {
display: table-cell;
}
Of course you should adapt the css to your specific form, but this gives you table layout without sacrificing the markup. Here's a fiddle
it should be enough to set a width to the labels that is larger than the largest label-text
example css
label {
display:inline-block;
width:350px;
}
so all inputs would line up after 350px, is that your desired effect ?
http://jsfiddle.net/dKjpk/5/
Here is an option using floating inside the label if it's possible to give ul a fixed / relative width:
ul{
width:500px; // or 100%;
}
li{
width:100%;
display:block;
}
li{
list-style:none;
clear:both;
}
li label{
float:left;
}
li input{
float:right;
}
here's a fiddle
Arguably you could justify using a table here, since semantically you can consider that form to be tabular data.
Otherwise you need to either float the input elements right within their container so they are all flush, set a fixed width on the label elements, or use some kind of fluid grid to handle this (I usually use Foundation so I would use columns for this, with both label and input elements set to width: 100% within their fluid containers).
try it like this
by creating a table your things are in the same area beneath each other
<html>
<head>
<style>
label{
font-weight:bold;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td><label for="street">Street</label></td>
<td><input type="text" name="street"></td>
</tr>
<tr>
<td><label for="suite">Suite</label></td>
<td><input type="text" name="suite"></td>
</tr>
<tr>
<td><label for="city">City</label></td>
<td><input type="text" name="city"></td>
</tr>
<tr>
<td><label for="state_region">State or Region</label></td>
<td><select><option>Arizona</option></select></td>
</tr>
<tr>
<td><label for="pc">Postal Code</label></td>
<td><input type="text" name="pc"></td>
</tr>
<tr>
<td><label for="country">Country</label></td>
<td><select><option>USA</option></select></td>
</tr>
<tr>
<td><label for="phone">Phone</label></td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td><label for="fax">Fax</label></td>
<td><input type="text" name="fax"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" name="email"></td>
</tr>
</table>
</form>
</body>
I want to create a table where each td is a form field. What is the best way of approaching that? Should I create a regular table and apply css styles on the form fields to resemble the size of the td fields? Hmmm... what do you suggest?
You can place tags inside of a form easily, so I would recommend nesting a table in the form:
<form>
<table>
<tr>
<td>Name: <input type="text" name="name" /></td>
<td>Age: <input type="text" name="age" /></td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
Which would give you a one row, two column table with a labeled text box in each column. Be careful about nesting your HTML tags, this could get confusing fast if you made a large table/form.
One way is to use contenteditable
<html>
<table>
<tr>
<td>
<div contenteditable="true"></div>
</td>
</tr>
</table>
</html
People seem to be forgetting about display: table, display: table-row and display: table-cell!
Here's a demo jsFiddle.