Setting width in floated form, making words wrap

This must be something dirt-simple.

I have a floated element. Okay, a few.

One of them is a form, which may be my problem. A second floated container (a div) does what I want.

I'm still not very secure with forms as at first I wasn't the one coding them. Anyway, I've already discovered a form does not act like a regular container, but I'd hate to put my form in a div if it's unnecessary.

<form>
<fieldset>
  <legend>tekst en blah</legend>
    <label>Blah</label>
    <input>veel labels en inputs />
</fieldset>
</form>

Code (markup):

I have a text in Legend under my fieldset.
I set the font in my Legend in em so the old blind people can resize. I want the width of the legend (heck, the form) to stay static; thus, as the text is enlarged, the words should wrap underneath and make the form grow longer. My inputs seem to do this automatically. As I have a float-clearer in my footer, the form can grow as long as it wants and I'm still happy.

I set a width for the form, the fieldset, the legend... turns out I might as well not except for the form so I can float it. Widths seem to be ignored.

Question is, how do I force the words of Legend to wrap? Must I wrap the whole form in a div?

Yes, so far CSS and XHTML 1Strict are valid, have doctype etc blah.

 

hang on, let me get home first, ok? (stupid library)

 

ok, just for starters, you're going to want to read Legends of Style by John "Tyssen" Faulds - it'll get you up to speed on using forms (and especially the problems IE has with them)

 

Looks like the site is going through some changes now. That link gives me a 404 error, as do all the links from the root. But it looks like you can read from Google's cached version. (I'd post a link, but I'm too new to be allowed to post links.) Hope that helps anyway.

 

Hmm... I wonder what's going on. I'll let John know about it.

 

I just checked and it's still 404 as well.

Yeah I was googling around for form stuff and discovered why the previous coder (I'm re-doing a site pizzaatje.nl) wrapped stuff in <p>s; many pages do this in their examples (dunno why). I figure if I'm being semantic I shouldn't do that, as a submit button isn't a paragraph.

Even found the wasp site with a nice recap on accessability but other than a really basic form refresher I didn't find much about forms and CSS out there at all.


I'll try reading the Google cached page for now. Katie, after 10 posts you can post links, but in the meantime you can type stuff like this: tyssendesign.com.au/articles... etc and everyone should know how to copy and paste : )

 

Update: after reading the cache, I noticed he nicely actually has a form on the bottom : ) I was going to replace his <span> with a <p> since spans are inline and can't have set widths... then I though maybe legend is inline too and can't have block elements inside, but all I could find was that it's the caption of the block element fieldset which I already knew... and I must technically have legend if I have fieldset...

Maybe I'll just have a form, with a <p> instead of a fieldset inside, then an inner div for the widths of the inputs cuz they're inline... haven't found anywhere if I must have fieldset and legend, only that if I have fieldset I must also have legend. I've CSS'd the border out, so I guess they're not serving any purpose at all; I just need texts to say Fill Your Postcode In.

 

<legend> is recommended, not required. In fact, it is overkill in some situations and can be acceptable to omit.

One way of getting around this problem is having a <legend> with display: none; and screen readers will still read it with labels for the inputs in the fieldset. If you still want a <legend> for your non visually impaired users, use an appropriately placed <div>.

 

If you're going to use a fieldset, a legend is required. Otherwise, feel free to omit it, but I like to keep it around for accessibility reasons.

 

Whereas due to long standing issues in Gecko from it's Nutscrape legacy, I don't trust legend, caption OR fieldset - I say just use a DIV instead of fieldset, target that and be done with it.

 

And it's one of those rare cases when using an extra DIV (for the fieldset due to IE) and a SPAN (for the legend due to the IE fix killing Gecko) is just fine in my book, as long as they're used appropriately and sparingly.

 

Are you sure? According to the DTD for HTML:

<!ELEMENT FIELDSET - - (#PCDATA,LEGEND,(%flow;)*) -- form control group -->

Code (markup):

And for XHTML:

<!ELEMENT fieldset (#PCDATA | legend | %block; | form | %inline; | %misc;)*>

Code (markup):

It seems <legend> is optional. I'll test it now on the validator.

deathshadow, you can still use a fieldset and legend and make sure they have no visual effect.

 

You mean a SPAN?

<form action="#" id="form-id" method="post">
    <div class="fieldset">
        <fieldset>
            <legend><span>Legend Text</span></legend>
            <!-- rest of related group of form controls go here -->
        </fieldset>
    </div>
</form>

Code (markup):

The DIV and SPAN are there for traditional browsers, while the fieldset and legend are there for accessibility reasons and other user agents that can handle them.

 

Hmm, I'm wondering what you're referring to as accessability here.

I assumed that for a large form, it's more accessable to people with trouble focussing visually or something... as fieldset draws a box and legend says, Do this.

The page I'm working from had an empty fieldset with no legend and the border removed with inline styling boder="0". The text telling people what to do was sitting in a <p> or an <H?> above the form. I thought, hey, I'll just move that down into the fieldset... and then resizing the text destroyed the page.

Or is accessibilty referring to something JAWS does? I just got thumb-JAWS, not fun to learn but anyway it simply reads the legend, and I assume if I had a bigger form, it would read the legends for each fieldset as it came to them like normal instructions.

But this is more of a google-style (right now) with fill in postcode (two boxes with Js tabbing after they fill) and a search button. SO the visual element of the fieldset it unecessary. I was thinking of having:

<form>
<h2>Wilt u weten wie er in uw buurt pizza bezorgt?<br>Vul dan hier uw volledige postcode in:<h2> (this is a very googly-style page, so this is like the only text outside the title and figured h2 is appropriate)
<div id="formlabels">
label, input, label, input, search
</div>
</form>

First sentence explains why you're there, second sentence says Fill in your postcode. Doing the job of a legend, but can be styled.
Div also has set width, resizing text should make label and input boxes wrap down.

Is there something I'm missing here regarding accessability? Should I keep the fieldset with border:none and (empty?) legend with main text still above in an <h?> or <p> tag?

I may go back to what the other guy had, keeping the h? above the form entirely.

 

Apart from a visual aid, it helps those using a screen reader so they better understand the purpose of a text field.

It also prefixes the legend to each label, so for:

<fieldset>
<legend>foo</legend>
<label>bar <input type="text" /></label>
<label>yaz <input type="text" /></label>
</fieldset>

Code (markup):

It would read:
foo
text input foo bar
text input foo yaz
(not what is word to word but close enough)

If you think your labels are descriptive enough, a form heading with a <h#> tag should be sufficient, and if you are using fieldsets, I would put the heading inside it. Or use a legend that is not displayed (only read) and optionally supplement it with a <h#> heading.

 

Okay thanks. It would certianly be a pain to listen to the whole legend for each and every text box; one should only hear the legend text once, and each text box has its own label box so it's pretty obvious what each text box does.

The next page I'm styling does have a larger form, but would still only have one legend and fieldset. Good ideas, krt.