I've been trying to make a basic form inside a table to keep all the input fields intact but I want to have some gap between the columns and that's why I tried inserting colspan but it's not working at all, When I try to do the same with the label it works but for some reason not with input field. Can anyone please help me with this?
<form>
<table>
<tr>
<td>
<label for = "first">First Name</label>
</td>
<td colspan="4">
<input type = "text" id = "first">
</td>
<td>
<label for = "last">Last Name</label>
</td>
<td>
<input type = "text" id = "last">
</td>
<td>
<button type="submit">Submit!</button>
</td>
</tr>
</table>
</form>
Try adding a margin to your input field with this in your css:
input { margin-right: 10px; }
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;
}
I am trying to add background color to a input box with
<td bgcolor = "color" >< foo>=</td>
my code look like this
<td bgcolor = "#fa8072">< some text goes here <input size="20"
name="pname" value="Bob"></td>
but I do not get any color. Can someone clarify how to write this?
This is because, if you only have the above code, you don't have a <table> tag to go along with the <td>. Instead, use this:
<table>
<tr>
<td bgcolor = "#fa8072">
< some text goes here
<input size="20" name="pname" value="Bob">
</td>
</tr>
</table>
Demo: https://jsfiddle.net/cp2xa4dp/3/
Try:
<td style="background-color: #fa8072"> some text goes here <input size="20" name="pname" value="Bob"></td>
JSFiddle: https://jsfiddle.net/suomyone/gvaxeu8g/
Ps. You're also missing the <table> and <tr> tags.
I have one row consisting of two tds. TD1 contains two texts(txt1 and txt2). txt2 in TD1 must be in line with TD2. Here's my code :
<tr>
<td width="220">
<span class="b">TB From:</span>
<span style="position: relative; left : 20px;" id="lblTBHoriz" class="b"><br>
<span style="padding-left: 1.5px"> TBN:</span>
</span>
</td>
<td>
<pre></pre>
<input type="text" id="tBFrom" name="tBFrom"
value="" size="20" maxlength="16"
onkeypress="return isNumberKey(event);" onchange="validate(this);" >
</input>
</td>
</tr>
The problem is TBN: and the input box in the other td must be in line and in mozilla its working perfectly. But in IE, the input box is going up the text TBN: and getting aligned with TB From: text. What can i do to fix this one ? Kindly help .
In case the <input> has to be at the bottom each time you can add a class to the td tag and add some CSS to it:
td.your-class
{
vertical-align:bottom;
}
Tables are supposed to have tabular data. It's not recommended to use them for lay-out.
You could use divtags instead.
<div>TB From:</div>
<div><label>TBN:</label><input type="text" vlaue="" /></div>
The divtags you can style however you like.
<tr>
<td colspan="2" width="220">
<span class="b">TB From:</span>
<span style="position: relative; left : 20px;" id="lblTBHoriz" class="b"><br>
<span style="padding-left: 1.5px"> TBN:</span>
</span>
</td>
<td colspan="2">
<pre></pre>
<br/>
<input type="text" id="tBFrom" name="tBFrom"
value="" size="20" maxlength="16"
onkeypress="return isNumberKey(event);" onchange="validate(this);" >
</input>
</td>
</tr>
http://jsfiddle.net/dolours/zvMKH/335/
Could I ask how I could place these input boxes and the Sumbit button on the same line please?
<td id="header-right">
<table>
<tr>
<td class = "Login-Bar"><div style = "width: 200px;">
<form action = "Login.php" method = "post">
Username: <input type = "text" name "Username" size = "10">
Password: <input type = "text" name "Password" size = "10">
<input type = "Submit">
</form></div>
</td>
</tr>
</table>
</td>
Thats the source code I have... It shows above my NavBar to the left, however I expected this to show on that same line, but it never it placed it as all under each other.
Thanks.
Don't use tables for layout
use label tag
Assign style float: left to both: labels and input fields. Then add clear below them (if you have any issues with elements overlapping each other).
Alternative would be to assign display: inline to the input fields.
You can apply this style to the form:
form {
display: inline-block;
width: 400px; /* or whatever width makes it work for you */
}
Try this for your css.
input {
float: left;
}
If you want to add some spacing. You can do something like this
input {
float: left;
margin-right: 5px;
}
Change the inner table definition to something like:
<form action="Login.php" method="post">
<table>
<tr>
<td class="Login-Bar">
Username:
<input type="text" name "Username" size="10" /></td>
<td class="Login-Bar">Password:
<input type="text" name "Password" size="10" /></td>
<td>
<input type="Submit" />
</td>
</tr>
</table>
</form>
Fiddle link.
I've got following auto generated HTML, which I can not change.
This HTML displays the message in em before the input field, however I need to move it to the right side of the input field.
I have tried using float right to the em, but it does not work.
I'll appreciate any help.
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
CSS Only solution (which I don't recommend, but works)
The jsfiddle: http://jsfiddle.net/rLhTs/
HTML:
<table>
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
<tr class="form-field">
<th scope="row">
<label for="user_name">Name</label>
<em>Name is required.</em>
</th>
<td>
<input type="text" value="" id="name_email" name="name_email">
</td>
</tr>
</table>
CSS:
.form-field:nth-child(1):after {
content:"Email is required.";
}
.form-field:nth-child(2):after {
content:"Name is required.";
}
You'll just have to declare the :after content for nth-child and you'll need to know specifically what you're trying to replace.
This is a JavaScript solution:
Check out this jsFiddle: http://jsfiddle.net/E8dJ9/3/
I've expanded it to show you it could work for any number of rows. You may have to refine this a bit depending on your real specific use case.
And the code for completeness:
HTML:
<table>
<tr class="form-field">
<th scope="row">
<label for="user_email">Email</label>
<em>Email is required.</em>
</th>
<td>
<input type="text" value="" id="user_email" name="user_email">
</td>
</tr>
<tr class="form-field">
<th scope="row">
<label for="user_name">Name</label>
<em>Name is required.</em>
</th>
<td>
<input type="text" value="" id="user_name" name="user_name">
</td>
</tr>
</table>
JavaScript (using jQuery):
$('th[scope="row"]').each(function(index, value) {
var em = $(this).find('em').text();
$(this).parent().find('td').append('<em>' + em + '</em>');
});
CSS:
.form-field th em {
display: none;
}
Try something like:
label {
float:left;
}
em {
float: right;
}
input {
float:left;
}
Although this will put the em on the farthest right spot of the parent container. Considering it is in a table it might work as is, can't test unless we have the full HTML with the opening table tags, etc.
If you are unable to do, use HTML5 validation for email in the input field
<input type="email" title="enter the email in correct format" required="true"/>
whenever the user clicks the submit button without entering the email or entered the email in wrong format, the form will not be submitted and error will be displayed.