SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Michigan, USA
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question validating <forms> that span cells but not entire table in xhtml?

    Is it possible using valid XHTML Strict to have a <form> that spans over multiple table cells but does not wrap the entire table? See this screenshot of a time tracking web app to see why I'd want to do that:
    http://www.viktorwithak.com/Test/screen_timesheet.png

    For the screenshot above, what I'm currently doing is something like this...

    <tr>
    <form>
    <fieldset>
    <td><input type="text" value="samplefield" /></td>
    <td><input type="text" value="morefields" /></td>
    ...
    <td><button type="submit">submit</button></td>
    </fieldset>
    </form>
    </tr>

    ...but that obviously breaks validation in XHTML Strict.

    How would you set this up so it functions relatively the same but is valid markup? This issue has always bugged me, and to this point I've always just let my code break validation whenever I needed to do something like this. For most other applications, I could easily swap the tables for divs, but this is clearly tabular data and needs to stay that way.

    Thanks in advance.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    With a table the content goes inside the th and td elements or around the entire table. There is nowhere else in a table where anything except the components of the table itself can be defined.

    Unless you have more than one form to go in the table just move the form tag to wrap the table tag.

    The table itself substitutes for the fieldset if you are using a table with a form.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't make semantic sense. A form may contain a table, e.g., if you have multiple rows of identical field sets, like an order form.

    I can also see how you might put a form inside a table cell if you're not overly concerned with semantics and best practice, and use tables for layout.

    But I can't see how a form might occupy several cells within a table.

    As Stephen said, it's not possible. The reason why it's not possible is that it doesn't make any sense.
    Birnam wood is come to Dunsinane

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In this case I'd probably start with the form (and its fieldset/legend), but then from there have the table with its rows and columns, then finish it with the submit button in the last row of the table. Something like this, perhaps. Though bear in mind this is a stripped down bare-bones example, and doesn't include everything you'll need to make the table accessible to keyboard and screen reader users.

    HTML Code:
    <form action="#" id="form-name" method="post">
    	<fieldset>
    		<legend><span>Your Timesheet</span></legend>
    		<table>
    			<tr>
    				<th>Date</th>
    				<th>Client Project</th>
    				<th>Task</th>
    				<th>Time</th>
    				<th>Status</th>
    			</tr>
    			<tr>
    				<td></td>
    				<td></td>
    				<td></td>
    				<td></td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>&nbsp;</td>
    				<td>&nbsp;</td>
    				<td>&nbsp;</td>
    				<td><strong>Total: 16.00</strong></td>
    				<td><input class="submit" type="submit" value="Submit Timesheet" /></td>
    			</tr>
    		</table>
    	</fieldset>
    </form>
    Make sure you use all the proper attributes and elements, such as labels, summaries, captions, and so forth when you create your form. (I'm presuming this will be part of a dynamic Web application that will be very time sensitive so I'm not including too much.)

    If I could make one suggestion, don't make the date editable. Just have that data be parsed by the database or server and sent as plain HTML text. Your project, task, and time fields would likely select fields, and the status column would likely contain a combination of edit links and input buttons. (I see a lot of Ajax at work here.)

  5. #5
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Michigan, USA
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all for the input.

    @felgall, re: "Unless you have more than one form to go in the table..."
    That was exactly it, unfortunately. This screen [http://www.viktorwithak.com/Test/screen_timesheet_2.png] shows where the forms originally were. I point the finger at our ColdFusion developer for the original setup of the forms spanning table cells. It makes sense logically despite making no sense semantically, so figuring they're not concerned with valid markup I understand why they did it. I just had to figure out how to fix it.

    @Dan Schulz, re: "...don't make the date editable..."
    This is a time tracking application, and the user needs to be able to edit the date in case they're entering time from earlier in the week (which I often do). I'm actually using a pop-up calendar date picker (datepicker.js by frequency decoder) that works really well. It's just not in the screenshots at the moment.

    Here is my solution:
    http://www.viktorwithak.com/Test/screen_timesheet_3.png
    There were originally three <forms> in the <table>, and I narrowed it down to one.

    I removed the "submit timesheet" <form> from the end of the <table> and placed it in another part of the page. I removed the <form> being used for the delete <button> and replaced it with a link (<a href="index.cfm?fuseaction=delete& etc...). That left the one <form> that spanned multiple cells, so I could then easily wrap that around the entire <table>.

    Thanks again.
    Last edited by mykel_suthertun; Sep 5, 2008 at 08:03. Reason: fixed screenshot link


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •