Looking for ways to display forms within HTML elements

[eluser]Xeoncross[/eluser]
[quote author="Too Pixel" date="1222115845"]Once more time you are absolutely not clear with yourself on the difference between semantics and layout.[/quote]

That is an unfounded comment that is not helpful in any way. I never said any of this was only about semantics or even that layouts were the same as semantics. This is an accessibility, design/layout, and semantic discussion.

You seem to think that a person must chose between one or the other. I am discussing this topic for the purpose of finding a valid solution in more than one realm. Please only post useful comments.

[quote author="Too Pixel" date="1222115845"]If your goal is presenting a formed layout to users that don't have CSS enabled then use tables [/quote]

I can't believe you even recommended that. How is that even a plausible solution for those that have CSS enabled?

I appreciate all input you guys have - but I would rather keep this a useful and clean topic from now on. I valued the input you had on DIV's and SPAN's - but the rest hasn't been very helpful. ;-)

[eluser]Nick Husher[/eluser]
Tables can be styled through CSS as easily as any other element. There are a few unique concerns with the table element, but nothing insurmountable. He is correct that if you want tight control over your unstyled appearance, tables are the direction to go, at the expense of semantics.

Generally, all visual user agents will be using your author-provided stylesheet and all nonvisual or semi-visual user agents will ignore it. Very few users will bother to turn off your default stylesheet in favor of the browser defaults and usually these users will be using an aural or magnifying component to their UA, which requires its own degree of attention that isn't just 'does it look good without a stylesheet.' For instance, if aural users are a significant portion of your user base, you should consider building an aural stylesheet as well as a visual one and use @media selectors to differentiate between the two.

[eluser]Xeoncross[/eluser]
[quote author="Nick Husher" date="1222118338"]Generally, all visual user agents will be using your author-provided stylesheet and all nonvisual or semi-visual user agents will ignore it. Very few users will bother to turn off your default stylesheet in favor of the browser defaults and usually these users will be using an aural or magnifying component to their UA, which requires its own degree of attention that isn't just 'does it look good without a stylesheet.'[/quote]

Yes, I agree with you. However, with each useragent a CSS style/aliment is pre-set within the browser for each element. Wither it is Opera mini, Lynx, FF, or even Print - they have DL's aligned better by default that anything else (but tables).

So my point was that by using DL's I can be sure that wither it is text-based, mobile, or desktop - my forms would align best with a DL as apposed to DIV or UL tags.

Do you understand where I am coming from? I'm not a DIV hater or something.
DIV's are nice - but they can't do this.

[quote author="Nick Husher" date="1222118338"]For instance, if aural users are a significant portion of your user base, you should consider building an aural stylesheet as well as a visual one and use @media selectors to differentiate between the two.[/quote]

Good recommendation.

[eluser]Référencement Google[/eluser]

I appreciate all input you guys have - but I would rather keep this a useful and clean topic from now on. I valued the input you had on DIV’s and SPAN’s - but the rest hasn’t been very helpful.

It seems that whatever we can tell you is just like "we are not right and it's you the one who knows everything here". How do you want then to have an interesting discussion with such an attitude? Sorry but if you want to discuss interesting things, first be yourself a bit more open to others man...

That said, there have been a lot of arguments and explanations why to use DIV's and SPAN's, you should re-read that thread because really there's nothing more to argue about why to use that and not lists.

[eluser]Xeoncross[/eluser]
[quote author="Too Pixel" date="1222120718"]It seems that whatever we can tell you is just like "we are not right and it's you the one who knows everything here". How do you want then to have an interesting discussion with such an attitude? Sorry but if you want to discuss interesting things, first be yourself a bit more open to others man...[/quote]

Unlike some people, I haven't said that anyone here is wrong, or there ideas are worthless. If someone needs to be more open to others thoughts - it sure isn't me.

That said, there have been a lot of arguments and explanations why to use DIV's and SPAN's, you should re-read that thread because really there's nothing more to argue about why to use that and not lists.

When you guys finally answer my question I will be happy. You haven't done it yet - but I think that if I keep on listening to you guys bash me - the answer will come out sometime. ;-)

Take a look at my screen shot again.

So my point was that by using DL’s I can be sure that wither it is text-based, mobile, or desktop - my forms would align best with a DL as apposed to DIV or UL tags.

Lack of any kind of aliment with DIV's and SPAN's shows that it is easier to keep forms readable with DL's - am I wrong?

[eluser]Référencement Google[/eluser]
[quote author="Xeoncross" date="1222121931"]When you guys finally answer my question I will be happy. You haven't done it yet - but I think that if I keep on listening to you guys bash me - the answer will come out sometime. ;-)[/quote]

Your question has been answered several times: you should consider using DIV's and SPAN's.

Lack of any kind of aliment with DIV's and SPAN's shows that it is easier to keep forms readable with DL's - am I wrong?

Can you look at that page please: http://toopixel.ch/contact or even this one: http://www.cssplay.co.uk/menu/form.html

Then deactivate the CSS and tell me what makes it difficult to read or understand or what is malformed without CSS in these forms?

[eluser]Xeoncross[/eluser]
[quote author="Too Pixel" date="1222122364"]
Can you look at that page please: http://toopixel.ch/contact or even this one: http://www.cssplay.co.uk/menu/form.html

Then deactivate the CSS and tell me what makes it difficult to read or understand or what is malformed without CSS in these forms?[/quote]

If you look at the input elements you will see that they don't have left-side vertical alignment. Also the textarea label shows up below the textarea which is harder to see with a mobile device.

Other than that, it looks great - just like the image I posted. It is just that DL's look a little better.

BTW, nice site design.

[eluser]Référencement Google[/eluser]
Thanks for the words on the design.

Back to the discussion: you said you don't have choice. Sometimes it's possible that a webdesigner don't have the choice for one special application and some reasons. Then if you really don't have the ability to use CSS to layout forms and you are happy with the result of DL's, go with it, nobody will blame you, it's totally accessible (not semantic, but still accessible)

That said, when you have the choice on CSS, use DIV's and SPAN's, because that is accessible AND semantic.

About DIV's and SPAN's, you still also can add more DIV's to align a bit more things. Sure that makes additional markup but then you gain on semantic, after that is also your personal choice.

Code:

<div>
    <label>some label</label>
    <div>&lt;input type="text" /&gt;&lt;/div>
</div>

That piece of code will align perfectly labels and form fields too, keeping you semantic, but I wouldn't recomend to use it.

[eluser]Xeoncross[/eluser]
[quote author="Too Pixel" date="1222123108"]if you really don't have the ability to use CSS to layout forms and you are happy with the result of DL's, go with it, nobody will blame you, it's totally accessible (not semantic, but still accessible)[/quote]

I can use CSS - but I want something that looks good even without CSS or JS.

1) Tables don't work because then when a user can use CSS (standard browser) I have to trash/reset the table tags (in CSS) to get them to work with the design. Plus who likes tables anyway?

2) DIV's don't align stuff right - other than that they are perfect and Semantic.

3) UL's don't look decent at all with forms unless you have CSS

4) DL's shouldn't really be used for this - but they look good without CSS and with it too.

So that is why I have to go with DL's for now. I would rather a site looked good - with/without CSS - than uphold the perfect meaning of a tag.

I.E. Usability ranks higher with me than Semantics in this point.

[eluser]Référencement Google[/eluser]
So you have answered yourself to the question and made your choice.

I add on this that what you want is project specific, I won't recommend anybody reading this thread to use DL's to layout forms because DL's have only 1 semantic meaning: Definition Lists. Forms are not a list of definitions.

To go a bit more far again: while using DL's or UL's to layout something, I must first with CSS reset their margin and other attributes. That makes CSS looks ugly and bring extra CSS markup for nothing while I can simply use DIV's and SPAN's. This argument break any of yours.