I'm working on some styling in Wordpress with WP e-Commerce and in the checkout page there is a table in which the table headers are all getting left justified and not becoming the width of each of their columns. When I try the HTML code without the CSS it works fairly well but there is so much CSS being applied that I cannot figure out what is causing it, exactly.
Please see the HTML code in question below.
Any thoughts on how to find the culprit?
<table class="checkout_cart">
<tbody>
<tr class="header">
<th colspan="2">Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
<th> </th>
</tr>
<tr class="product_row product_row_0 alt">
<td class="firstcol wpsc_product_image wpsc_product_image_0"> <img src="31x31.jpg" alt="Spreading the Light" title="Light" class="product_image"> </td>
<td class="wpsc_product_name wpsc_product_name_0"> Spreading the Light </td>
<td class="wpsc_product_quantity wpsc_product_quantity_0">
<form action="/store/checkout/" method="post" class="adjustform qty">
<input type="text" name="quantity" size="2" value="1">
<input type="hidden" name="key" value="0">
<input type="hidden" name="wpsc_update_quantity" value="true">
<input type="submit" value="Update" name="submit">
</form>
</td>
<td><span class="pricedisplay">$5.00</span></td>
<td class="wpsc_product_price wpsc_product_price_0"><span class="pricedisplay"><span class="pricedisplay">$5.00</span></span></td>
<td class="wpsc_product_remove wpsc_product_remove_0">
<form action="/store/checkout/" method="post" class="adjustform remove">
<input type="hidden" name="quantity" value="0">
<input type="hidden" name="key" value="0">
<input type="hidden" name="wpsc_update_quantity" value="true">
<input type="submit" value="Remove" name="submit">
</form>
</td>
</tr>
</tbody>
</table>
You have 5 headers (th), but 6 colums below (td)
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 been doing some html code in a few days now, but i can't figure out how to make the it all in a horizontal look, just like this exsampel:
ID Name Commodity Weight Tolerance
Box Box drop down box box
So box stands for "input form" ofc, and a drop down should be full of names of commodities from my database.
Right now, i have this code so far:
<body>
<div id="header">
<h2 align="center" style="color: #FFFFFF">Edit Recept</h2>
</div>
<div id="content">
<div id="form-wrapper">
<form method="post" action="Front">
<table>
<tr>
<td>ID: <td>
<td><input type="text" name="Id" />
</tr>
<tr>
<td>Name:<td>
<td><input type="text" name="name" />
</tr>
</table>
<table>
<tr>
<p> </p>
<p>Add commodities to your recept: <p>
</tr>
<tr>
<td>Select commodity:<td>
<td><select>
<option value="" disabled="disabled" selected="selected">Please select Commodity</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</tr>
<tr>
<td>Weight:<td>
<td><input type="text" name="tolerance" />
</tr>
<tr>
<td>Tolerance:<td>
<td><input type="text" name="name" />
</tr>
<tr>
<td><input type="submit" value="Add" /><td>
<tr>
</table>
<br>
<input type="submit" value="Save" />
<input type="reset" value="Cancel" />
<input type="hidden" name="whichPage" value="prescription"/>
</form>
</div>
<p align="center">
Enter the new values and press save to make the change
</p>
</div>
Is there a trick how to do it easy?? My goal is to make it like i described on the top, and then add a button which will add a new line of input boxes under the other if you want to store more commodities in the same prescription.
Just make your labels all in one single row of the table, then the input fields for those labels should be jsut under in a second row. So you will have a colomn based input just as you wish, here is a fiddle as a sample.
<div id="header">
<h2 align="center" style="color: #FFFFFF">Edit Recept</h2>
</div>
<div id="content">
<div id="form-wrapper">
<form method="post" action="Front">
<table>
<tr>
<td>ID </td>
<td>Name</td>
<td>Select commodity</td>
<td>Weight</td>
<td>Tolerance</td>
</tr>
<tr>
<td><input type="text" name="Id" /></td>
<td><input type="text" name="name" /></td>
<td><select>
<option value="" disabled="disabled" selected="selected">Please select Commodity</option>
<option value="1">One</option>
<option value="2">Two</option>
</select></td>
<td><input type="text" name="tolerance" /></td>
<td><input type="text" name="name" /></td>
</tr>
</table>
<br />
<input type="submit" value="Save" />
<input type="reset" value="Cancel" />
<input type="hidden" name="whichPage" value="prescription"/>
</form>
</div>
<p align="center">
Enter the new values and press save to make the change
</p>
</div>
Note: You should pay attention to the closing tags for table element markups as you are missing some and introducing an open tag instead of a closing one in some rows.
Just a small hint. This will show the text and input box below each other. But you need to rearrange your whole table with the proper manner. Also dont use multiple tables. Use single table with many columns.
<table>
<tr>
<td>ID: </td>
<td>Name:</td>
</tr>
<tr>
<td><input type="text" name="Id" /></td>
<td><input type="text" name="name" /></td>
</tr>
</table>
Consider the following form (jsFiddle here):
<table class="table table-striped table-bordered table-condensed">
<caption><h2><em>-Express=</em> Time Entry</h2></caption>
<thead>
<tr>
<th>Date</th>
<th>Hours</th>
<th>Notes</th>
</tr>
</thead>
<tfoot class="well">
<tr>
<td colspan="4">
<input type="submit" name="Submit" value="Submit Time Entry" class="btn btn-primary">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td scope="row">
<input type="date" name="date1" id="date1" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
</td>
<td>
<input type="number" name="hours1" id="hours1" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes1" id="notes1" wrap="soft" class="span12"></textarea>
</td>
</tr>
<tr>
<td scope="row">
<input type="date" name="date2" id="date2" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
</td>
<td>
<input type="number" name="hours2" id="hours2" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes2" id="notes2" wrap="soft" class="span12"></textarea>
</td>
</tr>
<tr>
<td scope="row">
<input type="date" name="date3" id="date3" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
</td>
<td>
<input type="number" name="hours3" id="hours3" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes3" id="notes3" wrap="soft" class="span12"></textarea>
</td>
</tr>
</tbody>
</table>
You might notice that each of the input fields lack an associated label; this design relies on the table's headers to describe what should go into each input element.
Is this accessible?
What is the ideal way to label repetitive input fields without repeating the label for each row? Is this an ideal use-case for implementing aria-labelledby?
I just looked at this with my screen reading software and while it is technically accessible it is difficult to use. Specifically I tend to jump from form field to form field with hotkeys when filling out a form. With your example this does not work, I have to use navigation keys to read the table cell by cell so the corresponding column header will be read with the associated form field. While I do not have much web development experience it appears that aria-labelledby will fix your issue. If you look at the following
jsFiddle I used aria-labelledby ion the first row of fields. Any fields in the first row had meaningful names announced, in this case the header corresponding to the field. Since I did not use aria-labelledby on the other rows field labels were not automatically announced and I had to use table navigation to determine what the fields were. See jsFiddle code below.
<table class="table table-striped table-bordered table-condensed">
<caption><h2><em>-Express=</em> Time Entry</h2></caption>
<thead>
<tr>
<th><div id="dateInput">Date</div></th>
<th><div id="hoursInput">Hours</div></th>
<th><div id="notesInput">Notes</div></th>
</tr>
</thead>
<tfoot class="well">
<tr>
<td colspan="4">
<input type="submit" name="Submit" value="Submit Time Entry" class="btn btn-primary">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td scope="row">
<input type="date" aria-labelledby="dateInput" name="date1" id="date1" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
</td>
<td>
<input type="number" name="hours1" id="hours1" aria-labelledby="hoursInput" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes1" id="notes1" aria-labelledby="notesInput" wrap="soft" class="span12"></textarea>
</td>
</tr>
<tr>
<td scope="row">
<input type="date" name="date2" id="date2" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
</td>
<td>
<input type="number" name="hours2" id="hours2" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes2" id="notes2" wrap="soft" class="span12"></textarea>
</td>
</tr>
<tr>
<td scope="row">
<input type="date" name="date3" id="date3" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
</td>
<td>
<input type="number" name="hours3" id="hours3" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes3" id="notes3" wrap="soft" class="span12"></textarea>
</td>
</tr>
</tbody>
</table>
You can do what Jared said, or in this case, I would support using the title attribute on the <input>s.
<input type="date" name="date1" id="date1"
min="2014-01-02" max="2014-03-02" value="" maxlength="10"
class="span8 date" title="date worked">
ARIA markup will work, but... I find, by far, the simplest and most effective solution is the title attribute when you have repeated form elements, especially if they are created dynamically. Just as Ryan B suggests.
Sometimes simpler is actually better.
Does this code contain anything invalid. I have a form with a table inside. Is that alright?
<form name="myForm" id="myForm">
<table id="myTab">
<tr>
<td>
<label for="id">User ID:</label>
<input type="text" id="id" />
</td>
</tr>
<tr>
<td>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" />
</td>
<td>
<button type="button" class="submit">Submit</button>
</td>
</tr>
<tr><td><input type="reset" /></td></tr>
</table>
<div class="error"></div><div class="correct"></div>
</form>
For the result -- http://jsfiddle.net/mBwAh/
A <form> can contain text and markup (paragraphs, lists, etc.), there are no restrictions listed for what it can contain. Here's the W3C spec which says so:
http://www.w3.org/TR/html4/interact/forms.html#h-17.3
As for you're <table> usage, it's perfectly valid HTML, in fact the <table> element is in the HTML5 spec Here's the W3C Spec for that:
http://www.w3.org/TR/html5/tabular-data.html#the-table-element
You'll want to also add a colspan to your <tr> which only contains one <td>, You should also add a name attribute to your <input> as it won't do anything on submit without it.
<input type="text" id="id" name="id" />
You're not saying what the problem is, but one thing that catches the eye is the fact that you have differing numbers of tds per row without a colspan to even them out.
<tr>
<td colspan="2"> <--- makes column span across three columns in the other rows
<form name="myForm" id="myForm">
<table id="myTab">
<tr>
<td colspan="2">
<label for="id">User ID:</label>
<input type="text" id="id" />
</td>
</tr>
<tr>
<td>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" />
</td>
<td colspan="2">
<button type="button" class="submit">Submit</button>
</td>
</tr>
<tr><td colspan="2"><input type="reset" /></td></tr>
</table>
<div class="error"></div><div class="correct"></div>
</form>
Some colspans were missing.
You can check the code for HTML5 validity here: http://validator.w3.org/#validate_by_input
This might be "Valid", but you're using a table structure for layout purpose, which is not a great idea. If possible, you should change your stucture to something like this.
<form name="myForm" id="myForm">
<label for="id">User ID:</label>
<input type="text" id="id" /><br />
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" /><br />
<button type="button" class="submit">Submit</button><br />
<input type="reset" /><br />
<div class="error"></div><div class="correct"></div>
</form>
Hope this help :)
my question is how would I use an HTML::Template tag inside a value of form field to change that field. For example
<table border="0" cellpadding="8" cellspacing="1">
<tr>
<td align="right">File:</td>
<td>
<input type="file" name="upload" value= style="width:400px">
</td>
</tr>
<tr>
<td align="right">File Name:</td>
<td>
<input type="text" name="filename" style="width:400px" value="" >
</td>
</tr>
<tr>
<td align="right">Title:</td>
<td>
<input type="text" name="title" style="width:400px" value="" />
</td>
</tr>
<tr>
<td align="right">Date:</td>
<td>
<input type="text" name="date" style="width:400px" value="" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" value="Cancel">
<input type="submit" name="action" value="Upload" />
</td>
</tr>
</table>
I want the value to have a <TMPL_VAR> variable in it.
You use it the same way you'd use a template variable anywhere else:
<input type="text" name="date" style="width:400px" value="<TMPL_VAR NAME=date>" />
Yeah, it's ugly and it breaks your HTML validator. Which is one of the many reasons why I like Template Toolkit better.