<form> and validation, Navigation drop-down list Options

[ShadowyBob]

I'm doing my best to be purist and get all my pages to properly validate with the WDG validator.

One of the reported problems is a <form> I use for a navigation/site map drop-down list (and, yes, Darin and pandy, I have alternative html links!!).

My code is based on the following (showing only the 1st and last few lines of nearly 90 lines):

CODE

<form>
  <p style="text-align: center"><select name="menu1" size="1"
  onchange="location.href=(form.menu1.options[form.menu1.selectedIndex].value)"
  class="sansb" style="font-size: small; background: #FFFFFF; color: #000000">
    <option value="#">------ Site Map ------</option>
    <option value="index.html">Home</option>
...
...
    <option value="shortstories2.htm">Short Stories</option>
    <option value="#"> </option>
  </select> </p>
</form>

I am validating on HTML 4.01 transitional and UTF-8 charset and get the following error:

<form>
^

Error: required attribute ACTION not specified

I have read up about the actions expected following a FORM element, but cannot see which action to choose (if any).

Any assistance, as usual, gratefully received.

[pandy]

It mean just what the validator says. "action" is a required attribute.

I think the validator is satisfied if you put a blank attribute in or you could put a JS comment there. action="java script://". Both are ugly solutions with no purpose other than satisfying the validator. If you don't back the JS up with a server side script, I think it's better that you let J'S write the whole form. That way neither people without J'S nor the validator has to see it.

[Christian J]

Actually you don't need the FORM element if you're just going to use javascript anyway.

But without FORM you must find some other way to identify the selected OPTION value, IIRC document.getElementById can be used.

[ShadowyBob]

Thanks for your responses. <form action ="uri"> seems to satisfy the validator, and from what I read this action doesn't seem to interfere with anything else.

The reason I shy away from 'js' for this is that I understand (?) that it would not be available for keyboard access, whereas my <form> allows access via the [tab] and then [arrow] keys.

[pandy]

A dropdown written by JS will behave exactly as an ordinary dropdown in that respect.

[Darin McGrew]

And of course, real links work for everyone.

[pandy]

He has that, too.

[Christian J]

<form action ="uri"> seems to satisfy the validator, and from what I read this action doesn't seem to interfere with anything else.

If JS is disabled and a user managed to submit the form he would get lost (to be on the safe side you might use the same page's URL). But I don't think you can submit a form with only a SELECT menu inside, so probably that's a moot objection.

The reason I shy away from 'js' for this is that I understand (?) that it would not be available for keyboard access, whereas my <form> allows access via the [tab] and then [arrow] keys.

I meant JS together with a SELECT menu, like you already use.

But even a "pure" DHTML menu can be made to work with keyboard navigation.

[Darin McGrew]

But I don't think you can submit a form with only a SELECT menu inside, so probably that's a moot objection.

It looks like I can select an option and hit enter, and Opera will submit the form.

Makes sense to me. That's what forms are for, isn't it? Submitting data to the server?

[ShadowyBob]

I think I have been labouring under an illusion all this time. I guess that's what comes of 'nicking' ideas without fully understanding them!

My very limited knowledge outside html/css told me that JavaScript was a form of programming language and was always started with <script language="JavaScript1.2" src="file.js" type="text/javascript"> (or similar) and ended with </script>.

After trying to understand all your comments above, I switched off JavaScript on my browser and, lo and behold, my navigation aid stopped working!

I had no idea I was playing with JavaScript, thus my confusion. I'll go away and think some more....

[pandy]

You can do that, even if forms for navigation are frowned upon as you can gather from Darin's comments.

IF you use a JS driven form for navigation let JS write*) the whole dang thing. Make sure to have real links too, within NOSCRIPT if you wish. This way no one gets confused and everyone gets where they want to go.

*) Simplest way is to use document.write()
document.write('<form><select> /*the rest of the form*/ <\/select><\/form>');

[Christian J]

But I don't think you can submit a form with only a SELECT menu inside, so probably that's a moot objection.

It looks like I can select an option and hit enter, and Opera will submit the form.

I was thinking of (and possibly misreading) http://htmlhelp.com/faq/html/forms.html#enter-submit but if Opera lets you submit the objection is not moot anymore.

[Christian J]

See also http://www.cs.tut.fi/~jkorpela/forms/navmenu.html