13 replies [Last post]
Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 6 years 32 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

This is more a general or a good practice question. Well, Ed was kinda going off on me when I suggested using a list for a form. So, me and my best friend Google searched for more info, and I created some basic. Unfortunately it seems impossible - at least for me - to create one as I would like it to appear.

My question is, can I use the div tag to position certain form elements in the desired place? For example: the labels are always on top of the input element, but I would like to have the street and the street number in one line, or zip and state in one line. Can I use a div to position the street number on the right of the street, or does it interfere the accessibility? Any suggestions?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 30 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

A form allows plenty of

A form allows plenty of relevant elements to allow you enough CSS hooks to do what you want. For example FIELDSET is a perfectly useable block element and you don't have to accept it's default styles if you want it to look differently.

There's no problem putting fields in a line using floats. If you use the LABEL element for the title of each input field you can put things on the same line fairly easily and you should be doing that.

Have a read through this article I came across with a quick google search on the seach string "semantic form layout".

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 6 years 32 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

I didn't read that article

I didn't read that article before, but the one with the various examples that he linked at the end of the article. And be sure I have made my searches with various search strings. I am aware of the possibilities CSS and fieldsets are giving me. I actually tried to insert a fieldset within a fieldset to aline input fields horizontally. The problem is that I don't get the labels on top of their input element. I have seen several tutorials that are using div to align, but I don't want it the easy way, I want it the right way.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 30 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well, where you need a

Well, where you need a grouping of elements that isn't provided by the semantic markup, a DIV is an appropriate element to group those elements. Presuming that the doctype allows a DIV in the document context of course.

But I don't think that an arbitrary rule that one must never ever use a DIV is a very productive approach either.

The point is first to markup the content semantically. Then if one needs extra levels of grouping for layout one uses a DIV or SPAN as appropriate.

But I did quite a complex form awhile back that lined up various elements all over the screen without feeling the need extra for DIVS, but since it's behind a firewall and propriatory I can't show it to ya.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 6 years 32 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

Thank you for your input

Well, if it is semantically ok and does not bear any issue with accessibility, and anyone has a different opinion, I will try to work with div or span (which I haven't thought about yet) to accomplish what can't be reached by the form elements.

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

The Tyssen way works great for me

Dan Schulz sent me to his Legends Of Style page and he wraps each label-input pair in a div. The label is floated left and each div itself can clear the floats above it (or the labels can but then the inputs can ride up upon text-enlarge). Then the whole thing sits in a fieldset (usually).

There's only one thing accessibility-wise I've never been able to solve: having a single label for multiple inputs (a date drop-down is by its nature a multiple input even though it's a single piece of information).

What I do now is give the label's "for" to match not a form control but a wrapping div, while the inputs inside have similar id's. I was told this shouldn't work properly with screen readers as a div is not actually a form control and the label's "for" should match a form control but as you can't have multiple IDs that are not unique, this was a no-go. Giving a seperate label to each part of the input was also a no-go-- if someone in Europe doesn't know that days, months, and years make up a date, then their guardian should be filling out the form anyway.

But that's my only unhappiness with forms. Ed's right, a list doens't really belong in a form, though I guess you could really stretch it semantically (a form seen as a list of questions?).

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

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 6 years 32 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

Thank you for another input

Thank you, Stomme poes (always have to smile when I read your nickname Wink ) for your point of view. Actually I did see a form as a list with question and answers, but I didn't know that there are certain elements for forms until Ed advised me. The multiple input issue I can imagine can be solved with a fieldset wrapping it and a hidden for the labels - saying this not knowing if it would create a problem with screenreaders.

I am going to read up on this even more, even though every website has a different approach. Should I succeed I will upload it and hope I will get some input on my result.

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

Stomme poes wrote:Dan Schulz

Stomme poes wrote:
Dan Schulz sent me to his Legends Of Style page and he wraps each label-input pair in a div.

I think you'll find that I actually wrote Legends of Style.

For the situation you describe about having a single label for multiple inputs, it's as Caposoft says: use a fieldset to describe the grouping and hide the actual labels from the screen if they don't fit your design.

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

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 6 years 32 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

Tyssen wrote:Stomme poes

Tyssen wrote:
Stomme poes wrote:
Dan Schulz sent me to his Legends Of Style page and he wraps each label-input pair in a div.

I think you'll find that I actually wrote Legends of Style.

For the situation you describe about having a single label for multiple inputs, it's as Caposoft says: use a fieldset to describe the grouping and hide the actual labels from the screen if they don't fit your design.

Thanks for your input. I already searched and found your page yesterday. I am glad to read that I am on the right path solving the labeling issue in grouping elements.

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

Tyssen-- I was referring to

Tyssen-- I was referring to you, look at the title of my post! : )

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

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

Stomme poes wrote:Tyssen-- I

Stomme poes wrote:
Tyssen-- I was referring to you, look at the title of my post! : )

Oh yeah. :blushing: I never look at post titles.

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: 9 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Blah! Ba Blah Ba Blah! Foo!

I wouldn't either except it takes my first sentence and mangles it if I don't type anything in it so I've started using it. I'd rather not, usually just a thread itself needs a title.

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

Dan Schulz
Dan Schulz's picture
Offline
newbie
Aurora, Illinois
Last seen: 13 years 18 weeks ago
Aurora, Illinois
Timezone: GMT-5
Joined: 2008-05-19
Posts: 1
Points: 0

Tyssen wrote:Stomme poes

Tyssen wrote:
Stomme poes wrote:
Dan Schulz sent me to his Legends Of Style page and he wraps each label-input pair in a div.

I think you'll find that I actually wrote Legends of Style.

For the situation you describe about having a single label for multiple inputs, it's as Caposoft says: use a fieldset to describe the grouping and hide the actual labels from the screen if they don't fit your design.

And to think I thought it was merely a typo. (his instead of this)

Relax, John. Smile

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

Lawls

arg damn titles. Welcome Dan!

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