But if you do have tabular data, then a table element is perfectly acceptable. On a side note, there is a good reason not to always use tables for this purpose, but it has nothing to do with whether or not that usage is semantically correct and consistent with web standards true and true.
If this form were displayed on a small enough screen phone or perhaps a small tablet in vertical orientation , the table will force the labels and form fields to stay side by side.
Using div elements and CSS, we could dynamically shift these elements into a single column to better accommodate small screen sizes this can be pulled off using separate tables for each row As a caveat to this caveat, though, note that the page in question is NOT mobile-friendly by design I mean, I think I understand you, and I interpret it like so: "in this case, we're not displaying the data, we're displaying the data we're about to collect to the user as he is entering it" but this seems kind of I mean, in "contact us" form, I'm not comparing Name to Email, and I'm not adding "User Feedback" to "Telephone Number" so I'm not sure how having the input fields laid out in a grid is at all the same thing as displaying that information in a table.
I mean, the only thing that makes it tabular is the layout itself. The fields aren't related in any way except that they're part of the It just seems to me that putting a form in a table seems like a lot of extra "architecture" a screen reader, or other alternate browsing and input methods might have to navigate. It also seems like it could get brutal, quickly, if a contact form started adding checkboxes or selectors.
Posting to the forum is only allowed for members with active accounts. Please sign in or sign up to post. Welcome to the Treehouse Community The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support.
Looking to learn something new? Am I wrong? Kevin Korte 28, Points. Or should I use div s styled with CSS? Here's a code example.
Note that the labels' for attribute lets you click that label to move focus to the input specified it matches the id attribute. See this article for a more in-depth tutorial. It's so easy to lay out form elements with CSS, I don't see any value worth obfuscating the markup with tables. Personally, I find that laying out forms with CSS is easier than using tables at this point. For example:. Using simple variations on that theme, you can make great-looking, accessible forms that are actually easier to work with than tables anyway.
I've used that basic approach and ramped it up to some fairly complex, multi-column data entry forms too, no sweat. Yes, you may use tables. Div's are supposed to replace tables for page-level layout, but not for, well, tables. Go ahead and use them within pages whenever they solve your problem. After being the biggest anti table person you can imagine I've started to realize in the end it doesn't matter.
Use what's quickest. Of course if you are nesting tables then you have a problem but generally I can't think of a easier way to layout forms. At the end of the day does the client or the visitor give two hoots about whether you used a table or a list? Eric, I would agree with you that form data is tabular data and semantically can live inside a table.
Here's a way for you to decide: If it truly contains tabular data, then it should, at least according to WCAG, have a summary attribute. The summary attribute should describe the purpose and structure of the table for the benefit of screen reader users.
Can you write such an attribute? If so, then you should do so, and include it on your table. If you can't, then it probably isn't a really a table and you should look for another way of laying out your form. I never understood why you would use an ordered or unordered list for forms when a definition list seems more semantically appropriate:.
They can be a wee bit trickier to wrangle format-wise, but it always made a lot more sense to me than lists or tables for the vast majority of forms. Forms can be or feel tabular, but tables imply a "presentation" along with the semantics.
Furthmore, you may have to override the styles if you are trying to account for small screens such as mobile phones. Furthermore, a screen reader will over-announce this form with, "Row 1, column 1, label, 'Name', column 2, input, 'Name' This leaves the presentation in the hands of CSS, exactly where it belongs. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams?
Collectives on Stack Overflow. Learn more. Is it acceptable to use tables for forms? Or is it still more correct to use divs? Ask Question.
Asked 12 years, 2 months ago. Active 7 years, 9 months ago. Viewed 16k times. I'm wondering whether it's acceptable to use table s for forms. Improve this question. C R 2, 5 5 gold badges 33 33 silver badges 41 41 bronze badges. Eric Eric Duplicate of stackoverflow. Come again? Not quite a duplicate. I'm asking what's right , not what's easiest. Show 2 more comments. Next, we will create form fields. We can add as many fields as required to our form.
It can also be seen that all the input fields are of the same width and length. Thus there is no use in using the CSS to align the form fields. Skip to content. Change Language. Related Articles. Table of Contents. Save Article. Improve Article. Like Article. Last Updated : 20 Aug,
0コメント