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.
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;
}
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 need to align the labels on the left hand side properly, so that the textbox and text area at the same place..I have added a class to set the width but that does not work properly.
FIDDLE
Code:
<div id="feedbackdialogbox">
<div>
<h3>Feedback</h3>
</div>
<ul>
<li>
<label for="feedback_nm" class="feedback-label-len">(Optional) tell us who you are</label>
<input type="text" id="feedback_name">
<br>
</li>
<li>
<label for="feedback_msg" class="feedback-label-len">How can we do better?</label>
<textarea rows="5" id="feedback_msg" placeholder="Go ahead, type your feedback her..."></textarea>
<br>
</li>
<li>
<div id="radio_button_list_title_wrapper">
<div id="radio_button_list_title" class="feedback-label-len">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</div>
</div>
<br>
</li>
</ul>
<button id="feedback_submit">Send</button>
</div>
css
.feedback-label-len {
width:600px;
}
I think if I were in your place, I'd just add two </br> below the labels.
They are:
On the left hand side
They are left-aligned as well.
This obviously shall give you the same effect as
label {display:block;}
Adding display: block to the labels would be a fine solution for a simple form. If you're set on putting them side by side...
label {display: block; float: left}
li {overflow: hidden
.feedback-label-len {
display: block;
}
JSFIDDLE
I would use a table.
JSFIDDLE
<form method="post" action="feedback.php">
<table id="feedbackTable">
<tr>
<th><label for="txtName">(Optional) tell us who you are</label></th>
<td><input type="text" id="txtName" style="color:#000000" title="Enter your name" name="txtName" placeholder="Enter Your Name" /></td>
</tr>
<tr>
<th class="message"><label for="">How can we do better?</label></th>
<td><textarea title="Enter your message" name="txtMessage" rows="5" id="txtMessage" placeholder="Go ahead, type your feedback her..."></textarea></td>
</tr>
<tr>
<th><label for="txtEmail">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</label></th>
<td><input type="text" id="txtEmail" title="Enter your email address" name="txtEmail" value=""/></td>
</tr>
<tr>
<th><label title="Send"></label></th>
<td><input type="submit" style="color:#000000" value="Send" /></td>
</tr>
</table>
</form>
One approach you can try using is using tables in order to format the data. Using the table, tr (table row), and td (table data) html tags we can format the data in so that they are spaced correctly without using CSS!!!
<DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="feedbackdialogbox">
<div>
<h3>Feedback</h3>
</div>
<table>
<ul>
<tr>
<td>
<li><label for="feedback_nm" class="feedback-label-len">(Optional) tell us who you are</label></li></td>
<td><input type="text" id="feedback_name"></td>
</tr>
<tr>
<td><li><label for="feedback_msg" class="feedback-label-len">How can we do better?</label></li></td>
<td><textarea rows="5" id="feedback_msg" placeholder="Go ahead, type your feedback her..."></textarea></td>
</li></tr>
<li>
<div id="radio_button_list_title_wrapper">
<div id="radio_button_list_title" class="feedback-label-len">How likely are you to recommend Prices Paid to a colleague (1 means not likely, 5 means very likely)?</div>
</div>
<br>
</li>
</ul>
</table>
<button id="feedback_submit">Send</button>
</div>
</body>
</html>
Just so you know this method may upset html purists. The tag was designed to actually display table data and using it for other purposes such as formatting is sometimes considered improper by old school web coders. However it I have not been able to find an actual problem caused by formatting data like this and doing so is the easiest way for you to make pages such as the one you are asking about.
I hope this answered your question, if you need me to expand on this just ask but when I ran the code above it gave me something much like you described.
Okay so this is probably a fairly easy solution but I can't seem to find any answers anywhere else, I want my submit button on the far right column (Accept/Decline), but when I try and position it somewhere else it wont do it...
The CSS:
#table2 {
text-align: center;
margin-left:auto;
margin-right:auto;
overflow-y: auto;
height: 150px;
width:680px;
}
The Table: (I've removed a lot of code when I put it on here, if you want anymore of my code, please ask)
`
Employee name
Holiday Start Date
Holiday End Date
No. Days
Reason
Accept/Decline
<tr>
<td><%response.Write(objDBRS(0))%></td>
<td><%response.Write(formatdatetime(objDBRS(1)))%></td>
<td><%response.Write(formatdatetime(objDBRS(2)))%></td>
<td><%response.Write((objDBRS(3)))%></td>
<td><%response.Write((objDBRS(5)))%></td>
<td>
<input type="radio" name="radio<%=a%>" />
<input type="radio" name="radio<%=a%>" />
</td>
</tr>
<tr>
<td><input type="submit" id="send" name="send" value="Submit"></td>
</tr>
</table>
`
It is automaticaly placed on the left html:
<tr>
<td colspan="6"><input type="submit" id="send" name="send" value="Submit"></td>
</tr>
Give it a colspan 6 then you can move it to the right by using float in CSS or position with CSS
Is it ok to use tables to make web forms or should I use div's? I know how to use tables, but how should I make form with div's or is it better to use tables?
<form method="post">
<table>
<tr>
<td>
<label for="username">Username:</label>
</td>
<td>
<input type="text" name="username" id="username"/>
</td>
</tr>
<tr>
<td>
<label for="password">Password:</label>
</td>
<td>
<input type="password" name="password" id="password"/>
</td>
</tr>
<tr>
<td>
<input type="submit" name="cancel" value="Cancel"/>
</td>
<td>
<input type="submit" name="send" value="Send"/>
</td>
</tr>
</table>
</form>
Possible Duplicate: Why-not-use-tables-for-layout-in-html
Don't use tables, that's a very brittle, non-semantic layout, use proper CSS layout. Below are some presentations that explain some good approaches to form layout, including usability considerations. The first link is more about the code, and the second more about design and usability considerations:
Learning To Love Forms (Web Directions South '07)
Best Practices for Form Design
A rule to live by: Only use tables to display tabular data.
That has always worked well for me....
The absolutely best format for forms in my opinion is to use unordered lists inside fieldsets spiced up with labels. That's the most semantically correct way, anyways:
<form method="post" action="foo.php">
<fieldset>
<legend>Some fields</legend>
<ul>
<li>
<label for="foo">Foobar</label>
<input type="text" name="foo" id="foo" />
</li>
</ul>
</fieldset>
</form>
The fieldsets aren't mandatory but can liven up an otherwise dull form. The basic CSS to get an ul look like a form might be something like this:
form ul {
list-style: none;
margin: 0;
}
form ul li {
margin-bottom: 10px;
}
form ul li label {
display: block;
float: left;
width: 150px;
line-height: 24px;
}
For best HTML/CSS practices in general, I recommend to have a look at A List Apart. With regard to forms, here's an article which suits your need: Prettier Accessible Forms. For other examples, just google with keywords "semantic html form".
There is no such hard and fast rule or better way of doing forms in HTML. If you want to use div's in an easy way, its better to choose a CSS framework to make things easy like blueprint
Tables are not for layout, tables are for data period, css is the way to go, that is best practice.