24 replies [Last post]
yacahuma
yacahuma's picture
Offline
Enthusiast
Puerto Rico
Last seen: 8 years 51 weeks ago
Puerto Rico
Timezone: GMT-4
Joined: 2007-07-24
Posts: 64
Points: 10

Hello,

I like css, and I agree that there are the best way to layout a site. But I am not convinced(like many other) that we need to go as far as removing tables for forms. Yes you can do table less layout, but in real life, forms get complicated. I am not talking about enter your username and password. When forms get complicated you start wasting time, messing around with the css to get the look you want. When in reality a table will do the job.

Didnt we go to far trying to layout forms?? Is there really a good enough reason NOT to use a table for forms?

Thank you

yacahuma
yacahuma's picture
Offline
Enthusiast
Puerto Rico
Last seen: 8 years 51 weeks ago
Puerto Rico
Timezone: GMT-4
Joined: 2007-07-24
Posts: 64
Points: 10

I forgot to say

To make matter worse, everyone has a different(better) way to create table-less forms and all of them involve changing the way a a normal html element behave. Basically you are fighting against the current all the time.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

yacahuma wrote:To make

yacahuma wrote:

To make matter worse, everyone has a different(better) way to create table-less forms and all of them involve changing the way a a normal html element behave. Basically you are fighting against the current all the time.

Explain this statement in general :?

What exactly do you mean by "changing the way a normal html element behaves"

When I describe a form I don't change any proscribed element behaviour, I may make use of the odd div to wrap labels and inputs other than that I work strictly with the available form elements which provide all that I need to create a semantic accessible form along with the basic styling that might be required.

As for tables this is an extremely bad method to use to hold/layout form controls unless you know a great deal about how to linearize a table construct, fail in that and the form will read as nonsense.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Triumph (not verified)
Anonymous's picture
Guru

It is far more difficult and

It is far more difficult and labor intensive to layout and tweak a tables-based form than it is for a properly marked up form.

The more complex the form the harder it becomes to make changes using tables.

Mark this up in tables and get back to me: http://imaginekitty.com/formXHTML.html

yacahuma
yacahuma's picture
Offline
Enthusiast
Puerto Rico
Last seen: 8 years 51 weeks ago
Puerto Rico
Timezone: GMT-4
Joined: 2007-07-24
Posts: 64
Points: 10

How is it different?

How is it different me using a rowspan or a colspan from you using around 250 liness of css code to achieve the layout?

and btw, i am not trying to pick up a fight. All am saying. if tableless forms are so good, get a standard together, so that people have a similar look and feel. What bothers me as a programmer is trying to reinvent the wheel every time I am coding. If there was a standard way to create forms in a table less fashion, that works on every browser, that will make our lives easier. dont you think?

If someone want to get creative, let them waste their time. For the rest of us, we could use the standard way.

Triumph (not verified)
Anonymous's picture
Guru

yacahuma wrote:How is it

yacahuma wrote:

How is it different me using a rowspan or a colspan from you using around 250 liness of css code to achieve the layout?

Well, go ahead and recreate the form I posted in tables and I'll show you.

Besides it's 26 selectors and the only reason it takes 139 lines is because I have carriage returns between each declaration in the declaration blocks.

yacahuma
yacahuma's picture
Offline
Enthusiast
Puerto Rico
Last seen: 8 years 51 weeks ago
Puerto Rico
Timezone: GMT-4
Joined: 2007-07-24
Posts: 64
Points: 10

Hello

What I meant was that many layout involve changing normaly inline elements to block elements and vice verca.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

yacahuma wrote:Hello, I

yacahuma wrote:

Hello,

I like css, and I agree that there are the best way to layout a site. But I am not convinced(like many other) that we need to go as far as removing tables for forms. Yes you can do table less layout, but in real life, forms get complicated. I am not talking about enter your username and password. When forms get complicated you start wasting time, messing around with the css to get the look you want. When in reality a table will do the job.

Didnt we go to far trying to layout forms?? Is there really a good enough reason NOT to use a table for forms?

Thank you

The reasons for not using tables for general page layout apply just as much to forms as to the rest of a page. Remember not everyone who uses your form will be relying on a visual browser on a large screen with a mouse.

The fact that you can't layout a form with CSS as quickly as you can with tables speaks of your relative expertise and comfort with each method, it says nothing about what is best or what other people are able to achieve.

yacahuma
yacahuma's picture
Offline
Enthusiast
Puerto Rico
Last seen: 8 years 51 weeks ago
Puerto Rico
Timezone: GMT-4
Joined: 2007-07-24
Posts: 64
Points: 10

I am going to accept my quick defeat

I am currently working on a project where I created an engine to parse xml
an create a form in a page. Is not as easy as it sound since the engine also maps data from the form into xml where it goes in a database. I am actually pretty proud about it. I just got into a little problem trying to get a table to behave the way I wanted. Since the data from the xml in well structured, getting some widgets into the right columns, turn out to be a problem. I switch to a css layout and now I can do what I wanted. Messing around with the css did took time. I will say is at 85% right now, so I still need more to do with the css. I am sure I will post here to finish the css.

Thank you

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

yacahuma wrote:Since the

yacahuma wrote:

Since the data from the xml in well structured, getting some widgets into the right columns, turn out to be a problem. I switch to a css layout and now I can do what I wanted.

Sounds like you answered your own original question then. Wink

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:All am saying. if

Quote:

All am saying. if tableless forms are so good, get a standard together, so that people have a similar look and feel. What bothers me as a programmer is trying to reinvent the wheel every time I am coding.

I understand where you're coming from. I'm on version 3 of how I do my forms. I'm still not happy with them, but they are a lot better than they were.

One thing still causing problems is long, wrapping labels on the left and getting the inputs to not ride up to the top of the box containing the pair. Currently I'm manually adding a class called "onder" with a top margin on the input (glad vertical margins work on inputs as they generally don't on other inlines). This is manual, still dies when the label can wrap to THREE lines instead of two, and generally still doesn't satisfy. But it's a lot better than the two labels I was using before, one to stretch across the form and the second to "own" the lined-up input.

I think because I'm using divs to wrap label-input pairs with a floated left label and the input allowed to just hang out, FF often lets an (random) input wrap underneath a label, requiring a refresh (which always fixes it). IE doesn't do this so I'm ok with this for now as everyone in this country uses IE.

If I had code generating a form, where I wouldn't know the label OR the input, as the OP has, I'd be screwed, because I need to manually tweak everything : ( Which means really my forms are actually still a /fail/

But when I get a Holy Grail form going I will be sure to spread it across the Tubes and subvert all the inferior CSS forms out there with my iron fist.

I'm no expert, but I fake one on teh Internets

Triumph (not verified)
Anonymous's picture
Guru

I'm still waiting for the

I'm still waiting for the results of the form I posted in tables.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Why do you have table css on

Why do you have table css on that page already?

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

labels and inputs are not

labels and inputs are not best rendered in a line but with labels above the associated control, given the choice and the lack of graphic designer attempting to make a mess of a form layout that is how they should be laid out.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:labels and inputs are

Quote:

labels and inputs are not best rendered in a line but with labels above the associated control, given the choice and the lack of graphic designer attempting to make a mess of a form layout that is how they should be laid out.

With the exception of checkboxes and radio buttons, I'm starting to believe this too. Certainly easier to code. Although I do believe paper convention should have some influence on the web, just like the *required came over.

I'm no expert, but I fake one on teh Internets

Triumph (not verified)
Anonymous's picture
Guru

Stomme poes wrote:Why do you

Stomme poes wrote:

Why do you have table css on that page already?

Was that directed at me? If so, because the actual form processor outputs a table of clients, address, email, phone, budget, etc.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Ah, ok. Yeah it was at you

Ah, ok. Yeah it was at you : ) I was looking to see what you used to set your form up-- similar to the one Gary has.

I thought that was a demo page, not a page that did anything (because I saw the CSS internally).

I'm no expert, but I fake one on teh Internets

Triumph (not verified)
Anonymous's picture
Guru

Stomme poes wrote:I thought

Stomme poes wrote:

I thought that was a demo page, not a page that did anything (because I saw the CSS internally).

Yes, it is just a demo. It is based mostly on Gary's design. The real version is locked down and password protected. I wish I could remember my password. Tongue

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 17 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

Triumph wrote:… The

Triumph wrote:
… The real version is locked down and password protected. I wish I could remember my password. Tongue

You too? Thank gawd for root. Now, lost encryption keys are another thing. Sad

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Triumph (not verified)
Anonymous's picture
Guru

gary.turner wrote:You too?

gary.turner wrote:

You too? Thank gawd for root. Now, lost encryption keys are another thing. Sad

Aw, yeah. I have a set of passwords for specific purposes that I haven't changed for a while. This one was different because the company didn't want encryption or hashing :? so they could go into the database and change the passwords so I wasn't going to use one of my regular passwords. If I had access to the database I could see it. (this is the company I anti-ranted about in the Bat Cave™).

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

aha! so there is a secret

aha! so there is a secret lair...

Triumph (not verified)
Anonymous's picture
Guru

wolfcry911 wrote:aha! so

wolfcry911 wrote:

aha! so there is a secret lair...

No, I just posted a link to an old deleted thread just to make everyone wonder what I'm talking about. Tongue

... or did I?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

way to go T

Laughing out loud way to go T Cool

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

Tutorials

This comment has been moved here.

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 8 years 29 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

For Argument's sake....

This comment has been moved here.