21 replies [Last post]
tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 48 weeks 4 days ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

Hey gang,

I've been poking around the threads looking at various form threads here and on other sites - in particuler:
http://www.themaninblue.com/experiment/InForm/
and here: http://csscreator.com/node/12568
(which this this a great thread by the way)

Situation is this:
My first form project is huge. And it's literally learning from A - Z.

You can see the very initial progress here: http://www.fizzcreative.com/hrform/

Now - keep in mind:
1 - I'm learning as I go. So there are things in the code that are VERY wrong. I know that and am know going in and trying to fix them bit by bit by bit (for instance label "for" statements and the like. I've also got some instances of radio button where I need checkboxes...

So if you look - please don't criticise obvious mistakes as I DO have questions below I'd like to research before moving on...

-------

If you look at the link you see about every imaginable configuration of form elements - all of which are coming from a printed HR application.

But there is no real formatting as of yet.

My questions are this:

1 - Are nested Fieldsets legal? If not absolutely pure as orignially intended?

2 - This app - in paper form - is really just 4-6 sections. BUT within each section are subsections.

Can I make it easier by making those subsections nested fieldsets - BUT - with no legend? (as opposed tousing multiple divs?) - to me this seemed "cleaner" even though it is, sans legend, possibly defeating the purpose of the fieldset?

They would be nested no more than one level. (Multiple fieldsets consecutively within one top level fieldset - NOT a fieldset within a fieldset within a fieldset)

3 - Are there strategies I can use to make this task a little easier?

-------

Any suggestions are welcome. I'm not entirely over my head - I just took on a larger project for my first real form project.

Thanks again - I find this forum one of the best on the web and I appreciate the regulars who share their expertise.

tg

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 days 8 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

Nested fieldsets are fine

Nested fieldsets are fine and at times necessary to keep order in large forms, but do use legends, why would you not want to? you must describe the fieldset group; if necessary use display:none to hide the legend if you really don't want it displaying on the page.

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

Well, you could also use the

Well, you could also use the method on Tyssen's page-- make the fieldsets invisible and use a div with the class of fieldset instead. Use this only when you don't truly need a real fieldset, but instead simply want a visual grouping cue (border). Deciding which is better takes some judgement, and having gone through form hell myself, you're going to do it all wrong : ) at least the first time.

I don't have any nested fieldsets here, but you can take a look at my demo page for a very very long form for styling tips here where I have multiple fieldsets instead of nested ones. So, the form as a whole does not have its own fieldset, which is perfectly legal-- all direct children of the form are still blocks.

As for the legends, I'd rather move them offscreen with margin-left: abazillionpx instead of display: none since if you're hiding the legend from everyone even screen readers then it really isnt' useful at all...

XHTML requires a legend with a fieldset. HTML4.01 does not. But in principle you should use a legend for every fieldset anyway. For defaults that truly don't need explanation, you can always have the dummytext of "Fill In:" : )

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 days 8 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

oops I stand corrected! yes

oops I stand corrected! yes display:none is generally a problem overall with elements and screen readers, although I was under the impression that the legend tag was an exception and would be read regardless.

Safest is to hide the text by shifting it's position, but you will need to test what methods work across all browsers as the legend tag is a awkward one to manipulate.

Stomme are you sure that the legend tag is required by XHTML specs? I referred to the point that it ought to be used.

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

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 48 weeks 4 days ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

Darn... I was excited about

Darn... I was excited about the hidden legend. But experimenting Friday before I wrote - I thought whole Fieldsets were disappearing when I tried that. (Of course - I could have darn well been applying that to the fieldset as opposed to the legend itself.

But thats cool - it's better to learn now than be wrong down the road.

As for the multiple fieldsets - The will be my next step along with cleaning up all my bad code.

I'll look at the demo page of Stomme poes - but where is Tyssen's page you refer too?

The reason I wanted to hide the legend was a step to make it conform more to what the paper app looks like - and the the legends subdivided it too much. But I think I will keep them as opposed to hiding them - to hide them I could always color the text white and border=0 too. As the reason is more visual than space saving. (it's a corporate culture that is rather particular - even if I explain the reasons to them)

I'll keep working... thanks guys for the help - I really appreciate it.

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

Hugo: I was wrong!

Well, ahem. Once I was told it was XHTML who needed the legend with the fieldset, and I thought I confirmed this with a validator error. However, checking my forms again, it turns out it's the other way around-- HTML4.01 Strict requires the legend, while XHTML (1.0 or 1.1) doesn't seem to care... I've changed it back but I think this page shows the error... It's NOT this clear when you are using divs to group label-input pairs... then it simply says Element "Div" not allowed here (so, I've temporarily changed this form page to have no divs so the legend error shows up specifically). So it must have been an HTML4 page (of which I have 2 with tons of forms) that threw the error, not my demo page (which is XHTML1.0 for some reason).

Sorry! Tyssen's page is here: http://www.tyssendesign.com.au/articles/css/legends-of-style/

You CAN still hide the legend if you want-- stick the legend text inside a span, and move the span off-screen. It works on IE6, 7, FF1.5 and 2, Opera, Safari, Konq usually (sometimes you need to give a negative top margin too for Konq and Ie6 I've had some things show up sometimes...).
Kung Fu Panda!
legend span {
position: absolute;
left: -99999em;
}

Border="0" won't do anything for the legends-- the border belongs to the fieldset, actually. And, border should of course be removed in the CSS : ) not the HTML.
img, fieldset {
border: 0;
}

Setting text to white to hide it can trigger teh googles if this page is going online (who cares if it's staying on an intranet)-- too many a-holes hiding keywords and links on pages using that technique. Moving the legend (or better, the span inside) offscreen is safe and pretty much effective (no, I never checked in Nutscrape 7, not sure where I can aquire such ancient technology?).

Again, there is NOTHING wrong with nesting fieldsets, so long as you don't get ridiculous with it. However, your nesting of inputs inside labels, while perfectly valid, triggers a nasty bug in one of the popular screen readers, WindowEyes (it misses the input and doesn't read it or move the focus to it). JAWS seems to have no problem with it.

Your code's not too horrible, really, just some small things. Try not to have any "loose" text floating around-- keep everything either in a legend, a label, or a p if warrented, but put it in something. Not that that's invalid HTML...

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

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 48 weeks 4 days ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

Gotcha... Thanks for the

Gotcha...

Thanks for the reply... YES - I understand how changing the text to match the background is not a bright idea... sometimes I get all micro when I should be thinking with common sense.

I totally agree about the floating text thing... I was wondering what to do about it - and this feeds into my lack of experience in this area - I see some threads that dont excourage paragraph tags in forms - so I instantly thing that is a bad thing (and consequently put it off for another day) - when in fact I should just try not to get too code crazy.

I will work on this throughout the week and post progress.

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

Yesh p's don't generally

Yesh p's don't generally belong in a form-- they're likely being frowned upon as wrappers (you see people wrapping labels in p's, label-input pairs in p's, and I've even seen p's being used in place of fieldsets cause inlines can't be direct children of forms). However! There is one place where I've used p's in a form, and that was for a senetence(Drunk that go in between questions... they could have gone in the label but I wanted red ugly text to catch the eye, but not the label itself.

And likely someone would tell me that's still wrong : )

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 days 8 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

Why would that be wrong? If

Why would that be wrong? If you have need of some form of further explanatory text then the natural choice is paragraph tags, I don't find the need to often but when I feel it's required then I see no huge problem in doing so; of course it's pretty senseless to use paragraphs to wrap elements if you need the finer control on say label/input pairs then one would wrap them in divs.

Oh and re my earlier assertion on display:none, legend and label should actually be read regardless of styling applied (I've always contended that assistive devices should pay little heed to what appears in a stylesheet) I believe Jaws will read the legend and labels of a form despite any styling applied and so it should, a form is a functional item performing a specific task which is all contained within markup, a screen reader should simply process that markup and nothing else, styling has no place in running a form through an assistive device

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

Yeah, I've used p's for just

Yeah, I've used p's for just that, explanitory text, but whenever I don't hear a Crusty Old Guy Who Knows Stuff tell me explicitly that it's okay, I always assume I'm making a mistake (as it's been, that's usually the case).

JAWS reads it in forms-mode. I don't have WindowEyes so I can't check that. I totally agree, I know they surf through a CSS-enabled browser but should ignore display: none (as well as read ALL alt text... that one cracks me up, a screen reader not reading the alt text...)
however it's the same with the blah blah junk... it's a bug, there's no reason for the inputs not to be read, but WindowEyes ignores it. Buggy like IE is buggy-- just have to wait until they write a newer version which fixes it.

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 39 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9230
Points: 3236

re: Containers for label/input pairs

I tend to believe that the

, being semantically neutered, should only be used in its structural function to hold other, more semantic block elements. If you need the and elements to be within a block level container, the

is the semantic element (lacking a more precise choice), being a brief composition complete in one typographical section.

We have discussed this previously, and not all have seen the wisdom of this totally rational approach to the use of

s and

s. Laughing out loud

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 days 8 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

Old crusty has popped in

Old crusty has popped in then Tongue

So We'll have to go off a hunting old threads.

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 39 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9230
Points: 3236

Hugo wrote:Old crusty has

Hugo wrote:

Old crusty has popped in then Tongue

So We'll have to go off a hunting old threads.

Bah! I am not crusty.

See http://csscreator.com/divs-do-not-replace-tables

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

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

gary.turner wrote:I tend to

gary.turner wrote:

I tend to believe that the

, being semantically neutered, should only be used in its structural function to hold other, more semantic block elements. If you need the and elements to be within a block level container, the

is the semantic element (lacking a more precise choice), being a brief composition complete in one typographical section.

*stirring the pot* Smile

How can a non-semantic grouping for presentation purposes require a semantic element?

Possibly the argument is that the

should be a , but I'd counter that is a very minor differentiation.

I'm with Gary that content should always be included in a semantic element. The choices may not always be clear, but even a loosely related semantic element is better than an anonymous element. However, the following structure

<fieldset>
  <div class="formfield">
    <label for="id">input label</label>
    <input id="id" type="text" />
  </div>
  ... more input elements
</fieldset>

is adequately handled by semantic elements and the

is only there to enable a greater variety of presentation options.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 39 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9230
Points: 3236

I won't say there's anything

I won't say there's anything wrong with using the

for the purpose of creating a block level container, it's just that I get this uncomfortable, maybe just niggling, feeling that there's a better descriptive tag than the
.

I can't think of any pragmatic differences due to tag choice, but if one has created strict, semantic markup policies, then even a small deviation causes some degree of mental discomfort. A strict policy does not require rigidity, but variants should require a compelling rationale. There isn't any compelling reason (that I know of) for using

, so I prefer the slightly more semantic

in this or similar cases. It's not a big deal, but it does remove one more small source of irritation from my life, and that's a Good Thing®.

*Just checked the pot; it could stand some garlic and a few dried and crushed jalape├▒os.* Wink

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 days 8 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

But we don't want to be

But we don't want to be further descriptive! we've already described nice clean semantic structure using all the correct elements and attributes at our disposal; sadly along the way a graphic designer has been allowed to get in the way and attempt to make A div is nice and neutral I don't really want to use it but then I have to cope with awkward layouts and it - to my mind - says ignore this it's simply there to afford some extra control; yes it does cause some degree of mental anguish but then does so much markup when it comes to semantics and what we are asked to achieve. All in all though it not an issue that I would be prepared to make a absolute stand on, Nowadays I just have to get things done in a rising tide of standards indifference Sad

That's the garlic and some nice English Colemans mustard (dried of course for the full flavour)

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

There's plenty of crustiness here

Maybe it's the lightly toasted breadcrumbs...

The only reason I'm using the div in the first place is as a css-hook (getting the label-input pairs to be positioned as a unit, not to tell anyone that the two constitute a paragraph). So, for a neutral hook, the div works for me.

The thing I meant about p's in forms was this sort of thing (when the OP said people seemed to frown upon it):

form, etc...
<p>User Name:</p>
<p><input type="text" id="blah" name="blah"></p>
 
or
 
<form... etc>
<p>
<label> blah</label>
<input type="blah">
<label> blah again</label>
<input type="passblah">
</p>
<form>

The first uses p instead of the label. The second uses p instead of the fieldset. That's where p is wrong. If someone wants to wrap label-input pairs in p's, I guess they can-- I won't, though.

You just wait 'til I'm crusty; I'll show all you whippersnappers.

(I'm cranky 'cause I just got the keys to a new house and everything needs paint paint paint and terpentine fumes make me cranky.)

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

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 48 weeks 4 days ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

I apologize guys - but I'm

I apologize guys - but I'm stuck...

I am having trouble getting a label to line up above it's input field AND THEN having another label and input field pair to the right of the first one. I actually want a row of label input field pairs - but each label being ABOVE it's input. NOT to the left of it.

I'm using display block in the label - but it keeps pushing the next pair to a new line...akin to a break.

I've been reading through everything - but what I read does one or the other.

Heres a typed example (if this works) of what I want:

LabelA------LabelB------LabelC
InputA------InputB------InputC

Make sense?

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

Wrap each label/input pair

Wrap each label/input pair in a container, give it a width and float it - i.e., see the HTML structure in my earlier post.

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 48 weeks 4 days ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

This is coming together EVER

This is coming together EVER so slowly. BUT it's coming together.

Since I was pretty over whelmed - I've been working from the outside in and that seems to be helping. Dividing it into chunks so I can see the different parts.

Once I'm done - this will either be a perfect example of HOW to DO a form. Or how NOT TO!

Tongue

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 48 weeks 4 days ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

I finally have ALL the basic

I finally have ALL the basic layout done... Surprisingly (at least to me) it looks very similar to the printed application.

See it here:http://www.fizzcreative.com/hrform/

I am now looking for suggestions (be nice remembering this is my first form attempt)

While snippets of rules seem to fit for small snippets of the form, there are really no blanket solutions for this because it's so big with so many different areas.

1 - I would like to space some of the lines out more, obviously, but it almost seems like I need to add padding - inline - to many different elements - or is there an easier way? (take the present and permanent address areas for example) - they are made up of individual divs - so, to me, padding needs to be applied to each one to add some space between the present and permanent address lines?

2 - I've experimented with nested fieldsets on the right side of the top portion - but really mixed about that unless I line up some left padding (the legend being inset a bit too much bothers me)

3 - Is there some where that defines the individual elements of a form? I get confused by value, name, title, etc. - I am sure I've used some wrong - but have a day or two to correct that - just not sure what I need to correct.

4 - I think there are some instances where I can apply styling to a label - then get rid of the enclosing div just to clean things up a bit.

Like I said - all comments are welcome - just be kind as this is the inital foray into forms.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 2 days 8 hours ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

It's a good effort

It's a good effort especially if, as you say, it resembles the printed form? However I would definitely think about spacing out the various inputs and labels as everything is far too cramped, making it slightly difficult to read and use.

Stuff like "Are you a U.S. Citizen or an alien legally authorized to work in the United States?" if required ought to be placed in paragraph tags, you can then also lose the br tag.

I wouldn't worry too much over the use of the divs they can be useful elements to place margin and padding on applied to groups of child elements, as can the fieldset elements, speaking of which you are not using fieldsets to their best they help to group sections of large forms such as this into manageable chunks.

Remember to keep labels for radios to the right.

Get in the habit of valadating the markup as you have errors that need correcting, use Firefox with the html-tidy plugin to provide source view along with error list.

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