Re: [WSG] Can I use a table in a form?
On 12 Jan 2005, at 18:25, Mike Foskett wrote: Creating a method of output without an equivalent method of input seems more than oversight. Forms are a means of input. Tables are a means of displaying tabular data. Input and output mechanisms rarely have to be the same. I input data to a computer using a keyboard. It's output to screen. An input is a data object. Data objects stacked neatly by row and file are by definition tabular. Sorry, but that's utter rot. If you're going to get all OOP on my ass, input would be a data object method, whereas the data it's self would be a property of the object. Completely different things! You can come up with as many ways to justify the use of layout tables for forms, but it doesn't make it right! Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Can I use a table in a form?
Ted Drake wrote: I'm not one to say screw accessibility, I need my pages to look purty, but the point of my question is: we may have 30 to 50 people registering. If I include a label for each fieldset, the page is going to be bulky and possibly less usable for those with sight. A table would make life easy, but making life easy isn't justification enough to do it wrong. I'd really like to make life easy and give some accessibility in the process. Having 50 labels that say age1, age2, age2..age50 for the 50 age inputs doesn't seem appropriate for the average user. I have to admit that I'm confused by what exactly your doing. Maybe posting up your form would help. It sounds like you're saying that you're creating one massive form intended to take the input of 50 people which sounds like madness. Why not just create a form that takes the input from one person at a time like most forms do? Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Can I use a table in a form?
Pringle, Ron wrote: I'm sorry, I'm coming onto this thread late, so I might be misinformed as to what you're trying to accomplish. So you have a form with a variable number of fields depending on how many travelers are to be insured, correct? With a maximum of 50? Ah, now I understand what Ted is trying to do. Frankly, there is not going to be an easy way of doing this, regardless of the accessibility issues. Thats a LOT of data to enter. I would almost think you'd want to deal with each traveler separately, one at a time, in some sort of paged form. For instance, if I fill out the initial part of the form and indicate 5 travelers to be insured, the form would be submitted, the initial form fields temporarily stored, and then the next form presented with fields for traveler 1. Once that is filled and submitted, on to traveler two. Absolutely. Doing it any other way would be a usability nightmare. In that case, your form is broken into smaller chunks and leaving the labels on each field would be essential and not even an issue. Exactly This would seem to make it easier for both your sighted users and visually impaired users. My experience with forms has been that it is better to progressively present large forms (along with an appropriate indication of where in the process the user is). I would think that approach would increase your completion percentage as opposed to presenting a huge form with up to 50 name, age, etc. fields to be filled out at once. Couldn't agree more. A huge form as described would scare the living daylights out of most people and would be ripe for errors. Much better to break these things down into easier to deal with chunks. Sounds like the problem is with Ted's form design and the accessibility issue/tables issue is just a symptom. Always better to treat the cause rather than the symptoms. Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Can I use a table in a form?
On Wed, 12 Jan 2005 18:01:38 +, Andy Budd [EMAIL PROTECTED] wrote: I think that inputs in a table are ok. This is tabular data, although not output, but input, but the structure certainly is tabular. To read a table user needs to understand its structure (associate content with headings, navigate). The same skill is needed to fill a form in a table. I think that it is quite easy to remember four fields and their labels don't need to be repeated every time, especially when there is possibility of hearing all labels twice (th+label) Bobby and other accessiblity tools are just stupid programs and don't rely on their judgement, if you know better. If you give good explanation of layout and purpose of that form-table in table summary I think that is going to be quite accessible. -- pozdrawiam, Kornel Lesiski ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Can I use a table in a form?
Sorry Andy, I'll have to agree to disagree. Personally speaking, the use of a table to layout tabular input is as valid as using a table to layout tabular output. Though I have no issue with other semantically correct methods previously outlined. In most scenarios I prefer them. The conceptual model I use is not from OOP but database manipulation Sources Sinks. Where data input and data output are conceptually the positive and negative of the same thing. This does not change solely because of using (X)HTML to describe them. As far as the original issue is concerned. I completely concur that a more usable and accessible solution is bite-sizing the input, thereby escaping the need for tabular input completely. Though inevitably the final solution remains in the hands of the developer. Warm regards mike 2k:)2 marqueeblink e-mail: [EMAIL PROTECTED] site: http://www.webSemantics.co.uk /marquee/blink -Original Message- From: Andy Budd [mailto:[EMAIL PROTECTED] Sent: 13 January 2005 09:55 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Can I use a table in a form? On 12 Jan 2005, at 18:25, Mike Foskett wrote: Creating a method of output without an equivalent method of input seems more than oversight. Forms are a means of input. Tables are a means of displaying tabular data. Input and output mechanisms rarely have to be the same. I input data to a computer using a keyboard. It's output to screen. An input is a data object. Data objects stacked neatly by row and file are by definition tabular. Sorry, but that's utter rot. If you're going to get all OOP on my ass, input would be a data object method, whereas the data it's self would be a property of the object. Completely different things! You can come up with as many ways to justify the use of layout tables for forms, but it doesn't make it right! Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This footnote also confirms that this email message has been swept by MIMEsweeper for the presence of computer viruses. www.mimesweeper.com ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Can I use a table in a form?
Mike Foskett wrote: Sorry Andy, I'll have to agree to disagree. Personally speaking, the use of a table to layout tabular input is as valid as using a table to layout tabular output. and Kornel Lesinski wrote: I think that inputs in a table are ok. This is tabular data, although not output, but input, but the structure certainly is tabular. It seems to me that there is a lot of post rationalisation and spurious justification going on here. If you want to use tables to lay out your forms (or anything else for that matter) then go for it. It just seems odd to try and justify it in this manner. I doubt very much if tables were created as a handy way of displaying forms even if we can post rationalise it now. I mean, if we're splitting hairs and getting semantic, isn't all information on a website really just data? So why can't present it all using tables? Part of the point of using CSS for layout is it gives us the ability to separate the content from the presentation. Slapping a form into table cells doesn't allow this. It makes it much harder for instance to restyle the form so the labels appear above, rather than next to the form inputs. It's like my girlfriend not wanting to order chips because they are fattening and then eating half on mine instead. The intention is good, but it doesn't make the calories go away :-) Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Can I use a table in a form?
If you want to use tables to lay out your forms (or anything else for that matter) then go for it. The point is that it is not layout table. It has semantic value. It's a kind of table that can have summary, caption, headers and contains repeating sets of data. hairs and getting semantic, isn't all information on a website really just data? So why can't present it all using tables? Because it is not *tabular* data, unlike the practicular form that this discussion is all about. -- regards, Kornel Lesiski ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?)
Hi David, I didn't mean to sound quite so belligerent, I apologise, and I also take your point: they are all equally valid at the moment. In the future as browsers come more into line with supporting things properly they may not be. No one knows, so maybe this discussion is all academic. I do enjoy a good discussion however. ;) I have too often seen people referring to the fact a browser supports a tag as 'semantics' which is of course totally wrong. I incorrectly read your post as more of the same. I just strongly believe in the difference between semantics and code for code's sake. Iain -- Iain Gardiner http://www.firelightning.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David R Sent: 12 January 2005 22:39 To: wsg@webstandardsgroup.org Subject: Re: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?) Iain Gardiner wrote: They are only semantically correct when used within specific contexts. Too many people confuse semantics (the implicit meaning of markup) with valid html (correct code). They are two completely different sides of the same coin. If it doesn't matter to you, then you're a member of the wrong list. Lets not start a flame war ;) Tables are used to define data, data sets, results, and columnar information. DefLists (dldtdd) are strictly for the listing of defintions, its generally accepted practice to use this element for information displayed in title/content pairs. And fieldsets are used to group related input fields. Consider that Tables are equally qualified to display information in title/content format, this is how databases store information, and from a glance, an Excel spreadsheet is no different from a database's dataview, or a table containing the same data. Real-world(tm) forms, such as Tax Returns, are often layouted in a tabular manner... see for yourself, its tax-season in the states right now (AFAIK). But at the same time, a dl could be used, as virtually all the questions on a tax return are in the Question: Write/Choose your answer format. Don't accuse me of confusing semantics with valid code, I think I know the difference. It seems you're the one confusing me with a beginner in the field. I'm not an idealist, I'm a realist, and in the real world, it doesn't make a difference regarding semantics, accessibility, rendering/apperance or usability in general. All are equally valid! -- -David R ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Can I use a table in a form?
Kornel Lesinski wrote: The point is that it is not layout table. Of course it's a layout table. You're using a table so you can lay out your labels next to your inputs all nice and neat. It doesn't contain any data yet, just a bunch of form inputs. It's not data, it's a means of laying out a data input interface! It has semantic value. It's a kind of table that can have summary, caption, headers and contains repeating sets of data. I don't think that has anything to do with it as you could easily argue that certain types of site content could also benefit from these things. Forms already give you the ability to associate labels with inputs, group sets of form controls together and give them a cation. You don't need a table to give form controls semantic meaning. hairs and getting semantic, isn't all information on a website really just data? So why can't present it all using tables? Because it is not *tabular* data, unlike the practicular form that this discussion is all about. Why? How can you say that a bunch of empty form elements are tabular data even if there isn't any data? At least a page of news stories actually contains something that could reasonably be described as data? When you apply for a bank load do they give you a table of blank data to fill in or do they give you a form to fill in? Table: An orderly arrangement of data, especially one in which the data are arranged in columns and rows in an essentially rectangular form Form: Document with blanks for the insertion of details or information They seem distinctly different things to me. Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Can I use a table in a form?
On 13 Jan 2005, at 16:47, Kornel Lesinski wrote: The point is that it is not layout table. Well, to be pedantic, a table is all about layout. Layout of information. It has semantic value. I really hate that statement. It's a kind of table that can have summary, caption, headers and contains repeating sets of data. Data (n.) - The plural of datum meaning information (lat. something given) Everything is data. Even a list is data. Because it is not *tabular* data, unlike the practicular form that this discussion is all about. Forms are about collation of information. For a second, I'd like people to stop thinking about HTML and consider the world of paper which still exists. As a student of statistics I had to collect information (data collation as my lecturer would put it of occasion) and analyse it. To collate the information I had to create a questionnaire. It would consist of a series of questions followed by answers. Upon finishing my analysis I would then open up a spreadsheet and type up the results. In order to qualify as passing, standard scientific form had to be followed. At no point did I use a table for anything other than a result. Processed information. If I can possibly allow you to stretch your imaginations for a moment. Imagine me presenting you with a set of axes on some graph paper for a line/scatter plot and asking you to put your information onto it. It just wouldn't happen would it. I would almost think you'd want to deal with each traveler separately, one at a time, in some sort of paged form. For instance, if I fill out the initial part of the form and indicate 5 travelers to be insured, the form would be submitted, the initial form fields temporarily stored, and then the next form presented with fields for traveler 1. Once that is filled and submitted, on to traveler two. This seems to be the most usable method. -- Paul Connolley -- Paul Connolley SQL/Systems Programmer Egocentric - http://egocentric.co.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Can I use a table in a form?
On Jan 13, 2005, at 10:01 AM, Andy Budd wrote, in part: hairs and getting semantic, isn't all information on a website really just data? So why can't present it all using tables? Because it is not *tabular* data, unlike the practicular form that this discussion is all about. Why? How can you say that a bunch of empty form elements are tabular data even if there isn't any data? ... When you apply for a bank load do they give you a table of blank data to fill in or do they give you a form to fill in? Table: An orderly arrangement of data, especially one in which the data are arranged in columns and rows in an essentially rectangular form Form: Document with blanks for the insertion of details or information Null values for named data fields *are* data; empty form fields contain data, and those data are null. They still have meaning, and the meaning is contained within the rows (groups) and the three columns (age range, # of travelers, trip cost per person). A bank form rarely includes tabular data; mostly, it includes a number of questions that relate to you, but not to each other in a columnar way. This author wanted to create a form that applies identically to a number of groups, not just a single group. Allow me to quote the initial request: We have a use for a table inside a form. We want to sell a group travel insurance product and many of the questions are simple entries and their may be a large number of people on a trip. ... You have three fields to input for each group: age range, # of travelers, trip cost per/person. My first instinct is to put each sub group into a fieldset and repeat the labels and inputs. To use fieldsets would destroy the semantic declaration of a relationship between groups; even though each fieldset would contain a field that represents the number of travelers, there would be nothing in the markup that declares these data as related in the same way to their respective group. In short, you could not pull from fieldsets the answer to the question Which group has the most travellers? That is why marking it up as a table is useful. -- Ben Curtis WebSciences International http://www.websciences.org/ v: (310) 478-6648 f: (310) 235-2067 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Can I use a table in a form?
Using a table is not an issue, form data is tabular. For accessibility I'd suggest using a label on each input but hide it visually using one of the standard techniques. table id=grouptravel summary=Group travel quote border=0 thead tr th class=hidden scope=colGroup/th th scope=colAge Range/th th scope=colNumber of travellers/th th scope=colTrip cost per person/th /tr /thead tbody tr th scope=rowGroup 1/th td label for=agerange1Age Range/label select id=agerange1 optionblah/option ... /select /td td label for=numberoftravellers1number of travellers/label input type=text id=numberoftravellers1 value= size=4 maxlength=4 / /td td label for=costpertraveller1cost per traveller/label input type=text id=costpertraveller1 value= size=4 maxlength=4 / /td /tr ... Etc /tbody /table style type=text/css #grouptravel {width:500px} #grouptravel label {width:0; height:0; overflow:hidden} #grouptravel .hidden {width:0; height:0; overflow:hidden} /style Reasoning: Hardly anyone using a screen reader switches on table headings to be read per table cell. Hope it helps mike 2k:)2 marqueeblink e-mail: [EMAIL PROTECTED] site: http://www.webSemantics.co.uk /marquee/blink ** This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This footnote also confirms that this email message has been swept by MIMEsweeper for the presence of computer viruses. www.mimesweeper.com ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Can I use a table in a form?
Mike Foskett wrote: Using a table is not an issue, form data is tabular. You say that like it's fact when it's really a matter of opinion. Personally I'd argue that a form is not a means of displaying tabular data, it's an input mechanism. It seems crazy to me that people will come up with spurious arguments simply to justify using a table. If you want to use a table, just do it. For accessibility I'd suggest using a label on each input but hide it visually using one of the standard techniques. Um, how is hiding the label going to improve accessibility? Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Can I use a table in a form?
Andy Budd wrote: Personally I'd argue that a form is not a means of displaying tabular data, it's an input mechanism. Er... Agreed. I was of the opinion, perhaps incorrectly, that the form in question was intended to input tabular data hence the table. Andy Budd wrote: how is hiding the label going to improve accessibility? The use of a label on such a table would be to aide screen readers specifically. Yes they can read headers but in practice this feature is rarely switched on. So by using a hidden label the screen reader states the label text, while the display remains uncluttered. mike 2k:)2 marqueeblink e-mail: [EMAIL PROTECTED] site: http://www.webSemantics.co.uk /marquee/blink -Original Message- From: Andy Budd [mailto:[EMAIL PROTECTED] Sent: 12 January 2005 10:18 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Can I use a table in a form? Mike Foskett wrote: Using a table is not an issue, form data is tabular. You say that like it's fact when it's really a matter of opinion. Personally I'd argue that a form is not a means of displaying tabular data, it's an input mechanism. It seems crazy to me that people will come up with spurious arguments simply to justify using a table. If you want to use a table, just do it. For accessibility I'd suggest using a label on each input but hide it visually using one of the standard techniques. Um, how is hiding the label going to improve accessibility? Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This footnote also confirms that this email message has been swept by MIMEsweeper for the presence of computer viruses. www.mimesweeper.com ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Can I use a table in a form?
On 12 Jan 2005, at 10:47, Mike Foskett wrote: Andy Budd wrote: Personally I'd argue that a form is not a means of displaying tabular data, it's an input mechanism. Er... Agreed. I was of the opinion, perhaps incorrectly, that the form in question was intended to input tabular data hence the table. I thought what I said was pretty clear so I'm a little confused how you can agree with it and then contradict it in the next sentence. What I'm saying is that tables are meant to display tabular data however a form is an input mechanism, not data itself. Thus in my opinion it would be incorrect to use a table to layout a form. The use of a label on such a table would be to aide screen readers specifically. Yes they can read headers but in practice this feature is rarely switched on. So by using a hidden label the screen reader states the label text, while the display remains uncluttered. What I'm saying is that there is no reason to hide the labels. Many screenreaders ignore hidden elements and allowing people to see what they are supposed to enter by use of a label could hardly be described as clutter. Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Can I use a table in a form?
From: Andy Budd [...] What I'm saying is that tables are meant to display tabular data however a form is an input mechanism, not data itself. Thus in my opinion it would be incorrect to use a table to layout a form. Yup, that's how I've usually looked at it as well. allowing people to see what they are supposed to enter by use of a label could hardly be described as clutter. It can be visually if the table is there to let you input a few separate rows in one go (i.e. a spreadsheet-like layout, with headers at the top, and then 10-20 rows for separate entries). Maybe this (extreme?) scenario could be solved by using heavily styled fieldsets to act - visually - as rows that lay out the contained inputs horizontally...I may have to have a play around with CSS later tonight, I think. But yes, as a general principle I'd avoid this type of multi-row form anyway if at all possible. Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Can I use a table in a form?
I have tried hiding labels in the past. But I came across very inconsistent behavior. Some labels would show, some wouldn't. I was using display:none. I'm sure there was something else going on in my code, but it seemed like the inconsistency in browsers treating forms made the label hiding an iffy proposition. Has anyone else had this problem? Currently, our forms do not validate as AAA WAI because I don't have individual labels on a group of ten age inputs. I read somewhere a person suggested placing objects within the label. Could I have all of the ages on one row and wrap the td's inside the label? That doesn't sound like valid coding. Perhaps I protesteth too much. Ted -Original Message- From: Patrick Lauke [mailto:[EMAIL PROTECTED] Sent: Wednesday, January 12, 2005 5:38 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] Can I use a table in a form? From: Andy Budd [...] What I'm saying is that tables are meant to display tabular data however a form is an input mechanism, not data itself. Thus in my opinion it would be incorrect to use a table to layout a form. Yup, that's how I've usually looked at it as well. allowing people to see what they are supposed to enter by use of a label could hardly be described as clutter. It can be visually if the table is there to let you input a few separate rows in one go (i.e. a spreadsheet-like layout, with headers at the top, and then 10-20 rows for separate entries). Maybe this (extreme?) scenario could be solved by using heavily styled fieldsets to act - visually - as rows that lay out the contained inputs horizontally...I may have to have a play around with CSS later tonight, I think. But yes, as a general principle I'd avoid this type of multi-row form anyway if at all possible. Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Can I use a table in a form?
On 12 Jan 2005, at 16:42, Ted Drake wrote: I have tried hiding labels in the past. But I came across very inconsistent behavior. Some labels would show, some wouldn't. I was using display:none. I'm sure there was something else going on in my code, but it seemed like the inconsistency in browsers treating forms made the label hiding an iffy proposition. Has anyone else had this problem? Don't hide your labels. You may be able to trick bobby in giving you a AAA rating but hiding them won't help the accessibility of your site. Currently, our forms do not validate as AAA WAI because I don't have individual labels on a group of ten age inputs. I read somewhere a person suggested placing objects within the label. Could I have all of the ages on one row and wrap the td's inside the label? That doesn't sound like valid coding. How do people know what to put into these inputs? Surely each one needs a label of some kind? Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Can I use a table in a form?
What you're suggesting (putting TDs in a table) sounds like using tables for layout, which we all know we're not supposed to do... I found an article that discusses CSS alternatives to the non-standards uses of tables for layouts... This article from alistapart (http://www.alistapart.com/articles/practicalcss/) discusses how one might use Divs and Spans to lay out a form. Hopefully you can adapt it to suit your needs... The example is in the section titled FORM(s) and Function ---Excerpt--- Another common use for table layout is lining up FORM elements with their labels. While it could be argued that this is an appropriate use of TABLEs, the CSS technique that I describe below will prove to be useful for other, similar layout needs, as we will see. A typical layout for FORMs has the labels on the left, flush right, with the form elements on the right, flush left, with everything meeting in the middle: [example form is displayed here] The form above was created without the use of TABLEs. Once again we are using FLOAT to accomplish the positioning. The trick is to create a DIV that works like the TABLE row that we are used to using. Then we'll create two SPANs: one for the labels and the other for the form elements. Float the label SPAN left and the form element SPAN right. For the label SPAN, align the text right, and give the form element SPAN left-aligned text. The CSS looks like this: div.row { clear: both; padding-top: 10px; } div.row span.label { float: left; width: 100px; text-align: right; } div.row span.formw { float: right; width: 335px; text-align: left; } The CSS above also gives widths for the SPANs. These can be absolute values like the example, or percentages that add up to 100% or slightly less, depending on padding and borders (and the box model you are designing for). In the example I have wrapped the form in another DIV to give it a border and a background. The example HTML looks like: div style=width: 350px; background-color: #cc9; border: 1px dotted #333; padding: 5px; margin: 0px auto; form div class=row span class=labelName:/spanspan class=formwinput type=text size=25 //span /div div class=row span class=labelAge:/spanspan class=formwinput type=text size=25 //span /div div class=row span class=labelShoe size:/spanspan class=formwinput type=text size=25 //span /div div class=row span class=labelComments:/spanspan class=formw textarea cols=25 rows=8 Go ahead - write something... /textarea /span /div div class=spacer nbsp; /div /form /div ---End of Excerpt--- Hope this helps you out a bit... -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Ted Drake Sent: Wednesday, January 12, 2005 11:43 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] Can I use a table in a form? I have tried hiding labels in the past. But I came across very inconsistent behavior. Some labels would show, some wouldn't. I was using display:none. I'm sure there was something else going on in my code, but it seemed like the inconsistency in browsers treating forms made the label hiding an iffy proposition. Has anyone else had this problem? Currently, our forms do not validate as AAA WAI because I don't have individual labels on a group of ten age inputs. I read somewhere a person suggested placing objects within the label. Could I have all of the ages on one row and wrap the td's inside the label? That doesn't sound like valid coding. Perhaps I protesteth too much. Ted -Original Message- From: Patrick Lauke [mailto:[EMAIL PROTECTED] Sent: Wednesday, January 12, 2005 5:38 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] Can I use a table in a form? From: Andy Budd [...] What I'm saying is that tables are meant to display tabular data however a form is an input mechanism, not data itself. Thus in my opinion it would be incorrect to use a table to layout a form. Yup, that's how I've usually looked at it as well. allowing people to see what they are supposed to enter by use of a label could hardly be described as clutter. It can be visually if the table is there to let you input a few separate rows in one go (i.e. a spreadsheet-like layout, with headers at the top, and then 10-20 rows for separate entries). Maybe this (extreme?) scenario could be solved by using heavily styled fieldsets to act - visually - as rows that lay out the contained inputs horizontally...I may have to have a play around with CSS later tonight, I think. But yes, as a general principle I'd avoid this type of multi-row form anyway if at all possible. Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints
RE: [WSG] Can I use a table in a form?
Ted: Don't hide labels with display:none. Screen readers don't see it either. I'd suggest something more like: .hidden {width:0; height:0; overflow:hidden; font-size:1px} Or use a method that shifts the text off screen to the left. Maybe consider the approach below even if it has too many repeated labels. Personally for thirty rows of four columns I'd use a table with table headings with hidden labels on each input. To each their own. Andy: If forms were meant to be tabular they'd have fr's and fd's. Therefore data output in tabular form is okay but data input is not. I would have to disagree with the later statement. Creating a method of output without an equivalent method of input seems more than oversight. An input is a data object. Data objects stacked neatly by row and file are by definition tabular. So a standards approach to tabular input? How about this: style type=text/css #tabularform * {padding:0; margin:0} #tabularform fieldset {background:#eee} #tabularform label {margin:0 20px; white-space:nowrap} #tabularform input.input-c1 {width:15%; padding:3px} #tabularform input.input-c2 {padding:3px} #tabularform input.input-c3 {width:100px; padding:3px} #tabularform input.input-c4 {padding:3px} /style form id=tabularform fieldset h1Group 1:/h1 label for=description_r1description input class=input-c1 id=description_r1 type=text //label label for=style_r1style select class=input-c2 id=style_r1 optionstyle 1/option optionstyle 2/option optionstyle 3/option /select /label label for=name_r1name input class=input-c3 id=name_r1 type=text //label label for=check_r1input class=input-c4 id=check_r1 type=checkbox / delete/label /fieldset fieldset h1Group 2:/h1 label for=description_r2description input class=input-c1 id=description_r2 type=text //label label for=style_r2style select class=input-c2 id=style_r2 optionstyle 1/option optionstyle 2/option optionstyle 3/option /select /label label for=name_r2name input class=input-c3 id=name_r2 type=text //label label for=check_r2input class=input-c4 id=check_r2 type=checkbox / delete/label /fieldset p .. repeat until funny/p /form Very neat, tabular and accessible. Now the issue is how many inputs per row and will they fit on the users display. mike 2k:)2 marqueeblink e-mail: [EMAIL PROTECTED] site: http://www.webSemantics.co.uk /marquee/blink ** This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This footnote also confirms that this email message has been swept by MIMEsweeper for the presence of computer viruses. www.mimesweeper.com ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Can I use a table in a form?
I'm not one to say screw accessibility, I need my pages to look purty, but the point of my question is: we may have 30 to 50 people registering. If I include a label for each fieldset, the page is going to be bulky and possibly less usable for those with sight. A table would make life easy, but making life easy isn't justification enough to do it wrong. I'd really like to make life easy and give some accessibility in the process. Having 50 labels that say age1, age2, age2..age50 for the 50 age inputs doesn't seem appropriate for the average user. I have little experience with screen readers. How does the column scope work? When someone tabs from cell to cell, does it repeat the column header? How does the scope connect the cells? If I put a title on the input, that says enter age of traveler and put a column header with the label Age of Traveler, will their be any feedback to the screen reader that the input is meant to handle the age of a traveler? -Original Message- From: Andy Budd [mailto:[EMAIL PROTECTED] Sent: Wednesday, January 12, 2005 10:02 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Can I use a table in a form? On 12 Jan 2005, at 16:42, Ted Drake wrote: I have tried hiding labels in the past. But I came across very inconsistent behavior. Some labels would show, some wouldn't. I was using display:none. I'm sure there was something else going on in my code, but it seemed like the inconsistency in browsers treating forms made the label hiding an iffy proposition. Has anyone else had this problem? Don't hide your labels. You may be able to trick bobby in giving you a AAA rating but hiding them won't help the accessibility of your site. Currently, our forms do not validate as AAA WAI because I don't have individual labels on a group of ten age inputs. I read somewhere a person suggested placing objects within the label. Could I have all of the ages on one row and wrap the td's inside the label? That doesn't sound like valid coding. How do people know what to put into these inputs? Surely each one needs a label of some kind? Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Can I use a table in a form?
A group of related form controls really belong together in a fieldset with a legend. Each control can then be labelled correctly. Additional 'how to use' instructions can be provided in the title attribute of each form control. Example: fieldsetlegendPlease select your age/legend label for=agegroup1 input type=radio name=age id=agegroup1 title=select this if you are aged between 18 and 24/ 18-24 /label label for=agegroup2 input type=radio name=age id=agegroup2 title=select this if you are aged between 25 and 34/ 25-34 /label fieldset @Ted ...perhaps you can make a two part form. Get the number of travellers first, and then return that number of fields to get the ages? Terrence Wood. Andy Budd wrote: On 12 Jan 2005, at 16:42, Ted Drake wrote: I have tried hiding labels in the past. Don't hide your labels. You may be able to trick bobby in giving you a AAA rating but hiding them won't help the accessibility of your site. How do people know what to put into these inputs? Surely each one needs a label of some kind? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Can I use a table in a form?
I'm not one to say screw accessibility, I need my pages to look purty, but the point of my question is: we may have 30 to 50 people registering. If I include a label for each fieldset, the page is going to be bulky and possibly less usable for those with sight. snip Having 50 labels that say age1, age2, age2..age50 for the 50 age inputs doesn't seem appropriate for the average user. Ted- I'm sorry, I'm coming onto this thread late, so I might be misinformed as to what you're trying to accomplish. So you have a form with a variable number of fields depending on how many travelers are to be insured, correct? With a maximum of 50? Frankly, there is not going to be an easy way of doing this, regardless of the accessibility issues. Thats a LOT of data to enter. I would almost think you'd want to deal with each traveler separately, one at a time, in some sort of paged form. For instance, if I fill out the initial part of the form and indicate 5 travelers to be insured, the form would be submitted, the initial form fields temporarily stored, and then the next form presented with fields for traveler 1. Once that is filled and submitted, on to traveler two. In that case, your form is broken into smaller chunks and leaving the labels on each field would be essential and not even an issue. This would seem to make it easier for both your sighted users and visually impaired users. My experience with forms has been that it is better to progressively present large forms (along with an appropriate indication of where in the process the user is). I would think that approach would increase your completion percentage as opposed to presenting a huge form with up to 50 name, age, etc. fields to be filled out at once. HTH Regards, Ron application/ms-tnef
Re: [WSG] Can I use a table in a form?
Alex Katechis wrote: [...] http://www.alistapart.com/articles/practicalcss/ [...] span class=labelName:/spanspan class=formwinput type=text size=25 //span That's just rubbish. What the heck...span class=label? This sort of thing really is just replacing one inappropriate markup (tables) for another (divs and spans with css styling) and actually *diminishing* the structure...if anything, proper label elements should be used... The author can be excused, as the article dates back to 2001, but still... -- Patrick H. Lauke _ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Are forms tabular data? (was Re: [WSG] Can I use a table in a form?)
Andy: If forms were meant to be tabular they'd have fr's and fd's. Therefore data output in tabular form is okay but data input is not. Hi, Sorry if I quoted you out of context Andy (I don't have the original message), but I have a question regarding why forms should or should not be considered tabular data. Suppose we are presenting the user with a form where the inputs are pre populated with data; for example a form used to edit an entry in a database. In your opinion (or anyone else's), should this impact whether the form should be considered tabular or not? First Name [Michael] Last Name [Wilson] Age [Old] Although the data is contained within form elements, technically this is data output. I haven't formed an opinion on the subject, so please don't take my comment as some kind of troll. I've avoided the use of tables for forms for some time now--some times it works out, sometimes it does not. It just occurred to me as I was reading the responses here that, within the argument, the question of data input versus data output seemed to be the (or part of the) crux. Is this the case or does the argument hinge on the fact that the input element itself is not data; therefore, not tabular. If this is the premise, then couldn't one argue that the p element is not data; therefore, not tabular? -- Best regards, Michael Wilson ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?)
To me tabular means...tabular. Take a look at most real-world forms. DMV, tax forms, you name it. Mostly all tabular. The form is broken up into logical groups / cells indicating a relationship of relationship through the structure. Yes I know fieldsets also create a group/relationship of form fields, but point being the motif of forms in a tabular format has been around and used for a long time. Ryan Nichols Graphic Design / Web Development Matrixwebs.com 1.800.711.2829 18330 Sutter Blvd. Morgan Hill, CA 95037 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Wilson Sent: Wednesday, January 12, 2005 12:13 PM To: wsg@webstandardsgroup.org Subject: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?) Andy: If forms were meant to be tabular they'd have fr's and fd's. Therefore data output in tabular form is okay but data input is not. Hi, Sorry if I quoted you out of context Andy (I don't have the original message), but I have a question regarding why forms should or should not be considered tabular data. Suppose we are presenting the user with a form where the inputs are pre populated with data; for example a form used to edit an entry in a database. In your opinion (or anyone else's), should this impact whether the form should be considered tabular or not? First Name [Michael] Last Name [Wilson] Age [Old] Although the data is contained within form elements, technically this is data output. I haven't formed an opinion on the subject, so please don't take my comment as some kind of troll. I've avoided the use of tables for forms for some time now--some times it works out, sometimes it does not. It just occurred to me as I was reading the responses here that, within the argument, the question of data input versus data output seemed to be the (or part of the) crux. Is this the case or does the argument hinge on the fact that the input element itself is not data; therefore, not tabular. If this is the premise, then couldn't one argue that the p element is not data; therefore, not tabular? -- Best regards, Michael Wilson ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Can I use a table in a form?
I tried the approach below. Only works if there's only one input tag on the right column. If there're more input fields in a row (even if it's just 2 input type=radio, the following row just keeps on indenting itself to the right. For me, I settled the matter by using definition lists. Sponged the method off Simplebits.com. Labels in dt, inputs in dd. Not sure how it works out semantically though. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Alex Katechis Sent: Thursday, January 13, 2005 2:24 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] Can I use a table in a form? What you're suggesting (putting TDs in a table) sounds like using tables for layout, which we all know we're not supposed to do... I found an article that discusses CSS alternatives to the non-standards uses of tables for layouts... This article from alistapart (http://www.alistapart.com/articles/practicalcss/) discusses how one might use Divs and Spans to lay out a form. Hopefully you can adapt it to suit your needs... The example is in the section titled FORM(s) and Function ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?)
Ryan Nichols wrote: To me tabular means...tabular. Take a look at most real-world forms. DMV, tax forms, you name it. Mostly all tabular. The form is broken up into logical groups / cells indicating a relationship of relationship through the structure. Yes I know fieldsets also create a group/relationship of form fields, but point being the motif of forms in a tabular format has been around and used for a long time. Here's a better thought: Does it matter? Fieldsets, DefLists, and Tables are ALL semantically correct, and they don't make a difference to way both graphical and accessible agents render the content. Can we call this resolved now? -- -David R ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?)
They are only semantically correct when used within specific contexts. Too many people confuse semantics (the implicit meaning of markup) with valid html (correct code). They are two completely different sides of the same coin. If it doesn't matter to you, then you're a member of the wrong list. -- Iain Gardiner http://www.firelightning.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David R Sent: 12 January 2005 21:28 To: wsg@webstandardsgroup.org Subject: Re: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?) Ryan Nichols wrote: To me tabular means...tabular. Take a look at most real-world forms. DMV, tax forms, you name it. Mostly all tabular. The form is broken up into logical groups / cells indicating a relationship of relationship through the structure. Yes I know fieldsets also create a group/relationship of form fields, but point being the motif of forms in a tabular format has been around and used for a long time. Here's a better thought: Does it matter? Fieldsets, DefLists, and Tables are ALL semantically correct, and they don't make a difference to way both graphical and accessible agents render the content. Can we call this resolved now? -- -David R ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?)
Iain Gardiner wrote: They are only semantically correct when used within specific contexts. Too many people confuse semantics (the implicit meaning of markup) with valid html (correct code). They are two completely different sides of the same coin. If it doesn't matter to you, then you're a member of the wrong list. Lets not start a flame war ;) Tables are used to define data, data sets, results, and columnar information. DefLists (dldtdd) are strictly for the listing of defintions, its generally accepted practice to use this element for information displayed in title/content pairs. And fieldsets are used to group related input fields. Consider that Tables are equally qualified to display information in title/content format, this is how databases store information, and from a glance, an Excel spreadsheet is no different from a database's dataview, or a table containing the same data. Real-world(tm) forms, such as Tax Returns, are often layouted in a tabular manner... see for yourself, its tax-season in the states right now (AFAIK). But at the same time, a dl could be used, as virtually all the questions on a tax return are in the Question: Write/Choose your answer format. Don't accuse me of confusing semantics with valid code, I think I know the difference. It seems you're the one confusing me with a beginner in the field. I'm not an idealist, I'm a realist, and in the real world, it doesn't make a difference regarding semantics, accessibility, rendering/apperance or usability in general. All are equally valid! -- -David R ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?)
I agree. I quite sweating these a while ago, because it's all up to some measure of interpretation. (Raises mug) Ryan Nichols Graphic Design / Web Development Matrixwebs.com 1.800.711.2829 18330 Sutter Blvd. Morgan Hill, CA 95037 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David R Sent: Wednesday, January 12, 2005 2:39 PM To: wsg@webstandardsgroup.org Subject: Re: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?) Iain Gardiner wrote: They are only semantically correct when used within specific contexts. Too many people confuse semantics (the implicit meaning of markup) with valid html (correct code). They are two completely different sides of the same coin. If it doesn't matter to you, then you're a member of the wrong list. Lets not start a flame war ;) Tables are used to define data, data sets, results, and columnar information. DefLists (dldtdd) are strictly for the listing of defintions, its generally accepted practice to use this element for information displayed in title/content pairs. And fieldsets are used to group related input fields. Consider that Tables are equally qualified to display information in title/content format, this is how databases store information, and from a glance, an Excel spreadsheet is no different from a database's dataview, or a table containing the same data. Real-world(tm) forms, such as Tax Returns, are often layouted in a tabular manner... see for yourself, its tax-season in the states right now (AFAIK). But at the same time, a dl could be used, as virtually all the questions on a tax return are in the Question: Write/Choose your answer format. Don't accuse me of confusing semantics with valid code, I think I know the difference. It seems you're the one confusing me with a beginner in the field. I'm not an idealist, I'm a realist, and in the real world, it doesn't make a difference regarding semantics, accessibility, rendering/apperance or usability in general. All are equally valid! -- -David R ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Can I use a table in a form?
G'day span class=labelName:/spanspan class=formwinput type=text size=25 //span That's just rubbish. What the heck...span class=label? This sort of thing really is just replacing one inappropriate markup (tables) for another (divs and spans with css styling) and actually *diminishing* the structure...if anything, proper label elements should be used... I'd have to side with Patrick on this one - using lots of spans with classes to mimic a table layout is (IMHO) even worse than using a table to lay out the form (and more spaghetti code) div class=rowor tr ? span class=label or td ? span class=formw or td ? But why not style the label to float left? Quick HTML snippet (incomplete): fieldset legendContact Details/legend p label for=NameName:/label input id=Name name=Name / /p !-- more fields here -- /fieldset CSS snippet: label { clear: left; float: left; width: 14em; /* Add whatever formatting you want */ } I use something like this on the forms on my own site (which probably aren't perfect either, but I try). Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Can I use a table in a form?
Ted Drake wrote: How can I use a table and still validate for accessibility? Will it be a problem with xhtml? Ted, try here: http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp?type=table Jeff ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Can I use a table in a form?
Hi Jeffrey Thank you for the link. This helps create a table that lays out a form. I probably wasn't clear enough in my original question. I want to have a table for a series of three questions that could involve many rows, let's say 30. I don't want to repeat the label for each input, I'd prefer to put the label in the table headers and not repeat label/input in each individual cell. Will this work for accessibility? Ted -Original Message- From: Jeffrey Hardy [mailto:[EMAIL PROTECTED] Sent: Tuesday, January 11, 2005 3:01 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Can I use a table in a form? Ted Drake wrote: How can I use a table and still validate for accessibility? Will it be a problem with xhtml? Ted, try here: http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp?type=table Jeff ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **