I'm designing a form: image and code below. There are about 30 more sections like this, and I just need the inputs (right) to align to the list (center). What's the best way to do this? Can I just alter my table HTML to make it work?
Layout http://img85.imageshack.us/img85/2199/screenshot20091227at719.png
<table border="1">
<thead>
<tr>
<th>Category</th>
<th>Risk Factors</th>
<th>Hours per Day</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>Repetition</strong>
<p>Finger, Wrist, Elbow, Shoulder or Neck Motions</p>
</td>
<td>
<ol>
<li><strong>Identical or Similar Motions Performed Every Few Seconds</strong><br />Motions or motion patterns that are repeated every 15 seconds or les. (Keyboard us is scored below as a separate risk factor.)</li>
<li><strong>Insensitive Keying</strong><br />Scored Separately from other repetitive tasks in the repetition category and includes steady pace as in data entry.</li>
<li><strong>Intermittent Keying</strong><br />Scored Separately from other repetitive tasks. Keyboard or other input activity is regularly alternated with other activities for 50 to 75 percent of the work.</li>
</ol>
</td>
<td>
<input autocomplete="off" size="2" type="text" name="a_1" id="a_1" class="text-input" value="<?php print $this->validation->a_1?>"/>
<input autocomplete="off" size="2" type="text" name="a_2" id="a_2" class="text-input" value="<?php print $this->validation->a_2?>"/>
<input autocomplete="off" size="2" type="text" name="a_3" id="a_3" class="text-input" value="<?php print $this->validation->a_3?>"/>
</td>
</tr>
</tbody>
</table>
I think you will need to use distinct rows in the table for each line. For the first column, you can use "rowspan=3" to have that column flow over all 3 rows.
You can break that down into a 4x3 table, with the left side having just 2 rows, the second having a rowspan=3. That would probably end up looking the way you wanted.
To get your horizontal dividers in there, you may want to use colgroup to group your columns; this allows you to attach borders. By the same token, you can format the white row as a THEAD and the grey part as a TBODY.
Related
I have this issue. I have written this HTML code, but I am unable to align between the question, yes/no buttons and text area box. My question has huge space from yes/no buttons, but when I drag the text area box and making it smaller, the question and yes/no buttons come closer as I wanted it to look. How can I fix this issue so my question is next to the yes/no buttons and box is underneath and doesn't move when I drag to make it bigger or smaller?
<table cellspacing="2" cellpadding="2">
<tr>
<td class="data_yy">
<input type="radio" name="jack" id="jack" value="Y" onclick="hideShowJacks('Y');"/><label>Yes</label>
<input type="radio" name="jack" id="jack" value="N" checked onclick="hideShowJacks('N');"/><label>No</label>
</td>
<td class="data_xx"> Are are taking English class in fall?</td>
</tr>
<tr>
<td>
<textarea cols="120" rows="5" maxLenghth="20" class="resizable" name="jack" id="jack"> </textarea>
<div class="plaintext" style="justify:left" id="jack"> </div>
</td>
</tr>
</table>
So, this is a table, and you have two cells in the first row, and only one cell in the second row. You'll want that second cell to have colspan="2" as a property...
<td colspan="2">
And then, for the second part of your issue ("so my question [text] is next to the yes/no buttons"), you'll want to change the first yes/no cell to have <nobr> so it doesn't linebreak, and also set width="1"...
<td class="data_yy" width="1">
Made a quick working demo.
Does this look right?
I have a table which contains a 'Select All' checkbox as the first column in the header row.
The problem is column headers make perfectly sense when they represent the data type of their columns but the content of this th is just a checkbox with a "Select All" label.
As it is now, it sets a relationship with all the checkboxes in its column, we're basically saying that all the checkboxes are someway related to "Select All".
Is there any way to markup a 'Select All' checkbox in the table header so the relationship in terms of labeling is broken with all the checkboxes below it?
I've read that changing the th in the table header that houses the 'Select All' checkbox to a td will solve this (and it does), but was curious if there's another solution that wouldn't require me to affect the markup of the header.
Screen reader reads as follows for the checkbox table header and table cell:
This is a table of Manage Courses. table with 3 rows and 6 columns
row 1 Select all items in this table column 1
Select all items in this table
checkbox not checked
row2 Select all items in this table column 1
Dev ILT 1
checkbox not checked
As you can see announcing the select checkbox for the course 'Dev ILT 1' as 'Select all items in this table' is misleading
Code example. This is just the header and body section. Not all rows or headers are listed in the code example as it's not relevant
<thead>
<tr class="thead-main">
<th align="center" scope="col" valign="top" class="colheadcheckbox">
<input type="checkbox" aria-label="Select all items in this table" onclick="SelectAllCheckbox.CheckUncheckAll(this, 'selectedID')" id="SelectAll">
<label for="SelectAll"><span class="hidden">Select all items in this table.</span></label>
</th>
<th scope="col" align="left" valign="middle" class="colhead">
<a href="?reverseSortBy=Name" title="Sort this column by descending order" class="sortdown">
<span> Name </span>
<img src="/geonext/images/skins/simple/schemes/dalmatian/indicator_sort_up.png" width="9" height="9" border="0" alt="This column is sorted by ascending order" title="This column is sorted by ascending order"> </a>
</th>
<th scope="col" align="left" valign="top" class="colhead">
Course Code
</th>
<th scope="col" align="left" valign="top" class="colhead">
Type
</th>
</tr>
</thead>
<tbody>
<tr class="first odd">
<td align="center" valign="middle" class="">
<input type="checkbox" class="checkbox with-font" name="selectedID" id="selectedID2" value="2">
<label for="selectedID2"><span class="hidden"> 2</span></label>
</td>
<td class="sorted" align="Left">
<label for="selectedID2">Dev ILT 1
</label>
</td>
<td align="Left"> ILT1 </td>
<td align="Left"> Instructor Led </td>
</tr>
<tr class="even">
<td align="center" valign="middle" class="">
<input type="checkbox" class="checkbox with-font" name="selectedID" id="selectedID1" value="1">
<label for="selectedID1"><span class="hidden"> 1</span> </label>
</td>
<td class="sorted" align="Left">
<label for="selectedID22507408476">Dev UDT 1</label>
</td>
<td align="Left"> UDT1 </td>
<td align="Left"> User Defined Task </td>
</tr> '
</tbody>
I'm having a hard time understanding how 'Select All' is a valid heading. The heading is meant to provide context for the data in the associated cells. Used properly, a screenreader will read out the heading as you navigate into the column/row.
If someone navigates from a cell in the second column into a cell in the first, it would theoretically read
"[h1]Select All checkbox unchecked[/h1] [td]input-label checkbox unchecked[td]"
(square bracket content added for clarity - if you are navigating from one column to the next, the column header is read out before the data for each new column you navigate into)
This hardly provides context as to what the checkbox is. The 'Select All' checkbox should more likely be used as the last element or even a footer element rather than a heading.
It's hard to fully understand without a code example, but I would suggest never including functional elements in a table heading. It's intended for phrasing content.
Kind of a side issue but hopefully if you're using <th> for all your other column headings, you're also using the scope= property too. Don't force the screen reader to guess whether your <th> is a row header or column header. Valid values for scope are 'row', 'col', 'rowgroup', and 'colgroup'. (The 'group' names are for spanned rows and columns.)
It sounds like you'd like a scope=none, analogous to role=none (in ARIA 1.1). There isn't such a thing. If a cell in a table is not supposed to be a header, then <th> shouldn't be used. Making it a <td> is the proper way to mark it up.
Now, you might be able to fake it if you use a header= on the <td> elements in your first column to disassociate them from their column header, but I haven't tried that. I'm not sure what happens if you have a properly marked <th> and then a <td header='foo'> below it, where 'foo' is another object on your page. The screen reader might still read the column header. It might be worth a try, though.
As you spotted well, the first cell is not a header, change it to a td
<td align="center" valign="top" class="colheadcheckbox">
<input type="checkbox" aria-label="Select all items in this table"
title="Select all items in this table" onclick="..." />
</td>
There is no use of using aria-label when you already provide a label
You may use the title attribute to give an hint for non screenreader users who want understand what is this checkbox; title is correctly supported by screenreaders when used on control elements.
You could also consider a two rows solution using rowspan=2 attribute for other columns:
<tr>
<th scope="col">Select</th><th rowspan="2" scope="col">... </th>
</tr><tr>
<td><label><input type="checkbox" onclick="..." />All</label></td>
</tr>
Making the "Select" and "All" text visible will make the things clearer.
You also should reconsider the label of your other checkboxes as 1, 2, 3, ... are not very descriptive.
<input type="checkbox" id="selectedID1" value="1" title="Select Dev UDT 1" />
Basically, I have a table with inputs inside a form tag, that are required by user to fill in.
When I test it, the form is working, but only when there is one row in a table. With two an more rows, a required attribute is not working.
I've written a simple example
This works, click enter inside input field to see.
<form>
<table>
<tr>
<td>
<input type="text" name="usrname" required>
</td>
</tr>
</table>
</form>
<br>
This doesn't work, click enter inside input field to see.
<form>
<table>
<tr>
<td>
<input type="text" name="usrname" required>
</td>
</tr>
<tr>
<td>
<input type="text" name="surname" required>
</td>
</tr>
</table>
</form>
That's because forms with more than one text input aren't submitted by hitting enter. Try adding a submit button to both forms and you'll see it works fine.
In your example, is that supposed to be two identical fields in the different cells (and one of them is just misspelled)? If so, that's likely your problem. If they are intended to be two separate fields, it should work, but I'd need to see a more real-world example.
Also, I'd highly recommend using CSS to format/style your form. If that sounds intimidating, try Bootstrap--it makes creating pretty forms extremely easy.
I'm new to this site, so I will try and explain my situation as clearly as I can!
I am currently trying to create a HTML form with 4 input fields and one textarea contained within a table.
I am trying to set my textarea to cover 2 rows within the table so I've used the colspan tag. Though this doesn't seem to be working (see picture) and when I change the textarea height within my CSS file, the input fields are being pushed further over to the right and I'm unsure why.
My HTML code for the form:
<table style='width:100%'>
<tr>
<th><input type='text' name='name' required placeholder='Name' />
<th>
<th><input type='text' name='email' required placeholder='Email' /></th>
</tr>
<tr>
<th><input type='text' name='mobile' required placeholder='Mobile'/>
<th>
<th><input type='text' name='subject' required placeholder='subject' /></th>
</tr>
<tr>
<th colspan='2'> <textarea></textarea></th>
</tr>
</table>
My actual outcome:
See Screenshot
You have accidentally created a new table head cell (<th> on line 4) instead of closing the first (</th>).
This should hilight the issue: https://jsfiddle.net/odvnLy52/1/
With your HTML the browser will create a table with 3 columns, not 2. The last cell will span 2 of those 3 columns.
This is an example with the HTML fixed: https://jsfiddle.net/odvnLy52/
Let's assume I have the following structure
<table>
<tr>
<td>
<input type="text" name="name" />
</td>
<td>
<input type="submit" name="submit" />
</td>
</tr>
...
</table>
I need to have forms in each row, but because my inputs are in other <td> elements, I don't know how to place the <form> element (of course I can use colspan="2" and put the form into it, but I need to have two other <td> elements).
How can I solve this?
UPDATE: I don't want to use Javascript to solve this problem :)
Just place the tags around the table:
<form action="...">
<table>
...
</table>
</form>
This form will "handle" all the input fields inside the table.
The best solution: Use divs instead of tables.
Other solution, create a separate table for each row. That way, you can put each table in a separate form and put the input fields in the td-s, so they will be inside the form too.
You can make a table, and in the table cells, create a form, and in the form, create another table:
<table>
<tr><td>
<form>
<table>
<tr><td>
....
</tr></td>
</table>
</form>
</tr></td>
</table>
I am pretty sure it is not possible to mix and match inputs in a form if the forms don't follow each other sequentially i.e. "assign" an input to a form.